# 标签

# 标签列表

标签 说明
view 容器标签,与HTML中的div相似
scrollview 滚动列表容器,如果容器内的子元素高度大于scrollview高度,支持纵向滚动,不支持嵌套scrollview
image 图片标签,
text 文本标签
bitmaptext bitmapfont文本标签

# 公共属性

每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

属性 类型 是否必填 说明
id string 非唯一标识,两个标签可以共用id
class string 与浏览器相同

# view标签

view标签用来页面布局,布局严格遵循CSS Flex布局,节点在Flex属性相互作用的结果可以通过Yoga的Playground试验。

# image标签

# 特殊属性

属性 类型 是否必填 说明
src string 图片链接

TIP

1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;

2.图片可以通过APIloadImgs实现预加载

# text标签

# 特殊属性

属性 类型 是否必填 说明
value string 文字内容

# 特殊样式

属性 类型 是否必填 说明
textOverflow string 文字溢出处理方式,默认不处理,ellipsis则支持自动截断
textAlign string 文字水平居中方式,默认left,支持right、center

# scrollview标签

滚动内容的容器,滚动的前提是正确调用updateViewPort

# bitmapfont

在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。

本渲染引擎调研了常见的H5游戏引擎Laya、Cocos、Egret,他们普遍支持AngelCode.com打包后的配置文件规范,因此biamapfont 同样只支持通过该工具打包后的文件。

需要特别注意的是,对于一般的游戏引擎而言,都会在自己的IDE里面将.fnt打包进代码里面,这里为了引擎轻量化,需要通过APIregistBitMapFont手动注册字体。 然后在标签里面通过font属性声明需要使用的字体。

<bitmaptext font="fnt_number-export" class="title" value="等级"></bitmaptext>
title: {
        width: 144,
        fontSize: 48,
        height: 120,
        lineHeight: 50,
        textAlign: 'center',
      	verticalAlign: 'top',
        fontWeight: 'bold',
        borderBottomWidth: 6,
        borderColor: '#000000',
}

# 特殊样式

属性 类型 是否必填 说明
width Number 文字的容器宽度,当width大于文字实际绘制占据的宽度,textAlign生效
height Number 文字的容器高度,当height大于lineHeight,verticalAlign属性生效
lineHeight Number 渲染文字的行高,默认为配置文件里面的lineHeight
textAlign String 文字水平居中方式,默认left,支持right、center
verticalAlign String 文字垂直居中的方式,默认为middle,支持top和bottom

# 示例