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：