标签
标签列表
标签 | 说明 |
view | 容器标签,与HTML中的div相似 |
scrollview | 滚动列表容器,如果容器内的子元素高度大于scrollview高度,支持纵向滚动,不支持嵌套scrollview |
image | 图片标签 |
text | 文本标签 |
bitmaptext | bitmapfont文本标签 |
canvas | 对齐 Web,允许获取 context执行渲染 |
公共属性
每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。
属性 | 类型 | 是否必填 | 说明 |
id | string | 否 | 非唯一标识,两个标签可以共用id,可以通过 Layout.getElementsById 获取到元素实例 |
class | string | 否 | 与浏览器相同 |
dataset | string | 否 | 与浏览器相同,详见文档 (opens new window) |
view
view标签用来页面布局,布局严格遵循CSS Flex布局 (opens new window),节点在Flex属性相互作用的结果可以通过Yoga的Playground (opens new window)试验。
image
特殊属性
属性 | 类型 | 是否必填 | 说明 |
src | string | 是 | 图片链接 |
TIP
1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;
2.图片可以通过APIloadImgs实现预加载
text
特殊属性
属性 | 类型 | 是否必填 | 说明 |
value | string | 是 | 文字内容 |
特殊样式
属性 | 类型 | 是否必填 | 说明 |
textOverflow | string | 否 | 文字溢出处理方式,默认不处理,ellipsis则支持自动截断 |
textAlign | string | 否 | 文字水平居中方式,默认left,支持right、center |
滚动内容的容器,滚动的前提是正确调用updateViewPort
特殊样式
属性 | 类型 | 是否必填 | 说明 |
scrollX | string | 否 | 是否需要横向滚动,支持 "true"和"false",默认值为 "false" |
scrollY | string | 否 | 是否需要纵向滚动,支持 "true"和"false", 默认值为"false" |
bitmapfont
在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。
本渲染引擎调研了常见的H5游戏引擎Laya、Cocos、Egret,他们普遍支持AngelCode.com (opens new window)打包后的配置文件规范,因此biamapfont
同样只支持通过该工具打包后的文件。
需要特别注意的是,对于一般的游戏引擎而言,都会在自己的IDE里面将.fnt打包进代码里面,这里为了引擎轻量化,需要通过APIregistBitMapFont手动注册字体。
然后在标签里面通过font属性声明需要使用的字体。
特殊样式
属性 | 类型 | 是否必填 | 说明 |
width | Number | 是 | 文字的容器宽度,当width大于文字实际绘制占据的宽度,textAlign生效 |
height | Number | 是 | 文字的容器高度,当height大于lineHeight,verticalAlign属性生效 |
lineHeight | Number | 否 | 渲染文字的行高,默认为配置文件里面的lineHeight |
textAlign | String | 否 | 文字水平居中方式,默认left,支持right、center |
verticalAlign | String | 否 | 文字垂直居中的方式,默认为middle,支持top和bottom |
letterSpacing | Number | 否 | 字符间距 |
示例
canvas
特殊属性
属性 | 类型 | 是否必填 | 说明 |
width | Number | 否 | canvas 画布的尺寸,与样式的尺寸不是一个概念 |
height | Number | 否 | canvas 画布的尺寸,与样式的尺寸不是一个概念 |
autoCreateCanvas | String | 否 | 是否自动创建 canvas,默认为 "false",有些场景如微信小游戏场景,sharedCavans非业务创建,则需要手动设置canvas 实例 |