Cocos Creator 实现画板和橡皮擦(有背景)
发布网友
发布时间:2022-12-09 17:13
我来回答
共1个回答
热心网友
时间:2023-05-13 02:27
CocosCreatorDrawing
Cocos Creator完成的一个画板
GitHub - Juefeiye/CocosCreatorDrawing: CocosCreator画板 喜欢就star吧!!!
画板最终实现效果
在cocos论坛里面很多关于画板橡皮擦的问题,特别是有背景的橡皮擦问题,都没有什么好的解决方案。
找了很多资料和自己的摸索之后,最后有了这么一个带有完整功能的画板,下面来一步步看怎么实现的吧。
这里使用的是RenderTexture来解决
首先创建好renderTexture,加入到node中来,因为renderTexture是cc的组件,所以我们只能用_sgnode来添加
接着我们在touch事件中去实现绘画功能,这里我使用的是drawNode方式,官方提供的Graphics还未找到橡皮擦方法。
这个时候基本的绘画功能就实现了
这个是本次的重点。这个橡皮擦也是搞得我头破血流的。
其实如果没有背景,直接改成背景色线条就可以当橡皮擦用了,主要是需求要在有背景的情况下可以擦除,那么来探索下吧!
资料翻了不少,只看到H5有canvas的一些接口可以用,可是cocos怎么用到这些接口呢,对应的一些属性怎么取到呢。
不经意间我发现了canvas里面的getContext()和一个globalCompositeOperation属性,这个属性好像是解决h5橡皮擦的关键,那么我在cocos里面能找到这个属性是不是就可以解决橡皮擦问题了。
首先,h5里面是用canvas来绘画的,cocos creator这里用的是renderTexture,那么这2者会不会有什么关联呢。果不其然,我在renderTexture下找到了这2个关键的属性
有了这2个属性之后,我们就可以开始干活了!这里的实现详细可以看 HTML 5 canvas globalCompositeOperation 属性
这里要注意canvas坐标系和cocos的坐标系不一样
到这里就解决了有背景的橡皮擦问题了,我们直接使用最底层的canvas。橡皮擦效果
其实画板里面还有贴纸功能,还带用动效的贴纸,这个功能如果有需要的话再详细解读
GitHub - Juefeiye/CocosCreatorDrawing: CocosCreator画板 喜欢就star吧!!!