CocosCreator:画线

Cocos Creator有一个绘制组件graphics，该组件提供了画点、线、圆等接口。最开始是有一个动态的在两个点之间画线的需求。以下是错误思维：于是在代码中动态创建了一个节点，暂且叫做line的节点，给它添加了父节点后又addcomponent了一个graphics组件，然后按照creator官方提供的画线方法实现了一下，运行预览的结果就是什么都没有。懒的检测啥的，加上有其他的事情要做，原因以后再整理。下面直接附上以实现的画线方法。

画直线：在编辑器上添加一个graphics节点

在代码中获取节点lineNode,画线drawLine

drawLine(startPos:Vec3,tarPos:Vec3){

        console.log("画线>>>>");

        let ctx = this.lineNode.getComponent(Graphics);

        ctx.lineWidth = 20;

        ctx.strokeColor = Color.GREEN;

        ctx.moveTo(startPos.x, startPos.y);

        ctx.lineTo(tarPos.x, tarPos.y);

        ctx.stroke();

        //如果想要清除历史的线, 可以执行clear方法

        // ctx.clear();

}

下面也列一下测试时实现的画点和画曲线的方法：

画点：

ctx.circle(100,100,20);

ctx.fillColor = Color.YELLOW;

ctx.fill();

在（100，100）处画一个半径20像素的黄点并填充，同样的清除还是调用clear方法

画曲线：

ctx.lineWidth = 20;

ctx.strokeColor = Color.GREEN;

ctx.moveTo(startPos.x, startPos.y);

let midpos1 = v2(x,y);//控制点

let midpos2 = v2(x1,y1);//控制点

ctx.bezierCurveTo(midpos1.x,midpos1.y,midpos2.x,midpos2.y,tarPos.x,tarPos.y);

ctx.stroke();

和画直线的区别其实就是加了两个控制点并调用贝塞尔曲线的画线接口，然后绘制就行了，具体控制点怎么设置就看实际需求