[Cocos02] The line drawn by the brush and some APIs

Posted May 25, 20201 min read

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);
    }

Related Posts