Skip to content

文本(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、常用属性

属性解释默认值
xx数值0
yy数值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:right0
alignVertical竖向布局0:top 1:center 2:bottom0
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、文本特殊字符转义

作用转义符示例
变色#ctext.text = "#c[255,0,0]我是红色的文字#c[]我恢复原本颜色"
变字体大小#stext.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]我是第二行文字 我是左对齐"
加粗#btext.text = "#b[on]我是加粗的文字#b[off]我不是加粗的文字"
斜体#itext.text = "#i[on]我是斜体文字#i[off]我不是斜体"
下划线#utext.text = "#u[on]我是下划线文字#u[off]我不是下划线"
描边#otext.text = "#o[255,0,0,3]我是描边的文字#o[]我不是描边"
换行#ntext.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

立刻刷新绘制文本(经常使用会导致性能降低,正常情况下文本设置属性后会在下一帧进行刷新)