Cocos Creator 组件-画笔

// 0. > 试用于CocosCreator1.x及以下版本
//    > 会强制设置挂载该脚本的节点的anchor为(0.5, 0.5)，方便触摸位置转换
//    > 可以在该节点上添加cc.Sprite组件当背景色，不加则为背景透明
//    > 画板尺寸和挂载该脚本的节点size一致


// 1.setPen(event, param)       直接设置画笔功能 (带参数：原色画笔功能   不带参数：橡皮擦功能)

// 2.setPenColor（event, r, g, b, a)        画笔颜色
//      传值举例: object, 2, 255, 0, 255     5个参数，后4个分别对应r,g,b,a
//               object, "2,255,0,255"      2个参数，后1个字符串对应“r,g,b,a”,用英式','分割的字符串
// 注意：a对应的透明度alpha值为0时，为橡皮檫功能

// 3.setPenRadius(event, r)     画笔线粗(画笔半径)


cc.Class({
    extends: cc.Component,

    properties: {
        penRadius: {
            default: 10,
            displayName: "画笔线粗",
            tooltip: "画板尺寸和挂载该脚本的节点size一致",
            min: 1,
        },
        
        penColor: {
            default: new cc.Color(0, 0, 0, 255),
            displayName: "画笔颜色",
            tooltip: "a值为0则为橡皮擦功能,否则为画笔功能\n也可以通过setPen方法[带参数|不带参数]来切换橡皮和画笔功能"
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // use this for initialization
    // onLoad () { },

    start () {
        this.node.anchorX = 0.5;
        this.node.anchorY = 0.5;
        this.lastPenColor = this.penColor;

        // 画板
        this.render = cc.RenderTexture.create(this.node.width, this.node.height);
        this.node._sgNode.addChild(this.render);
        
        
        // 纯色填充
        this.render.clear(255, 0, 0, 255)

        // // 纯色填充
        // this.render.begin();
        // this.bgDrawNode = new cc.DrawNode();
        // this.bgDrawNode.setDrawColor(new cc.Color(0, 100, 0, 255));
        // this.bgDrawNode.drawRect(cc.v2(0, 0), cc.v2(1920, 1080), new cc.Color(50, 200, 50, 255), 100);
        // this.bgDrawNode.visit();
        // this.render.end();
        // this.bgDrawNode.release();

        // 画笔
        this.penDrawNode = new cc.DrawNode();
        //触摸擦除
        this.node.on(cc.Node.EventType.TOUCH_MOVE, (touch) => {
            let previousLocation = this.node.convertToNodeSpace(touch.getPreviousLocation());
            let currentLocation = this.node.convertToNodeSpace(touch.getLocation());
            let tempColor = this.penColor;

            // 橡皮功能
            if (tempColor.a == 0) {
                tempColor = new cc.Color(255, 255, 255, 255);   // 如果画笔颜色的alpha为0.没有什么效果
                this.penDrawNode.setBlendFunc(cc.macro.ZERO, cc.macro.ONE_MINUS_SRC_ALPHA);
            }
            // 画笔功能
            else {
                this.penDrawNode.setBlendFunc(cc.macro.SRC_ALPHA, cc.macro.ONE_MINUS_SRC_ALPHA);
            }

            //清除下DrawNode，否则会使DrawVert数目暴增
            this.penDrawNode.clear();

            // 上个位置到当前位置的线段
            this.penDrawNode.drawSegment(
                previousLocation,   // 前一位置
                currentLocation,    // 当前位置
                this.penRadius,     // 半径
                tempColor           // 颜色
            );
            // 当前位置的点  （实际测试下来发现：这个点不用也行）
            // this.penDrawNode.drawDot(
            //     currentLocation,
            //     this.penRadius,
            //     tempColor
            // );

            this.render.begin();
            this.penDrawNode.visit();
            this.render.end();
        }, this);
    },

    setPen(event, param) {
        if (param != undefined) {
            // 画笔功能
            this.penColor = this.lastPenColor;
        } else {
            // 橡皮功能
            if (this.penColor.a != 0) {
                this.lastPenColor = this.penColor;
            }
            this.penColor = new cc.Color(255, 255, 255, 0);
        }
    },

    setPenColor(event, r, g, b, a) {
        let newColor = undefined;
        if (r != undefined) {
            if (g != undefined && b != undefined && a != undefined) {
                newColor = new cc.Color(r, g, b, a);
            } else {
                let rgba = r.split(",");
                if (rgba.length >= 4) {
                    newColor = new cc.Color(rgba[0], rgba[1], rgba[2], rgba[3]);
                }
            }
        }
        if (newColor) {
            this.penColor = newColor;
        }
    },

    setPenRadius(event, r) {
        if (r != undefined && parseFloat(r) > 1) {
            this.penRadius = parseFloat(r);
        }
    }

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

 

 

拖到节点上之后效果是这样子的:

 

 

运行出来是这样子的，画板范围就是节点的size：