Идентификатор CSS Tizen SDK не отображается

Я использую Tizen 2.3.1 SDK для носимых устройств и столкнулся с проблемой, когда независимо от того, что я делаю с файлом style.css, добавление любых новых идентификаторов просто отказывается работать.

* {
    margin: 0;
    padding: 0
}

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
}

#str_day {
    position: absolute;
    display: -webkit-flex;
    width: 50%;
    height: 50%;
    background: yellow;
    color: yellow;
    z-index: 4;
    opacity: 1;
}

h1 {
    font-size: 1.4em;
    margin: 10px 0 20px 10px;
    color: #6587ac;
}

#box {
    display: -webkit-flex;
    -webkit-align-items: center;
    width: 100%;
    height: 100%
}

.canvas {
    background: #000;
    width: 320px;
    height: 320px;
    margin: auto;
}

Это мой код. Я пытаюсь добавить идентификатор str_day, однако он не отображается, когда я запускаю пакет через эмулятор. Остальная часть css (в основном элемент холста) работает нормально, но str_day просто не отображается. Я попытался указать z-index и opacity на случай возникновения какой-то странной проблемы, но, похоже, это не проблема.

Это мой полный код на github.

https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187a6e8b366594344


css tizen-wearable-sdk
person JoyfulOwl    schedule 09.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вероятно, из-за неправильного макета CSS str_day отображается/рисуется за пределами области просмотра вашего циферблата, из-за чего он не виден.

Я думаю, что лучше было бы использовать команду холста fillText для печати даты на холсте.

Попробуйте нижеприведенный пример.

var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.
person Shreeram K    schedule 10.01.2016
comment
Честно говоря, я понятия не имел, что существует команда filltext! Спасибо, я попробую это, как только смогу вернуться к своему рабочему компьютеру. - person JoyfulOwl; 10.01.2016