CocosCreator中的Graphics绘制组件

Graphics 组件提供了一系列绘画接口，可以在项目中画点、线、面等，这次分享的是绘制某一个节点的移动路径，效果图如下：

 首先也是对该组件里面的东西做部分介绍：

 注意绘制线的宽度以及颜色，其他的设置可以按照自己的需求进行改变，比如两条线相交时的处理，线绘制结束时的处理等。

用到的主要的方法：

首先获取到该组件：

按照自己的节点树去获取，比如我的这个是：

this.graphicsComp = this.node.getChildByName("Dialog").getChildByName("Line").getComponent(cc.Graphics);

 获取到绘制的初始点，即把路径移动到画布中的指定点，不创建线条（MoveTo）

添加一个新点，然后在画布中创建从该点到最后指定点的线条(LineTo)

this.graphicsComp.moveTo(20, 100);
this.graphicsComp.lineTo(20, 20);
this.graphicsComp.lineTo(70, 20);

最后就是绘制：

this.graphicsComp.stroke();

 这个是绘制已定义的路径，还有一个fill()，是填充当前绘图（路径），注意二者的使用区别。

如果不需要这个路径了，使用clear()清除即可。

效果图部分代码：

this.graphicsComp = this.node.getChildByName("Dialog").getChildByName("Line").getComponent(cc.Graphics);
this.graphicsComp.clear();
this.graphicsComp.moveTo(this.CarManagerComp.mainCar.node.x,this.CarManagerComp.mainCar.node.y);

 在update生命周期中处理lineTo()

this.graphicsComp.lineTo(this.CarManagerComp.mainCar.node.x,this.CarManagerComp.mainCar.node.y);
this.graphicsComp.stroke();

（注：this.CarManagerComp.mainCar.node是移动的节点，可自行处理） 

这样就可以在节点移动的时候将节点移动路径绘制出来。