绘图的问题

Creator 2.x
#1

使用绘图组件想做一个画笔功能，遇到一个奇葩的问题。
参考https://github.com/2youyou2/graphics-tutorials项目里的pencil/step1

onLoad: function () {
        this.ctx = this.getComponent(cc.Graphics);

        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan: this.onTouchBegan.bind(this),
            onTouchMoved: this.onTouchMoved.bind(this),
            onTouchEnded: this.onTouchEnded.bind(this),
        }, this.node);
    },

    onTouchBegan: function (touch, event) {
        var touchLoc = touch.getLocation();
        touchLoc = this.node.parent.convertToNodeSpaceAR(touchLoc);
        this.points = [touchLoc];

        return true;
    },

    onTouchMoved: function (touch, event) {
        var touchLoc = touch.getLocation();
        touchLoc = this.node.parent.convertToNodeSpaceAR(touchLoc);
        
        cc.log(touchLoc.x + ' ' + touchLoc.y);

        this.points.push(touchLoc);

        // this.ctx.clear();
        for (let i = 0, l = this.points.length; i < l; i++) {
            let p = this.points[i];
            if (i === 0) {
                this.ctx.moveTo(p.x, p.y);
            }
            else {
                this.ctx.lineTo(p.x, p.y);
            }
        }

        this.ctx.stroke();
    },

    onTouchEnded: function (touch, event) {
    },

注释掉每次绘制前的 this.ctx.clear(); 不能每次只画一笔。。。
在浏览器中运行正常，但在模拟器里运行，一次移动多个点后会出现下面的情况。。。。

7896C46A-80B7-4B8A-9F4F-929E3B0B309C.png1394×822 115 KB

移动路径中的点都与起始点有连线。
请问怎么解决这个。。。。。万分感谢

#2

@jjyinkailejj 灵魂画师。

#3

onTouchMoved 必须清的啊，不清的话你每次移动都会加入n个之前已经绘画过的点，graphics 最多能绘制 65536 个顶点，你这样瞬间就会超过这个数

要画多笔，应该在 onTouchBegan 做修改，怎么修改你自己先尝试下吧

1赞
#4

是这个原因啊，O(∩_∩)O谢谢，初学cocos creator
onTouchBegan里每一笔创建一个graphics组件进行绘制怎么样，没有找到graphics可以存储路径的api。

var newNode = new cc.Node;
this.node.addChild(newNode);
this.ctx = newNode.addComponent(cc.Graphics);
#5

存储路径是要靠 this.points

#6

哦哦，用二维数组存起来。。。O(∩_∩)O谢谢，自己太笨:6: