Tizen SDK CSS ID 未呈现

Question

我正在为可穿戴设备使用 Tizen 2.3.1 SDK，并且运行遇到一个问题，无论我对 style.css 文件做什么，添加任何新 ID 都无法正常工作。

* {
    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 id，但是当我通过模拟器运行包时它没有显示。 css 的其余部分（主要是 canvas 元素）工作正常，但 str_day 只是没有出现。我尝试指定 z-index 和 opacity 以防出现一些奇怪的问题，但这似乎不是问题所在。

这是我在 github 上的完整代码。

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

Answer 1

可能是因为 CSS 布局不当 str_day rendered/painted 在您的表盘视口之外，因此它不可见。

我认为更好的方法是使用 canvas fillText 命令在 canvas 上打印日期。

试试下面的例子。

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.

Tizen SDK CSS ID 未呈现

Tizen SDK CSS ID Not Being Rendered

css

tizen-wearable-sdk