Graphic！从绘制一条线开始

对于一个刚接触creator不到3个月的新手来讲，学习一个新的类别，无异于去发掘新大陆！

带着想绘制一条线的愿望，开始接触了Graphic这个类。

以下内容将阐述三个事项：

1、cc.graphic这个组件不是哪里都可挂的；

2、使用cc.graphic能画出一条线需要至少调用的方法；

3、介绍一下相关的一些属性和函数；

一、cc.graphic这个组件不是哪里都可挂的

第一挂：

进入creator尝试挂下cc.graphic这个组件；

若尝试往cavans上挂一个cc.graphic组件，那么将会报错，报错如下图：

根据报错我们可以清楚的知道，并不支持往cavans上直接挂组件cc.graphic，我新接触的时候到这里一脸懵逼，当时心里想，竟然还有不支持往画布上面挂组件，这让我重新思考了下组件和节点的关系。

第二挂：

既然不让直接挂，那么我顺着思路，创建了个白色的精灵作为背景;节点的层级关系如下图：

这个名字叫bg的节点就是白色精灵，我尝试往bg上面挂载组件cc.graphic，提示如下:

提示很给力，由于bg上面已经挂载了cc.Sprite组件(上图红框标记处)，它不支持相同类型或者继承自同一类型的组件再次挂载。

有了这个提示我们可以推断出，空节点应该可以，上面没有组件。

第三挂：

所以，我们来创建一个空节点，我命名为graphic，果然，可以成功挂载cc.Graphic组件。

二、使用cc.graphic能画出一条线需要至少调用的方法；

这个坑踩的腿痛，你查看官方文档关于cc.Graphic这个类的方法，会有lineTo(x,y)；于是我天真的以为，调用这个方法就可以划出一条默认的线来，然而，事情并没有那么简单。你要了解两点才能确定一条直线啊！

对调用了画不出来。单独只调用这个lineTo的方法绝对画不出来。我去查资料，看了下cocos论坛关于画线的讨论，代码是这样：

let ctx

=

this.moveArea.getChildByName('runline').getComponent(cc.Graphics);

// 画横线

for(var i = 80; i

{

ctx.moveTo(0, i);

ctx.lineTo(this.moveArea.width, i);

}

ctx.stroke();

所以，学习的根本是模仿，我模仿着写了段代码：

this.graphics = gnode.getComponent(cc.Graphics);

for（var i = 0; i

{

}

运行下，哈哈，毛线都没有，白了一屏~

新接触，一脸懵逼，这里不卖关子，直接来介绍下这几个函数是用来干嘛的你就清楚为什么没东西了。

前两行获取组件就不讲了，不要忘记写，友情提醒下，必须是cc.Graphic才能画线，调用lineto等一系列提供给graphic的方法。

//画线的起点

//画线的终点，就是画到哪里

//根据当前的画线样式，绘制当前或已经存在的路径。

说到这里，应该理解上边的代码为啥子不出来线了，这里不多嘴了，留给大家自己思考。如果上述代码执行了，应该出四条线才对。恩。

然后这里友情提示下，画线的时候如果设置起点为(0,0)那么这个是以屏幕中心为原点进行绘制的。所以如果你的起点设置成(0,200)又是横屏展示，很有可能把线画到屏幕外面，导致显示不出来线，此坑已跳过，切勿前赴后继~

以上三个方法调用了，至少就可以画出一条线了。

三、介绍一下相关的一些属性和函数

自己又设置了下关于线的一些属性，这里直接上代码加注释；

//绘制线的颜色

//线段末端属性,带圆角

//线段拐角(连接处)属性

//线的宽度

//cc.Graphics.LineCap.ROUND

//cc.Graphics.LineCap.SQUARE

circle(cx,cy,r); //绘制圆，圆心和半径

//绘制二次贝赛尔曲线路径

quadraticCurveTo(cx,cy,x,y); //cx,cy要经过的第一个点;x,y曲线到达的终点

//绘制三次贝赛尔曲线路径

bezierCurveTo(c1x,c1y,c2x,c2y,x,y) //传进去这个曲线要经过的三个点。

以上是本天才的画线踩坑之旅！

附1：官方demo的graphics代码。

https://github.com/cocos-creator/example-cases/tree/31a998df91bf6506a145f1452f2669ee1cdaa154/assets/cases/graphics

附2：graphics类的官方文档

http://docs.cocos.com/creator/api/zh/classes/Graphics.html?q=graphic#beziercurveto

依旧想不清楚那段代码为啥画不出线的同学，回复我“画线”，得到答案，关注我，一起学习和思考吧！

愿我今日之踩坑，明日能填补你的路~