Graphics画线异常

  • Creator 版本:v2.0.6

  • 目标平台:Web 和小游戏

用Graphics 画线,当color设置为半透明时,比如:cc.color(0, 0, 0, 200),就会出现某些部分叠加,很难看。如下图:

但直接用html5的canvas画线,是这样的,如下图:

这样的效果才是正常的,我想要的。

请问是CocosCreator 的Graphics的缺陷,还是我用法不正确。
我用Graphics时是这样设置的:

麻烦解答一下,如果是Graphics本身的缺陷,我就不折腾了(花了挺长时间了,没解决)。

demo: Drawing.zip (486.2 KB)

h5版本的demo:drawDemo.zip (1.9 KB)

1赞

明白,我看看这个问题

1赞

谢谢你的及时回复。:grin:

你给我个demo,我在确定下问题

嗯,刚做了一个demo。上传到问题那里了,你有空看看。谢谢!

这个不属于engineBug,你在做这种转角绘图的时候,每次变换的转角坐标的增减需要考虑到lineWidth,

考虑计算之后就正常了,要不然会出现绘图重叠,导致出现异常。

谢谢,不是bug就太好了。

你在做这种转角绘图的时候,每次变换的转角坐标的增减需要考虑到lineWidth。

这句话的意思是:转角绘图时,坐标要另外计算?
能给出代码举例说明一下,你是怎么处理的吗?

还有,你试过一条线交叉重叠的情况吗?比如下图:

交叉重叠地方,正常吗?(正常情况是不会变深色的)。

你是怎么设置Src Blend Factor & Dst Blend Factor的?试了很多种都不行呢。

1赞

画半透明曲线_20190128122317.zip (558.3 KB)

录个视频给你看看。

就算只用两个点来画线,当出现有交叉重合的地方,就会怪怪的。应该是混合模式的问题吧。不知道怎么设置呢?

建议你不用使用lineTo来做,你可以使用circle()、rect()等形状绘制接口,在每个点上绘制一次然后fill(),你可以使用touchmove这个事件来配合测试下。

嗯。谢谢你的回复。
我使用的是quadraticCurveTo来画曲线。今天试了,同样的功能,直接用微信小游戏的canvas,是跟预期的一样的。像这个视频一样:小游戏半透明曲线.zip (279.6 KB)

因为我们要做的功能,是比较复杂的绘画功能。可能还不熟悉graphics混合模式的原因吧,没能达到预期效果。

难道要放弃creator,再写一遍。挺喜欢creator的易用性的。纠结中…

creator的graphics 性能怎么样?能应付复杂的绘画吗? 复杂一点的,超过一万多笔(一万多条线)。

我一条线绘画点数和面积达到一定程度的时候就会报错,很显然是缓存或者说是什么内存啥的不够用……编辑器内。一般好像一条线一百个点,点是用圆来画的,圆面积太大的时候编辑器就报错绘画不出来……

你那种黑乎乎的交错线导致的原因如果没猜错,应该是因为点重合或者挨得太近了,特别对于曲线(比如贝塞尔)计算路径点,只要挨得很近很近的两个点参与曲线计算,曲线必然会出现不可预料的黑线,就跟你那个差不多

嗯,你说的对。挨太近了原因之一;还有一个应该是Src Blend Factor 、Dst Blend Factor混合模式的问题(我不太懂)。因为同样的代码实现方式,在html5的canvas,小程序的canvas,还有小游戏的canvas都能画出漂亮的曲线。
正在考虑要不要直接用小游戏的canvas去重写整个项目。因为我的项目最关键的就是画板。

我相信也有不少开发者用creator做了几款你画我猜之之类的画线游戏,问题不大。
如果已经使用微信小游戏的API直接实现了功能,可以直接使用微信小游戏API。
如果对creator的使用还想继续探索,可以再试试。

creator还是很好用的。
我看了线上的几款你画我猜之类的游戏,都不算复杂的绘画功能。
甚至很多都不用考虑线条是否平滑。
我们做的可能严格来说不算游戏吧,只是要用到腾讯的视频广告,所以目前先用小游戏的方式去实现。

你可能忽略了一个重要的因素,模拟器或者说native环境,调用的是c++版本的cocos,而网页h5、微信,调用的是js版的,底层是web那一些,所以结果不同,很正常。

这个有可能。
我觉得也可能是因为cocos creator 默认用的webgl渲染,我用小游戏wx.createCanvas() 是2d,所以两个有差异。wx.createCanvas() ,canvas.getContext(‘2d’) 基本和预期一样。

https://blog.csdn.net/wangrongm2009/article/details/96972927
你画我猜实现橡皮擦,绘画graphics,