分享一个圆角矩形Component。。

907638015 · 2018年05月13日 01:52

cc.Class({
extends: cc.Component,

properties: {
    _borderColor: cc.color(),
    _borderWidth: 0,
    _radiuLeftTop: 0,
    _radiuRightTop: 0,
    _radiuRightBottom: 0,
    _radiuLeftBottom: 0,
    _fullColor: cc.color(),
    _drawNode: null,
    borderColor: {
        type: cc.Color,
        get: function (){
            return this._borderColor;
        },
        set: function(val){
            this._borderColor = val;

            this._refreshRect();
        },
        tooltip: "边框颜色"
    },
    borderWidth: {
        type: cc.Float,
        get: function (){
            return this._borderWidth;
        },
        set: function(val){
            this._borderWidth = val;

            this._refreshRect();
        },
        tooltip: "边框线条宽度"
    },
    radiuLeftTop: {
        type: cc.Float,
        get: function (){
            return this._radiuLeftTop;
        },
        set: function(val){
            this._radiuLeftTop = val;

            this._refreshRect();
        },
        tooltip: "左上角圆角半径"
    },
    radiuRightTop: {
        type: cc.Float,
        get: function (){
            return this._radiuRightTop;
        },
        set: function(val){
            this._radiuRightTop = val;

            this._refreshRect();
        },
        tooltip: "右上角圆角半径"
    },
    radiuRightBottom: {
        type: cc.Float,
        get: function (){
            return this._radiuRightBottom;
        },
        set: function(val){
            this._radiuRightBottom = val;

            this._refreshRect();
        },
        tooltip: "右下角圆角半径"
    },
    radiuLeftBottom: {
        type: cc.Float,
        get: function (){
            return this._radiuLeftBottom;
        },
        set: function(val){
            this._radiuLeftBottom = val;

            this._refreshRect();
        },
        tooltip: "左下角圆角半径"
    },
    fullColor: {
        type: cc.Color,
        get: function (){
            return this._fullColor;
        },
        set: function(val){
            this._fullColor = val;

            this._refreshRect();
        },
        tooltip: "填充颜色"
    }
},

// LIFE-CYCLE CALLBACKS:

// onLoad () {},

start () {
    this.node.on("size-changed", this._refreshRect, this);
    this.node.on("anchor-changed", this._refreshRect, this);

    this._refreshRect();
},

_refreshRect(){
    if (!this._drawNode){
        this._drawNode = new cc.DrawNode();

        this.node._sgNode.addChild(this._drawNode);
    }

    var polies = [],
        isSquare = this.node.width === this.node.height,
        maxRadiuLength = this._isSquare ? this.node.width / 2 : Math.min(this.node.width, this.node.height) / 2;

    this._drawNode.x = -(this.node.anchorX * this.node.width);
    this._drawNode.y = +(this.node.anchorY * this.node.height);

    this._drawNode.clear();

    if (this.radiuLeftTop > maxRadiuLength)
        this.radiuLeftTop = maxRadiuLength;

    if (this.radiuLeftBottom > maxRadiuLength)
        this.radiuLeftBottom = maxRadiuLength;

    if (this.radiuRightBottom > maxRadiuLength)
        this.radiuRightBottom = maxRadiuLength;

    if (this.radiuRightTop > maxRadiuLength)
        this.radiuRightTop = maxRadiuLength;

    if (this.radiuLeftTop > 0)
        this._pushRadian(this.radiuLeftTop, cc.p(this.radiuLeftTop, -this.radiuLeftTop), 90, 180, polies);
    else
        polies.push(cc.p(0, 0));

    if (this.radiuLeftBottom > 0)
        this._pushRadian(this.radiuLeftBottom, cc.p(this.radiuLeftBottom, -this.node.height + this.radiuLeftBottom), 180, 270, polies);
    else
        polies.push(cc.p(0, -this.node.height));

    if (this.radiuRightBottom > 0)
        this._pushRadian(this.radiuRightBottom, cc.p(this.node.width - this.radiuRightBottom, -this.node.height + this.radiuRightBottom), 270, 360, polies);
    else
        polies.push(cc.p(this.node.width, -this.node.height));

    if (this.radiuRightTop > 0)
        this._pushRadian(this.radiuRightTop, cc.p(this.node.width - this.radiuRightTop, -this.radiuRightTop), 360, 450, polies);
    else
        polies.push(cc.p(this.node.width, 0));

    this._drawNode.drawPoly(polies, this.fullColor, this.borderWidth, this.borderColor);
},

_pushRadian(r, conter, startAngle, endAngle, polies){
    var proportion = (endAngle - startAngle) / 360,
        segements = parseInt(r * Math.PI * 8 * proportion),
        anglePerStep = Math.PI * 2 * proportion / segements,
        startAngle = Math.PI / 180 * startAngle;

    for(var step = 0; step < segements; ++ step) {
        polies.push(cc.p(r * Math.cos(startAngle + anglePerStep * step) + conter.x, r * Math.sin(startAngle + anglePerStep * step) + conter.y));
    }

    return polies;
},
// update (dt) {},

});

