cocosCreator动态获取Label宽度 适用3.6以上

不知大家注意到没有,在编辑器里如果设置Label的overflow属性为none,则你设置string为多少,UITranform组件里的contentSize的width就是真实的字符串宽度,这正是我们想要的,可是如果你在代码里这样写:

let contentWidth = this.lblContent.getComponent(UITransform).contentSize.width;

这里的contentWidth不对,不是我们当前设置的字符串宽度,而是Label控件最初始的宽度,这是因为Label渲染时只在最初的渲染记录下contentSize,如果组件更新了那就要调用下Label的updateRenderData(true)方法才能获取到实时的组件宽度,如下面写法

this.lblContent.updateRenderData(true);

let contentWidth = this.lblContent.getComponent(UITransform).contentSize.width; //这时contentWidth才正确

可是这样是不是就是正确的解决方案呢,也不是,如果你在跑马灯里想求出文本的长度,计算label的跑动时间,炮马灯肯定是用tween动作来实现,如果这时候你调用了updateRenderData,你会发现label的setPosition方法等都失效了,无法将label标签移动到初始的位置,产生了一系列BUG,原因我不清楚,但是注掉updateRenderData这条语句setPosition才会正常。

那怎么办呢,我想到的解决方案是复制一个Label标签,fontSize, string, 字体都和原Label一样,在这个复制的Label上调用updateRenderData(true),不就得出了字符串宽度,又不会影响原来的Label吗?废话不多说,上代码:

import { Label, Size, UITransform,Node,Color } from "cc";


export class LabelUtils {
    static label: Label;
     /**
     * @param text 要显示文本内容
     * @param designSize label的设计宽高
     * @param fontSize 字体大小
     * @param lineHeight 行高
     */
    public static measureSize(text: string, fontSize: number, lineHeight: number):number {
        let node = new Node();
        var newlabel :Label = node.addComponent(Label);
        
       // root.addChild(newlabel.node);
        newlabel.fontSize = fontSize;
        newlabel.lineHeight = lineHeight;
        newlabel.string = text;
        newlabel.color = new Color(0, 0, 0, 0);
        //计算宽度
        newlabel.overflow = Label.Overflow.NONE;
        
        newlabel.updateRenderData(true);
        //let textWidth = Math.min(LabelUtils.label.getComponent(UITransform).width, designSize.width);
        let textWidth = newlabel.getComponent(UITransform).contentSize.width;
        node.destroy();

        return textWidth;
    }
}

调用时这样调用 let contentWidth:number = LabelUtils.measureSize(this.lblContent.string, 20, 40);

就求出字符串宽度了,英文和汉字都能得出正确结果。当然这个方法还是有不足之处,如没有设置fontFamily,即字体,默认是Arial, 因为我不知道cocosCreator怎么设置这个fontFamily, 什么宋体黑体和艺术字怎么在代码里明确设置,官方API里没有明确写出代码设置字体的代码,希望知道的大神告知,工作繁忙一时没时间研究,抱歉了。

你可能感兴趣的:(前端,javascript,cocosCreator)