CocosCreator -- 根据字体样式获取Label宽高

游戏中我们会用到很多的提示小窗口,同时根据不同文本配置和字体大小要求适配出最合适的框大小,在CocosCreator中怎么实现对应效果呢。
先看下面效果:在这里插入图片描述,更改文字内容,变成了这个样式:在这里插入图片描述

实现核心代码如下:


export class LabelUtil {
    static lable: cc.Label;

    /**
     * @param text 要显示文本内容
     * @param designSize label的设计宽高
     * @param fontSize 字体大小
     * @param lineHeight 行高
     */
    public static measureSize(text: string, designSize: cc.Size, fontSize: number, lineHeight: number): cc.Size {
        if(!LabelUtil.lable) {
            let node = new cc.Node();
            LabelUtil.lable = node.addComponent(cc.Label);
        }
        LabelUtil.lable.fontSize = fontSize;
        LabelUtil.lable.lineHeight = lineHeight;
        LabelUtil.lable.string = text;

        // 计算宽 
        LabelUtil.lable.overflow = cc.Label.Overflow.NONE;
        LabelUtil.lable.node.setContentSize(new cc.Size(0, lineHeight));
        LabelUtil.lable["_updateRenderData"](true);
        let textWidth = Math.min(LabelUtil.lable.node.width, designSize.width);
        textWidth = Math.floor(textWidth / fontSize) * fontSize;
        // 计算高
        LabelUtil.lable.overflow = cc.Label.Overflow.RESIZE_HEIGHT;
        LabelUtil.lable.node.setContentSize(new cc.Size(textWidth, 0));
        LabelUtil.lable["_updateRenderData"](true);
        let textHeight = LabelUtil.lable.node.height;
        return new cc.Size(textWidth, textHeight);
    }
}

调用方式:

let labelSize = new cc.Size(280, 0);
let size = LabelUtil.measureSize(content, labelSize, 24, 30);

不用客气的拿取使用吧,有什么问题请留言交流。

你可能感兴趣的:(CocosCreator)