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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180531G2358L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券