[{"data":1,"prerenderedAt":262},["ShallowReactive",2],{"page-/post/pixel/zzao-club-konva-leafer":3,"surrounding-page":253},{"id":4,"title":5,"author":6,"body":7,"date":235,"description":236,"extension":237,"group":238,"lastmod":239,"meta":240,"navigation":244,"path":245,"rawbody":246,"seo":247,"showTitle":5,"stem":248,"tags":249,"versions":238,"__hash__":252},"content/post/pixel/zzao-club-konva-leafer.md","产品进度：像素风编辑器从Konva到Leafer","zzdaddy",{"type":8,"value":9,"toc":231},"minimark",[10,14,17,24,27,32,35,38,41,44,47,63,74,77,91,96,103,108,115,118,144,147,152,155,160,163,166,169,172,175,178,201,204,208,211,214,217,228],[11,12,13],"p",{},"哈喽，大家好，我是枣把儿。",[11,15,16],{},"前两周我开发了一个像素风图片编辑器，正当我在逐渐完善功能的时候，我老婆过来看了看我做的功能。于是我在12x12的画板上给她画了两下，然后她说，你弄个120x120的给我看看，再写个字。结果我在生成14400个矩形的时候浏览器就卡死了😅，数值调小一些后，勉强可以生成出来，但是拖动和缩放都很卡，我尝试画了两下，断触也很严重，基本是不能用的状态。果然，一个真实的用户随便提的要求，都和自己构思的千差万别。",[11,18,19],{},[20,21],"img",{"alt":22,"src":23},"","https://img.zzao.club/article/202411191435994.gif",[11,25,26],{},"无奈之下，我又重新调研了一些框架，把核心功能从Konva换成了Leafer，Leafer是一个23年6月才发布1.0.0-beta的新框架，但是我使用起来感受还是比较丝滑的，他们自带的图形编辑器样式比起Konva也好不少（很多）",[11,28,29],{},[20,30],{"alt":22,"src":31},"https://img.zzao.club/article/202411191435995.png",[11,33,34],{},"整体的设计也可以用分层的方式，分为ground（背景层）、tree（内容层）、sky（变化层） 三层，当然也可以再自己添加自定义的层。",[11,36,37],{},"对SVG、动画等也支持，可以说再复刻一遍我的这个工具是没啥问题的（开源协议是MIT），而且还有node端可以使用。",[11,39,40],{},"然后就用Leafer把原来的功能都复刻了一遍",[11,42,43],{},"【此处的图丢了】",[11,45,46],{},"后面再加一下动态减少行和列，自己编辑的功能基本就差不多了。 重构之余，我也有了如何自动生成像素图的一些新思路。",[11,48,49,50,54,55,58,59,62],{},"像素格子为",[51,52,53],"code",{},"10px","的话，我导入一个图片为",[51,56,57],{},"200x200","，那我只需要把我的像素画板画成20x20，然后去图片里取色即可。取色也比较简单，依靠Canvas可以直接拿到",[51,60,61],{},"rgba","的色值，而且不用担心png的透明背景，或取了超出图片的颜色。",[11,64,65,66,69,70,73],{},"我先按一个",[51,67,68],{},"10x10","的区域只取一个点，也就是坐标",[51,71,72],{},"(5,5)","所在的像素点，把这个色值填充到像素画板对应的方格上。",[11,75,76],{},"按照这个思路，我实现了一下功能，再稍作调整后，我把自己的头像复刻了出来。",[11,78,79,80,83,84,87,88,90],{},"左侧是我导入的图片(",[51,81,82],{},"297x297",")， 右侧是生成的像素画布(",[51,85,86],{},"30x30",")，每个方格是",[51,89,68],{},"，因为它本身就是像素图，所以正好可以检验我这个思路有没有问题。",[11,92,93],{},[20,94],{"alt":22,"src":95},"https://img.zzao.club/article/202411191435996.png",[11,97,98,99,102],{},"还可以调小参数（",[51,100,101],{},"5x5","）后继续调试",[11,104,105],{},[20,106],{"alt":22,"src":107},"https://img.zzao.club/article/202411191435997.png",[11,109,110,111,114],{},"可以看到，",[51,112,113],{},"秋衣部分","的比例更贴近原图了，但因为我取样次数（只取一次）太少，某些特征部分正好没卡在中间位置，就会有些怪异...",[11,116,117],{},"而且，5x5的时候是 3600个矩形块，在手动涂抹像素画布的时候，Leafer依然不卡。",[11,119,120,121,124,125,128,129,132,133,135,136,139,140,143],{},"转换操作用时",[51,122,123],{},"88ms","， 这个我做了一点优化，本来是先把所有色值计算出来，然后去Leafer里用",[51,126,127],{},"findOne"," 去找到对应的矩形块， 然后填色。我改成了先把色值数组改成",[51,130,131],{},"Map","，然后",[51,134,127],{},"方法替换为",[51,137,138],{},"children","属性，用属性直接拿到所有子元素，避免循环查找，然后给每个子元素",[51,141,142],{},"fill","属性赋值成算出来的色值即可。",[11,145,146],{},"接下来肉眼可见的问题就是调整取样次数了，从一个格子里取一个点，改成按某种规律取多个点，然后判断一下该用哪个，这个还需要我去多多调试。",[11,148,149],{},[20,150],{"alt":22,"src":151},"https://img.zzao.club/article/202411191435998.png",[11,153,154],{},"还有个问题就是图片风格化。 我直接拿我的生活照去生成，看起来基本就是和打了马赛克一个原理。而像素化，我理解的应该是先提取图片的特征，特征里最主要的应该就是轮廓和五官，因为一个像素小人，怎么也得有鼻子有眼的，才能看着是一个小人。而有些线条类的图片，他的黑色或其他颜色的描边，对应到像素小人上就是一圈深色的色块把自己包围起来，就类似我上边的头像图片。",[11,156,157],{},[20,158],{"alt":22,"src":159},"https://img.zzao.club/article/202411191435999.png",[11,161,162],{},"想到这里，我对我大学完全没有学高数感到很后悔，总觉得有个算法会直接解决我的问题，但我又不知道是什么，所以我只能先粗糙的实现这个“算法”，如果有大佬恰好看到，恰好知道的话，恳请评论区指点一下我orz。",[11,164,165],{},"想到上边，我脑子突然脑补到了我爸妈看到上边这句话，会对我说：\"你看我就说xxxx吧，当初不好好学，现在后悔了，你要是xxxx，你现在xxxx\"。",[11,167,168],{},"我觉得我能产生这个想法，实在是太悲哀了，像巴浦洛夫的狗一样。我无法和自己的原生家庭倾诉，因为他们总是不去思考，只是习惯性的否定和消极。",[11,170,171],{},"同时，我在30岁的时候还能焕发起要远远大于22岁时候的技术热情，另一半的治愈效果可想而知。所以不要排斥谈恋爱、结婚，如果合适，这对你真的很有用，也许你排斥的只是双方原生家庭可能会隐隐带来的问题。",[11,173,174],{},"当然我现在说这些话相当的心平气和，因为我自己认知也在不断地突破，也有了自己的家庭，没有必要故步自封。让自己不断努力，也是争取让自己的孩子拥有更高的眼界，看事情看的更清晰。",[11,176,177],{},"ok，回到正题。 接下来准备完善的两点：",[179,180,181,185],"ol",{},[182,183,184],"li",{},"增加取样频率，做成可配置的，观察一下最佳数量",[182,186,187,188],{},"看看自己能不能先风格化图片。\n",[179,189,190,193],{},[182,191,192],{},"思路就是，有多个色值都是属于红色，那就当成一种颜色处理。这样应该可以把鼻孔、眼睛区分出来",[182,194,195,196,200],{},"深色做一下特殊处理，有些描边画出来的图，深色的优先级大于其他颜色，比如取色五个",[197,198,199],"span",{}," 黄，这黄，那黄，黑，白"," 黑色权重高一些，因为这说不定是个眼睛",[11,202,203],{},"另外，个人网站支付这块我也做了一些调研，有一些第三方平台可以接入。等后续用到的话再来和大家汇报一下。",[205,206,207],"h2",{"id":207},"小结",[11,209,210],{},"这就是本篇文章的全部内容了，目前后端部分已经打通，也开发了一些接口，后续我准备快速把像素厂的前端迭代一下，按照正经的产品去发展！",[11,212,213],{},"从12.11准备周更2篇到现在是第3周，感觉技术文章受众确实是少一些。以后汇报产品进度的话，我就当闲聊来写了，和一些比较干的技术内容区分开。等到这个产品正式v1.0.0版本，我再来把整个流程的感悟做一下总结。",[11,215,216],{},"做产品还是走在写文章前面的，所以接下来我可能会调整一下节奏，把每天的可控时间再重新规划一下比重，产出效率再高一些，也会尝试用图文的形式去更新自己的进度~",[11,218,219,220,227],{},"有任何问题也可以在公众号：",[221,222,226],"a",{"href":223,"rel":224},"https://mp.weixin.qq.com/s/A8wHxE5Q2jl6Su_7QA6f-A",[225],"nofollow","早早集市"," 找到我。",[11,229,230],{},"感谢你的阅读，我是枣把儿~",{"title":22,"searchDepth":232,"depth":232,"links":233},2,[234],{"id":207,"depth":232,"text":207},"2023-12-28T00:00:00.000Z","leafer初体验","md",null,"2025-02-12T00:00:00.000Z",{"category":241,"published":242,"date created":243},"技术","2023-12-11","2023-12-28",true,"/post/pixel/zzao-club-konva-leafer","---\ntitle: 产品进度：像素风编辑器从Konva到Leafer\ndescription: leafer初体验\nauthor: zzdaddy\ntags: [\"Vue3\", \"Leafer\"]\ncategory: 技术\npublished: 2023-12-11\ndate created: 2023-12-28\nlastmod: 2025-02-12\ndate: 2023-12-28\nshowTitle: 产品进度：像素风编辑器从Konva到Leafer\n---\n哈喽，大家好，我是枣把儿。\n\n前两周我开发了一个像素风图片编辑器，正当我在逐渐完善功能的时候，我老婆过来看了看我做的功能。于是我在12x12的画板上给她画了两下，然后她说，你弄个120x120的给我看看，再写个字。结果我在生成14400个矩形的时候浏览器就卡死了😅，数值调小一些后，勉强可以生成出来，但是拖动和缩放都很卡，我尝试画了两下，断触也很严重，基本是不能用的状态。果然，一个真实的用户随便提的要求，都和自己构思的千差万别。\n\n![](https://img.zzao.club/article/202411191435994.gif)\n\n无奈之下，我又重新调研了一些框架，把核心功能从Konva换成了Leafer，Leafer是一个23年6月才发布1.0.0-beta的新框架，但是我使用起来感受还是比较丝滑的，他们自带的图形编辑器样式比起Konva也好不少（很多）\n\n![](https://img.zzao.club/article/202411191435995.png)\n\n整体的设计也可以用分层的方式，分为ground（背景层）、tree（内容层）、sky（变化层） 三层，当然也可以再自己添加自定义的层。\n\n对SVG、动画等也支持，可以说再复刻一遍我的这个工具是没啥问题的（开源协议是MIT），而且还有node端可以使用。\n\n然后就用Leafer把原来的功能都复刻了一遍\n\n【此处的图丢了】\n\n后面再加一下动态减少行和列，自己编辑的功能基本就差不多了。 重构之余，我也有了如何自动生成像素图的一些新思路。\n\n像素格子为`10px`的话，我导入一个图片为`200x200`，那我只需要把我的像素画板画成20x20，然后去图片里取色即可。取色也比较简单，依靠Canvas可以直接拿到`rgba`的色值，而且不用担心png的透明背景，或取了超出图片的颜色。\n\n我先按一个`10x10`的区域只取一个点，也就是坐标`(5,5)`所在的像素点，把这个色值填充到像素画板对应的方格上。\n\n按照这个思路，我实现了一下功能，再稍作调整后，我把自己的头像复刻了出来。\n\n左侧是我导入的图片(`297x297`)， 右侧是生成的像素画布(`30x30`)，每个方格是`10x10`，因为它本身就是像素图，所以正好可以检验我这个思路有没有问题。\n\n![](https://img.zzao.club/article/202411191435996.png)\n\n还可以调小参数（`5x5`）后继续调试\n\n![](https://img.zzao.club/article/202411191435997.png)\n\n可以看到，`秋衣部分`的比例更贴近原图了，但因为我取样次数（只取一次）太少，某些特征部分正好没卡在中间位置，就会有些怪异...\n\n而且，5x5的时候是 3600个矩形块，在手动涂抹像素画布的时候，Leafer依然不卡。\n\n转换操作用时`88ms`， 这个我做了一点优化，本来是先把所有色值计算出来，然后去Leafer里用`findOne` 去找到对应的矩形块， 然后填色。我改成了先把色值数组改成`Map`，然后`findOne`方法替换为`children`属性，用属性直接拿到所有子元素，避免循环查找，然后给每个子元素`fill`属性赋值成算出来的色值即可。\n\n接下来肉眼可见的问题就是调整取样次数了，从一个格子里取一个点，改成按某种规律取多个点，然后判断一下该用哪个，这个还需要我去多多调试。\n\n![](https://img.zzao.club/article/202411191435998.png)\n\n还有个问题就是图片风格化。 我直接拿我的生活照去生成，看起来基本就是和打了马赛克一个原理。而像素化，我理解的应该是先提取图片的特征，特征里最主要的应该就是轮廓和五官，因为一个像素小人，怎么也得有鼻子有眼的，才能看着是一个小人。而有些线条类的图片，他的黑色或其他颜色的描边，对应到像素小人上就是一圈深色的色块把自己包围起来，就类似我上边的头像图片。\n\n![](https://img.zzao.club/article/202411191435999.png)\n\n想到这里，我对我大学完全没有学高数感到很后悔，总觉得有个算法会直接解决我的问题，但我又不知道是什么，所以我只能先粗糙的实现这个“算法”，如果有大佬恰好看到，恰好知道的话，恳请评论区指点一下我orz。\n\n想到上边，我脑子突然脑补到了我爸妈看到上边这句话，会对我说：\"你看我就说xxxx吧，当初不好好学，现在后悔了，你要是xxxx，你现在xxxx\"。\n\n我觉得我能产生这个想法，实在是太悲哀了，像巴浦洛夫的狗一样。我无法和自己的原生家庭倾诉，因为他们总是不去思考，只是习惯性的否定和消极。\n\n同时，我在30岁的时候还能焕发起要远远大于22岁时候的技术热情，另一半的治愈效果可想而知。所以不要排斥谈恋爱、结婚，如果合适，这对你真的很有用，也许你排斥的只是双方原生家庭可能会隐隐带来的问题。\n\n当然我现在说这些话相当的心平气和，因为我自己认知也在不断地突破，也有了自己的家庭，没有必要故步自封。让自己不断努力，也是争取让自己的孩子拥有更高的眼界，看事情看的更清晰。\n\nok，回到正题。 接下来准备完善的两点：\n\n1. 增加取样频率，做成可配置的，观察一下最佳数量\n2. 看看自己能不能先风格化图片。\n\t1. 思路就是，有多个色值都是属于红色，那就当成一种颜色处理。这样应该可以把鼻孔、眼睛区分出来\n\t2. 深色做一下特殊处理，有些描边画出来的图，深色的优先级大于其他颜色，比如取色五个[ 黄，这黄，那黄，黑，白] 黑色权重高一些，因为这说不定是个眼睛\n\n另外，个人网站支付这块我也做了一些调研，有一些第三方平台可以接入。等后续用到的话再来和大家汇报一下。\n\n## 小结\n\n这就是本篇文章的全部内容了，目前后端部分已经打通，也开发了一些接口，后续我准备快速把像素厂的前端迭代一下，按照正经的产品去发展！\n\n从12.11准备周更2篇到现在是第3周，感觉技术文章受众确实是少一些。以后汇报产品进度的话，我就当闲聊来写了，和一些比较干的技术内容区分开。等到这个产品正式v1.0.0版本，我再来把整个流程的感悟做一下总结。\n\n做产品还是走在写文章前面的，所以接下来我可能会调整一下节奏，把每天的可控时间再重新规划一下比重，产出效率再高一些，也会尝试用图文的形式去更新自己的进度~\n\n有任何问题也可以在公众号：[早早集市](https://mp.weixin.qq.com/s/A8wHxE5Q2jl6Su_7QA6f-A) 找到我。\n\n感谢你的阅读，我是枣把儿~\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"title":5,"description":236},"post/pixel/zzao-club-konva-leafer",[250,251],"Vue3","Leafer","4qLjs2t0acszJOPdevwSDKa-MHMFsTget153RkbKyQ4",[254,258],{"title":255,"path":256,"stem":257},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":259,"path":260,"stem":261},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005087037]