CocosCreator Label添加动态圆角底色

小咪咪 2023-06-21 12:25 17阅读 0赞

### 最终效果： ###

![在这里插入图片描述][20191212180454635.png]  
![在这里插入图片描述][20191212180458656.png]

`cc.Graphics绘制的规律是把其父级控件的左下角设置为(0,0)开始绘制，所以适当调整自己的位置`

实现代码：

import {  texBgInter } from "./textBgInter";
    const {  ccclass, property } = cc._decorator;
    
    @ccclass
    export default class TextBg extends cc.Component implements texBgInter { 
      @property(cc.Node)
      text: cc.Node = null;
      @property(cc.Node)
      down: cc.Node = null;
      @property(cc.Node)
      up: cc.Node = null;
      private downGraphics: cc.Graphics = null;
      private upGraphics: cc.Graphics = null;
      private textLabel: cc.Label = null;
      private lineWidth = 1; //线条宽度
      onLoad() { 
        this.downGraphics = this.down.getComponent(cc.Graphics);
        this.upGraphics = this.up.getComponent(cc.Graphics);
        this.textLabel = this.text.getComponent(cc.Label);
      }
      update(a: any) { 
        //清理上一次绘画
        this.downGraphics.clear();
        this.upGraphics.clear();
        //获取世界坐标(外层node的坐标左下角)
        const worldPoint: cc.Vec2 = this.node.convertToWorldSpace(
          cc.v2(this.down.x, this.down.y)
        );
        //设置绘制属性
        const radius: number = this.textLabel.lineHeight * 0.5;
        const height: number = this.textLabel.lineHeight;
        const width: number = this.text.width < height ? height : this.text.width;
        //绘制down起点x y坐标 坐标从左下角开始绘制
        const xDown: number = worldPoint.x - width * 0.5;
        const yDown: number = worldPoint.y - height * 0.5;
        //绘制up起点x y坐标 坐标从左下角开始绘制
        const xUp: number = worldPoint.x - width * 0.5 + this.lineWidth;
        const yUp: number = worldPoint.y - height * 0.5 + this.lineWidth;
    
        this.downGraphics.roundRect(xDown, yDown, width, height, radius);
        this.upGraphics.roundRect(
          xUp,
          yUp,
          width - this.lineWidth * 2,
          height - this.lineWidth * 2,
          radius
        );
        //绘制实心图形
        this.downGraphics.fill();
        this.upGraphics.fill();
        cc.Label;
      }
      setNum(num: number): void { 
        this.textLabel.string = num.toString();
      }
      setLineWidth(width: number): void { 
        this.lineWidth = width;
      }
      setLineHeight(height: number): void { 
        this.textLabel.lineHeight = height;
      }
      setFontSize(size: number): void { 
        this.textLabel.fontSize = size;
      }
      setColorDown(r: number, g: number, b: number, a: number): void { 
        this.downGraphics.fillColor = new cc.Color(r, g, b, a);
      }
      setColorUp(r: number, g: number, b: number, a: number): void { 
        this.upGraphics.fillColor = new cc.Color(r, g, b, a);
      }
    }

### cc.Graphics配置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]

### cc.Label配置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]

### 效果已实现，需要的拿走！ ###

![如对你有帮助，请支付宝扫一扫领红包，你我都得优惠！][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70_pic_center]

如对你有帮助，请支付宝扫一扫领红包，你我都得优惠！

[20191212180454635.png]: https://img-blog.csdnimg.cn/20191212180454635.png
[20191212180458656.png]: https://img-blog.csdnimg.cn/20191212180458656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212181027963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191212181037353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200103095157568.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ==,size_16,color_FFFFFF,t_70,#pic_center