问下大佬 cocoscreator 有什么文字两端对齐的解决方案吗?

问下大佬 cocoscreator 有什么文字两端对齐的解决方案吗?

把node锚点设置成0或1,x设置一样,不就左对齐或右对齐了吗

组件上不是可以设置左对齐或者右对齐还有居中吗

这个问题想了一下好像有点复杂,如果是静态内容与排版的话还好,如果是动态内容或者容器尺寸会变化的话,有以下几种思路:

【方法1】 通过代码计算字符串宽度来插入空格,不过误差比较大,效果不好;

【方法2】 在1的基础上逐行渲染,使用系统字体(将Label的cacheMode设置为CHAR,不然spacingX没用)或者bmfont,label的spacingX设为0(默认值),在第一次渲染或调用_forceUpdateRenderData过后,获取该行文本宽度,计算与指定行宽度的差值,除以该行string.length-1,算出新的spacingX,再渲染一次,有点麻烦,可能会影响性能,不过显示效果还可以

let lbls = [
    this.lbl1,
    this.lbl2,
    this.lbl3,
];

lbls.forEach((lbl, i) => {
    lbl.string = [
        "123456",
        "1234567",
        "12345",
    ][i];
    lbl["_forceUpdateRenderData"]();
});

let w = lbls.map(lbl => lbl.node.width);

let max = Math.max(...w);

let s = w.map((w, i) => {
    return (max - w) / (lbls[i].string.length - 1)
});

lbls.forEach((lbl, i) => {
    lbl.spacingX = s[i];
});
2赞

32个赞不怕你骄傲

这个方案是有效的,但是受限于 label.spacingX 需要 cacheMode 为 BitMap 模式才有效。

升级到 3.6.2 版本的方案链接

https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.6.x/proj/UI/Creator3.6.2_2D_TextAlignmentAtBothEnds