油漆桶填色效果怎么实现啊,找了两天都找不到资源

请问下

油漆桶填色效果怎么实现啊,找了两天都找不到资源,这好像很常规的功能啊

看微信上也很多这类游戏

就是提供线框图,点击空白区域填色功能

1赞

有大神吗?

官方能看看嘛??

为什么现在 社区都没活跃的了,有人能看看嘛?

1赞

graphics

graphics 没有啊,都看了一遍了,只有填充自己绘制的图形

多张部位图片叠加组合成一个整体,点到哪个部位就填充哪个部位的颜色。

有很多图啊,这样有点太麻烦了。。

graphics svg

我给一个思路, 我自己没有实现过.
CCTexture2D的initWithData是使用一个存储在 Unit8Array 中的图像数据初始化数据.
你自己肯定可以拿到图片的Unit8数据.

你让美术出图的时候, 就给一个排除掉油漆桶颜色固定的颜色数组画.
用户点击, 取出点击部分的颜色值, 遍历Unit8数据, 把颜色值用油漆桶颜色替换.
再重新生成图.

至于美术已经填过色的图怎么去掉色显示给用户, 自己在shader里面做过滤. 因为美术用的色是固定的, 你排除掉就好.

SVG,这手伸的……

1赞

其实同理, Uint8原始数据都不用改, 直接shader替换就行.

有2个问题需要解决 1 图形边缘处理 (用图形遮罩) 2 用什么画 (一点点画的话用graphics,如果是点一下颜色就变 这个就更简单了 改变节点颜色)

这样的话,那需要先 划分每一个区域,每个区域先人工填不同的白色(肉眼分不清)

不分区的话,就不是油漆桶了,是魔术棒效果了

填色游戏 都是 油漆桶效果, 油漆桶效果 只填充当前点击的封闭区域。

如果直接改变节点颜色,那需要每个封闭区域单独抽出来一张图片了。

那样的话太麻烦了每个图都还要分割下

SVG 填色,纯Web版有API,原生的话,要自己撸,我做过填色游戏

结论是:没那么简单,没那么复杂

至于你说的油漆桶填色,抱歉,只能自己实现,不用找了

或者如果你不考虑用SVG这类矢量图,那么还有其他方案

补充一下,手撸的意思:为了保持DC为1,我基本只用了一个Graphics去画图,但是Graphics只提供了极有限的API

因此要实现你的这个功能,你首先要将你的这些 「不规则带孔区域」 转换为 多个贝塞尔曲线+多个直线,等围绕而成的区域(或者其他现有API的组合),然后调用 fill 即可

听起来就超级简单,是不是

不过我相信你可能需要了解一下SVG 1.2版本规范,掌握SVG标签,同时也需要了解一下SVG的填色规则,了解 非零填充 ,奇偶填充,以及其他更多偏算法的知识,比如路径点简化等等,以减少计算量提高性能

关于填色上,我也弄过一篇自己的分享,可以参考一下—— 《SVG 填色算法演进实现

另外一个建议:最好只是参考,不要走我的路,因为这里面我觉得不完美,很多坑

如果你能用现成的svg渲染库并且能解决在你要发布的平台上的兼容问题,那么我建议你这样子做

4赞

谢谢这么详细的回答。

SVG 的方式,人工成本有点高了,需要手动绘制一遍;

算法解决这个问题,目前这个开发阶段有点浪费时间了,可能是最后实在没办法就是专门安排计划了。

还有什么好方法呢?感觉都不容易啊

@cenfee 请问老兄最后实现了吗?

opencv 的floodFill?