以上是代码，但是在编辑器下有点小瑕疵，就是必须手动改变一下属性才能才编辑器上显示画出的图案。。

顺带问个问题。。
就是自定义了一个Component，当编辑器把这个组件拖入到布局里面去的时候，如何让他自动执行一个方法，，

每次都要手动修改一下Component属性然后通过set函数再调用一下_refreshRect函数，太繁琐了。。

好像编辑器不会调用start方法。。。

1053128593 · 2018年05月13日 10:31

需要开启组件编辑器属性 editor 参数

editor: { // 允许当前组件在编辑器模式下运行。 // 默认情况下，所有组件都只会在运行时执行，也就是说它们的生命周期回调在编辑器模式下并不会触发。 // // 值类型：Boolean // 默认值：false executeInEditMode: false, },

907638015 · 2018年05月13日 10:32

此楼正解、、感谢。

amumu · 2018年09月6日 04:24

是要将executeInEditMode设置为true,组件编辑器才会默认触发？

269692611 · 2018年09月6日 06:30

学习了，又会一招，感谢

2293323850 · 2018年09月6日 07:38

mark

amumu · 2018年09月6日 12:58

问一下楼主，我这边把绑定脚本的节点都取消勾选了，为什么还会显示？有什么办法解决么？
这里是我的DemoNewProject.rar (234.5 KB)

amumu · 2018年09月13日 02:28

文字缩进4格
/**

@description: 绘制圆角矩形组件
*/
cc.Class({
extends: cc.Component,

editor: {

 // 允许当前组件在编辑器模式下运行。
 // 默认情况下，所有组件都只会在运行时执行，也就是说它们的生命周期回调在编辑器模式下并不会触发。
 //
 // 值类型：Boolean
 // 默认值：false
 executeInEditMode:true,

},
properties: {
_borderColor: cc.color(),
_borderWidth: 0,
_radiuLeftTop: 0,
_radiuRightTop: 0,
_radiuRightBottom: 0,
_radiuLeftBottom: 0,
_fullColor: cc.color(),
_drawNode: null,
borderColor: {
type: cc.Color,
get: function (){
return this._borderColor;
},
set: function(val){
this._borderColor = val;

         this._refreshRect();
     },
     visible: true,
     tooltip: '边框颜色'
 },
 borderWidth: {
     type: cc.Float,
     get: function (){
         return this._borderWidth;
     },
     set: function(val){
         this._borderWidth = val;

         this._refreshRect();
     },
     tooltip: '边框线条宽度'
 },
 radiuLeftTop: {
     type: cc.Float,
     get: function (){
         return this._radiuLeftTop;
     },
     set: function(val){
         this._radiuLeftTop = val;

         this._refreshRect();
     },
     tooltip: '左上角圆角半径'
 },
 radiuRightTop: {
     type: cc.Float,
     get: function (){
         return this._radiuRightTop;
     },
     set: function(val){
         this._radiuRightTop = val;

         this._refreshRect();
     },
     tooltip: '右上角圆角半径'
 },
 radiuRightBottom: {
     type: cc.Float,
     get: function (){
         return this._radiuRightBottom;
     },
     set: function(val){
         this._radiuRightBottom = val;

         this._refreshRect();
     },
     tooltip: '右下角圆角半径'
 },
 radiuLeftBottom: {
     type: cc.Float,
     get: function (){
         return this._radiuLeftBottom;
     },
     set: function(val){
         this._radiuLeftBottom = val;

         this._refreshRect();
     },
     tooltip: '左下角圆角半径'
 },
 fullColor: {
     type: cc.Color,
     get: function (){
         return this._fullColor;
     },
     set: function(val){
         this._fullColor = val;

         this._refreshRect();
     },
     tooltip: '填充颜色'
 }

},

// LIFE-CYCLE CALLBACKS:

// onLoad () {},

onLoad () {
this.node.on(‘size-changed’, this._refreshRect, this);
this.node.on(‘anchor-changed’, this._refreshRect, this);
//创建节点绘制
if (!this._drawNode){
this._drawNode = new cc.DrawNode();

     this.node._sgNode.addChild(this._drawNode);
 }

},
onEnable() {
//启用时绘制
this._refreshRect();
},

onDisable() {
//禁用时清空
this._drawNode.clear();
},
//刷新矩形，重新绘制
_refreshRect(){
if (!this._drawNode){
this._drawNode = new cc.DrawNode();

     this.node._sgNode.addChild(this._drawNode);
 }

 var polies = [],
     isSquare = this.node.width === this.node.height,
     maxRadiuLength = this._isSquare ? this.node.width / 2 : Math.min(this.node.width, this.node.height) / 2;

 this._drawNode.x = -(this.node.anchorX * this.node.width);
 this._drawNode.y = +(this.node.anchorY * this.node.height);

 this._drawNode.clear();

 if (this.radiuLeftTop > maxRadiuLength)
     this.radiuLeftTop = maxRadiuLength;

 if (this.radiuLeftBottom > maxRadiuLength)
     this.radiuLeftBottom = maxRadiuLength;

 if (this.radiuRightBottom > maxRadiuLength)
     this.radiuRightBottom = maxRadiuLength;

 if (this.radiuRightTop > maxRadiuLength)
     this.radiuRightTop = maxRadiuLength;

 if (this.radiuLeftTop > 0)
     this._pushRadian(this.radiuLeftTop, cc.p(this.radiuLeftTop, -this.radiuLeftTop), 90, 180, polies);
 else
     polies.push(cc.p(0, 0));

 if (this.radiuLeftBottom > 0)
     this._pushRadian(this.radiuLeftBottom, cc.p(this.radiuLeftBottom, -this.node.height + this.radiuLeftBottom), 180, 270, polies);
 else
     polies.push(cc.p(0, -this.node.height));

 if (this.radiuRightBottom > 0)
     this._pushRadian(this.radiuRightBottom, cc.p(this.node.width - this.radiuRightBottom, -this.node.height + this.radiuRightBottom), 270, 360, polies);
 else
     polies.push(cc.p(this.node.width, -this.node.height));

 if (this.radiuRightTop > 0)
     this._pushRadian(this.radiuRightTop, cc.p(this.node.width - this.radiuRightTop, -this.radiuRightTop), 360, 450, polies);
 else
     polies.push(cc.p(this.node.width, 0));

 this._drawNode.drawPoly(polies, this.fullColor, this.borderWidth, this.borderColor);

},
//设置弧度
_pushRadian(r, conter, startAngle, endAngle, polies){
var proportion = (endAngle - startAngle) / 360,
segements = parseInt(r * Math.PI * 8 * proportion),
anglePerStep = Math.PI * 2 * proportion / segements,
startAngle = Math.PI / 180 * startAngle;

 for(var step = 0; step < segements; ++ step) {
     polies.push(cc.p(r * Math.cos(startAngle + anglePerStep * step) + conter.x, r * Math.sin(startAngle + anglePerStep * step) + conter.y));
 }

 return polies;

},
});
已解决。

819293923 · 2018年09月13日 02:35

mark

781900570 · 2018年09月13日 02:45

mark

1649201921 · 2019年01月6日 04:28

new cc.DrawNode()
TypeError: cc.DrawNode() is not a constructor，场景编辑器里也显示不出来，V2.1.0的版本，是不是没有这个api了，你们怎么解决的呢？

81777756 · 2019年02月20日 02:52

你好解决了吗