产品进度：像素风编辑器从Konva到Leafer

哈喽，大家好，我是枣把儿。

前两周我开发了一个像素风图片编辑器，正当我在逐渐完善功能的时候，我老婆过来看了看我做的功能。于是我在12x12的画板上给她画了两下，然后她说，你弄个120x120的给我看看，再写个字。结果我在生成14400个矩形的时候浏览器就卡死了😅，数值调小一些后，勉强可以生成出来，但是拖动和缩放都很卡，我尝试画了两下，断触也很严重，基本是不能用的状态。果然，一个真实的用户随便提的要求，都和自己构思的千差万别。

无奈之下，我又重新调研了一些框架，把核心功能从Konva换成了Leafer，Leafer是一个23年6月才发布1.0.0-beta的新框架，但是我使用起来感受还是比较丝滑的，他们自带的图形编辑器样式比起Konva也好不少（很多）

整体的设计也可以用分层的方式，分为ground（背景层）、tree（内容层）、sky（变化层） 三层，当然也可以再自己添加自定义的层。

对SVG、动画等也支持，可以说再复刻一遍我的这个工具是没啥问题的（开源协议是MIT），而且还有node端可以使用。

然后就用Leafer把原来的功能都复刻了一遍

后面再加一下动态减少行和列，自己编辑的功能基本就差不多了。 重构之余，我也有了如何自动生成像素图的一些新思路。

像素格子为10px的话，我导入一个图片为200x200，那我只需要把我的像素画板画成20x20，然后去图片里取色即可。取色也比较简单，依靠Canvas可以直接拿到rgba的色值，而且不用担心png的透明背景，或取了超出图片的颜色。

我先按一个10x10的区域只取一个点，也就是坐标(5,5)所在的像素点，把这个色值填充到像素画板对应的方格上。

按照这个思路，我实现了一下功能，再稍作调整后，我把自己的头像复刻了出来。

左侧是我导入的图片(297x297)， 右侧是生成的像素画布(30x30)，每个方格是10x10，因为它本身就是像素图，所以正好可以检验我这个思路有没有问题。

还可以调小参数（5x5）后继续调试

可以看到，秋衣部分的比例更贴近原图了，但因为我取样次数（只取一次）太少，某些特征部分正好没卡在中间位置，就会有些怪异…

而且，5x5的时候是 3600个矩形块，在手动涂抹像素画布的时候，Leafer依然不卡。

转换操作用时88ms， 这个我做了一点优化，本来是先把所有色值计算出来，然后去Leafer里用findOne 去找到对应的矩形块， 然后填色。我改成了先把色值数组改成Map，然后findOne方法替换为children属性，用属性直接拿到所有子元素，避免循环查找，然后给每个子元素fill属性赋值成算出来的色值即可。

接下来肉眼可见的问题就是调整取样次数了，从一个格子里取一个点，改成按某种规律取多个点，然后判断一下该用哪个，这个还需要我去多多调试。

还有个问题就是图片风格化。 我直接拿我的生活照去生成，看起来基本就是和打了马赛克一个原理。而像素化，我理解的应该是先提取图片的特征，特征里最主要的应该就是轮廓和五官，因为一个像素小人，怎么也得有鼻子有眼的，才能看着是一个小人。而有些线条类的图片，他的黑色或其他颜色的描边，对应到像素小人上就是一圈深色的色块把自己包围起来，就类似我上边的头像图片。

想到这里，我对我大学完全没有学高数感到很后悔，总觉得有个算法会直接解决我的问题，但我又不知道是什么，所以我只能先粗糙的实现这个“算法”，如果有大佬恰好看到，恰好知道的话，恳请评论区指点一下我orz。

想到上边，我脑子突然脑补到了我爸妈看到上边这句话，会对我说：“你看我就说xxxx吧，当初不好好学，现在后悔了，你要是xxxx，你现在xxxx”。

我觉得我能产生这个想法，实在是太悲哀了，像巴浦洛夫的狗一样。我无法和自己的原生家庭倾诉，因为他们总是不去思考，只是习惯性的否定和消极。

同时，我在30岁的时候还能焕发起要远远大于22岁时候的技术热情，另一半的治愈效果可想而知。所以不要排斥谈恋爱、结婚，如果合适，这对你真的很有用，也许你排斥的只是双方原生家庭可能会隐隐带来的问题。

当然我现在说这些话相当的心平气和，因为我自己认知也在不断地突破，也有了自己的家庭，没有必要故步自封。让自己不断努力，也是争取让自己的孩子拥有更高的眼界，看事情看的更清晰。

ok，回到正题。 接下来准备完善的两点：

1. 增加取样频率，做成可配置的，观察一下最佳数量
2. 看看自己能不能先风格化图片。
   1. 思路就是，有多个色值都是属于红色，那就当成一种颜色处理。这样应该可以把鼻孔、眼睛区分出来
   2. 深色做一下特殊处理，有些描边画出来的图，深色的优先级大于其他颜色，比如取色五个[ 黄，这黄，那黄，黑，白] 黑色权重高一些，因为这说不定是个眼睛

另外，个人网站支付这块我也做了一些调研，有一些第三方平台可以接入。等后续用到的话再来和大家汇报一下。

小结

这就是本篇文章的全部内容了，目前后端部分已经打通，也开发了一些接口，后续我准备快速把像素厂的前端迭代一下，按照正经的产品去发展！

从12.11准备周更2篇到现在是第3周，感觉技术文章受众确实是少一些。以后汇报产品进度的话，我就当闲聊来写了，和一些比较干的技术内容区分开。等到这个产品正式v1.0.0版本，我再来把整个流程的感悟做一下总结。

做产品还是走在写文章前面的，所以接下来我可能会调整一下节奏，把每天的可控时间再重新规划一下比重，产出效率再高一些，也会尝试用图文的形式去更新自己的进度~

有任何问题也可以在公众号：早早集市 找到我。

感谢你的阅读，我是枣把儿~