基于 2.2.2 的手绘板功能

最近在把 1.8.0 的项目升级到 2.2.2。在 1.8.0 上基于 cc.RenderTexture 实现了手写板的功能,然后在 2.2.2 上,因为众所周知的原因,这个方法行不通了,于是只好去寻求其他的解决方案。

手绘板核心功能就是两块:画图和擦图。画图还好,利用 graphics 也可以实现(存在性能问题,画久了之后 FPS 急速降低),但是擦图就没那么容易了。

利用 mask 可以实现擦图效果,但是也就仅限于刮刮乐这种一次性擦除的需求。因为利用 mask 擦除之后的区域内,是没办法再去画其他内容的(当然利用很多个 mask 硬要实现,也是可以的,但是其中的酸爽,谁试谁知道)。

试过很多方法都无效之后,仔细读了下 ccTexture 的源码,发现了两个方法:initWithData 和 update。前者是设置一个 Uint8Array 数据,后者是更新纹理信息。看过这两个方法的具体实现逻辑之后,一个大概的实现思路就有了:可以实时获取到画笔路径的 rgba 数据,然后转化为Uint8Array,最后赋值给 ccTexture,并刷新。利用这种方案,基本上没有性能损耗,比 graphics 强太多。(在此要特别感谢下@黄豆豆,在论坛里提供了一个把画笔路径 rgba 转化为 Uint8Array 的源码,封装的挺好,我就直接拿来用了,此是传送门 【源码分享】一个可自由绘图、擦除的脚本

手绘板的具体demo 见附件,里面实现了擦除和绘制两个功能。因为是摘出来的缘故,代码有些乱,各位将就着看吧。
TestDraw.zip (789.4 KB)

另外说一句题外话,1.8.0 升级到 2.2.2 坑非常之多,各位如果有升级想法的请谨慎考虑

7赞

RenderTexture 咋啦

window 模拟器不能跑吗?

1.8和2.2关于Rendertexture的实现方式完全不同了。

在真机和web上是可以跑的。如果有问题的话,那需要把那段翻转代码注释,然后把整个node的scaleY设置为-1。如果不设置,那画出来会是反的。

mark…

其实用一个mask 和一个 graphics 也是可以实现的,我刚好再做一个类似的功能, 使用一个mask 下面放一个 graphics 实现的,目前已经完成了 反复擦写,后退 恢复 的功能, 正在做 选择片段的功能,不过要另外启用一个Camera 每次画完以后对 mask 节点做 render。 render 处理出来的图片真机上会有少量的黑边,不过我这个是针对web 上用的 所有问题不大,性能方面 目前来看 还算不错,大家也可以考虑这个思路。感觉楼主的思路更好,后期用这种方式优化看看。

嗯,用 camera 截图的方式也是可以实现的,因为我项目中还会存在类似贴纸画图的功能,所以没有考虑 camera 截图。 btw,你在一直 touchMove 的时候,会卡顿吗?

是 touchend 以后render ,不卡的

不错不错!解决了疑难杂症

不是,我是指的在 move 的过程中 graphics 的 line 操作

不卡的,这是正常操作,基本画图功能就是在move里面操作的,及时反应出来轨迹,

您好,请问render之后再加载graphics的节点锯齿严重吗?

比较严重,不过好像2.4.0版本会优化

2.0还是2.1以上的版本,添加了3d功能,渲染方式也改了,精灵组件下也有一个材质属性,简单说就是,把2d节点也当作3d模型来看待了,就像是一个与屏幕平行的平面

老哥,不规则图形的画板 咋操作呐

反复擦写是咋实现的呀

楼主你好,使用2.3.3版本引擎的时候出现了一个问题


以及

是2.4版本的渲染又变了吗?
这种报错貌似影响到了引擎的导入导出功能,可以分享一下解决办法吗?

这个升级到2.3.0之后无法跑起来了:joy:

简单修改即可了