【Cocos02】画笔跟随的画线及一些api

初始画笔

this.drawNode = cc.find('Canvas/bg/drawNode');

const graphicsNode = new cc.Node();
this.ctx = graphicsNode.addComponent(cc.Graphics);
this.ctx.lineWidth = this.pencilWidth;
this.ctx.lineCap = cc.Graphics.LineCap.ROUND;
this.ctx.lineJoin = cc.Graphics.LineJoin.ROUND;
this.ctx.strokeColor = this.pencilColor;
this.drawNode.addChild(graphicsNode);

监听touch来画线

 touchStart(e) {
    cc.log('touchStart');
    this.isdrawed = false;

    this.isMove = true;
    // 记录起点
    const currentStartPos = this.drawNode.convertToNodeSpaceAR(e.getLocation());
    if (this.pencilNode) {
        this.pencilNode.active = true;
        // 设置鼠标显示为none然后画笔位置跟随代替鼠标
        cc.game.canvas.style.cursor = 'none';
        this.pencilNode.setPosition(currentStartPos);
    }
    this.startPoint = currentStartPos;
},
touchMove(e) {
    const currentMovePos = this.drawNode.convertToNodeSpaceAR(e.getLocation());
    if (this.pencilNode) {
        this.pencilNode.active = true;
        cc.game.canvas.style.cursor = 'none';
        this.pencilNode.setPosition(currentMovePos);
    }
    if (!this.isMove) {
        return;
    }
    this.isdrawed = true;

    this.ctx.clear();
    this.ctx.moveTo(this.startPoint.x, this.startPoint.y);
    this.ctx.lineTo(currentMovePos.x, currentMovePos.y);
    this.lineArr.forEach(item => {
        this.ctx.moveTo(item.start.x, item.start.y);
        this.ctx.lineTo(item.end.x, item.end.y);
    });
    this.ctx.stroke();
},

判断点是否在node范围内

api：node.getBoundingBox().contains(point)；

// node是节点，point是vec2形式的位置对象
isIn(node, point) {
        return node.getBoundingBox().contains(point);
    }