Appearance
文本(TextView)
使用字体
使用的字体文件为ttf格式,字体资源需要预先加载,否则后续使用该字体可能出现没效果的情况。加载过的字体在重复使用时不会再次加载。使用方法如下。
// 使用回调
LM.preloadFont(["assets/Graphics/微软雅黑.ttf"],()=>{
console.log("字体加载完成 处理后续逻辑")
})
// 使用await 预加载
async init(){
// 预加载字体
await LM.preloadFont(["assets/Graphics/微软雅黑.ttf"])
console.log("字体加载完成 处理后续逻辑")
}1、文本组件
typescript
// 添加文本组件
let text = new LM.TextView();
this.addChild(text);
// 文本内容
text.text = "这是一个测试文本";
//设置位置
text.x = 100;
text.y = 100;
//设置尺寸
text.width = 400;
text.height = 200;
//横向布局 0:left 1:center 2:right
text.alignHorizontal = 1;
//竖向布局 0:top 1:center 2:bottom
text.alignVertical = 1;
//字体颜色
text.fontColor = "#ffffff";
//字号3
text.fontSize = 36;
//使用字体,必须放在Graphics文件夹下
text.textFamily = "Graphics/font/微软雅黑.ttf";2、常用属性
| 属性 | 解释 | 值 | 默认值 |
|---|---|---|---|
| x | x | 数值 | 0 |
| y | y | 数值 | 0 |
| z | 图层高度,越高越靠上层 | 数值 | 0 |
| width | 宽 | 数值,不填为自适应 | |
| height | 高 | 数值,不填为自适应 | |
| text | 文本内容 | 字符串 | |
| backgroundColor | 背景色 | 字符串,填色号如黑色“#000000” | |
| visible | 是否可见 | 布尔值,true可见,false不可见 | true |
| alpha | 不透明度 | 数值,0~255,255表示完全不透明 | 255 |
| touchEnabled | 是否可点击 | 布尔值,true可点击,false不可点击 | true |
| alphaHitUnable | 透明区域是否可点击 | 布尔值,true可点击,false不可点击 | true |
| isPenetrable | 是否可以穿透(点击到下层组件) | 布尔值,true可穿透,false不可穿透 | true |
| scaleX | 宽缩放率 | 数值,1为原始的宽 | 1 |
| scaleY | 高缩放率 | 数值,1为原始的高 | 1 |
| zoomCenterX | 缩放中心x(相对于自己) | 数值,0.5为组件X轴中点 | 0 |
| zoomCenterY | 缩放中心y(相对于自己) | 数值,0.5为组件Y轴中点 | 0 |
| alignHorizontal | 横向布局 | 0:left 1:center 2:right | 0 |
| alignVertical | 竖向布局 | 0:top 1:center 2:bottom | 0 |
| fontColor | 字体颜色 | 字符串,填色号如黑色“#000000” | #ffffff |
| fontSize | 字号 | 数值 | 40 |
| textFamily | 字体 | 字符串,填字体文件地址,必须放在assets/Graphics文件夹下 | |
| lineHeightType | 行距类型 | 0:行间距用倍数,1:行间距用像素值 | 0 |
| lineHeight | 行距(含字本身) | 数值 | 1.5 |
| fontSpace | 字间距(不含字本身) | 数值 | |
| isTpye | 打字机开关 | 布尔值 | false |
| isTypingSkipOnClick | 点击后跳过打字机效果 | 布尔值 | true |
| typeTime | 打字机时间,打每个字的时间,单位ms | 数值 | 100 |
| zoomType | 字超出组件宽度时的处理 | 数值,0.自动换行 1.缩小字号 2.截断并补充省略号 3.直接截断 | 0 |
3、文本特殊字符转义
| 作用 | 转义符 | 示例 |
|---|---|---|
| 变色 | #c | text.text = "#c[255,0,0]我是红色的文字#c[]我恢复原本颜色" |
| 变字体大小 | #s | text.text = "#s[30]我是30号的文字#s[]我恢复原本字体大小" |
| 行对齐 | #p[l] 行左对齐 #p[c] 行居中对齐 #p[r] 右对齐 #p[j] 两端对齐 | text.text = "#p[c]我是中对齐的文字#p[] #n[1]我是第二行文字 我是左对齐" |
| 段落对齐 | #pa[l] 段落左对齐 #pa[c] 居中对齐 #pa[r] 右对齐 #pa[j] 两端对齐 | text.text = "#pa[c]我是段落居中对齐的文字#pa[]#n[1]我是第二行文字 我是左对齐" |
| 加粗 | #b | text.text = "#b[on]我是加粗的文字#b[off]我不是加粗的文字" |
| 斜体 | #i | text.text = "#i[on]我是斜体文字#i[off]我不是斜体" |
| 下划线 | #u | text.text = "#u[on]我是下划线文字#u[off]我不是下划线" |
| 描边 | #o | text.text = "#o[255,0,0,3]我是描边的文字#o[]我不是描边" |
| 换行 | #n | text.text = "我是第一行文字#n[2]换两行我是第三行文字" |
4、常用方法
(1)onClick
点击行为
(2)onTouchDown
按下行为
(3)onTouchUp
抬起行为
(4)onTouchMove
鼠标在组件区域内移动(可用作悬浮)
(5)onTouchCancel
鼠标移出组件区域(可用作离开悬浮)
typescript
let text = new LM.TextView()
// 注册了点击事件
text.onClick(()=>{console.log("点击了控件")})
// 注册了按下事件
text.onTouchDown(()=>{console.log("按下")})
// 注册了抬起事件
text.onTouchUp(()=>{console.log("抬起")})
// 注册了移动事件
text.onTouchMove(()=>{console.log("移动了")})
// 注册了移出事件
text.onTouchCancel(()=>{console.log("移出")})(6)setOnTypingCompleteListener
打字机完成监听事件,打字完后会触发一次
typescript
text.setOnTypingCompleteListener(()=>{
console.log("打字机完成")
})(7)showAllText
立刻刷新绘制文本(经常使用会导致性能降低,正常情况下文本设置属性后会在下一帧进行刷新)