[{"data":1,"prerenderedAt":876},["ShallowReactive",2],{"page-/post/pixel/ikun-pixeled-pic-pro":3,"surrounding-page":867},{"id":4,"title":5,"author":6,"body":7,"date":853,"description":854,"extension":855,"group":856,"lastmod":857,"meta":858,"navigation":353,"path":860,"rawbody":861,"seo":862,"showTitle":5,"stem":863,"tags":864,"versions":856,"__hash__":866},"content/post/pixel/ikun-pixeled-pic-pro.md","iKun集合！Pixeled Pic Pro 前端迭代篇（一）","枣把儿",{"type":8,"value":9,"toc":847},"minimark",[10,14,34,37,40,45,52,55,63,66,69,74,80,83,87,92,95,98,104,110,113,116,119,122,130,133,136,145,148,153,314,324,384,394,399,404,758,761,770,773,776,782,785,788,791,796,803,806,809,822,825,832,840,843],[11,12,13],"h2",{"id":13},"引言",[15,16,17,18,25,26,33],"p",{},"上篇《",[19,20,24],"a",{"href":21,"rel":22},"https://juejin.cn/post/7311697095505149990",[23],"nofollow","Vue3项目实战：像素风LOGO编辑器 Pixeled Pic Pro","》，我完成了V0.6.0版本，实现了基础功能。本来打算先写完后续的Nest篇、部署篇、总结篇，途中再自己默默更新到V1.0.0。但是写着写着，发现了些刺",[27,28,29],"em",{},[30,31,32],"strong",{},"激","的玩法，导致打乱了我的计划。",[15,35,36],{},"真是计划赶不上变化啊，无奈之下我决定加更一篇，来分享一下我又新加了什么有趣的功能！",[11,38,39],{"id":39},"功能一览",[41,42,44],"h4",{"id":43},"v070","V0.7.0",[46,47,48],"ol",{},[49,50,51],"li",{},"自定义行x列生成",[15,53,54],{},"本来是v0.6.0的功能，偷懒了，放到了这个版本补上。",[15,56,57,62],{},[58,59],"img",{"alt":60,"src":61},"","https://img.zzao.club/article/202411191438063.png","\n2.  Toast组件",[15,64,65],{},"原因：Konva生成过多矩形后，页面会有明显卡段，所以需要一个提示组件，提醒一下用户。",[15,67,68],{},"基于daisyUI封装了一下Toast小组件，目前只支持同时显示一条消息，重复的消息会重复利用这个元素",[15,70,71],{},[58,72],{"alt":60,"src":73},"https://img.zzao.club/article/202411191438064.png",[46,75,77],{"start":76},3,[49,78,79],{},"Tab键切换颜色调整为空格键",[15,81,82],{},"因为Tab键和浏览器默认行为有冲突，页面有表单里元素，会自动focus，使用起来不太方便，所以调整为空格键了",[41,84,86],{"id":85},"v080","V0.8.0",[15,88,89],{},[30,90,91],{},"预设功能！",[15,93,94],{},"我在自己把玩自己的网站的时候，发现自己写死的几个颜色，有时候不够用，或者说我也不知道用什么颜色比较好。",[15,96,97],{},"于是我就想要不我用吸取颜色的软件，找几个高大上的图，吸几组配色，再放上去够大家选择。于是我寻思先在电脑里开始找几个图吧。",[15,99,100,103],{},[58,101],{"alt":60,"src":102},"https://img.zzao.club/article/202411191438065.png","\n很突然，我就发现了iKun的图片（侵删），马上就来了兴致，先画个iKun玩玩再说！\n画完了之后，导出，直接发到\"回家吃饭\"的群里！",[15,105,106,107],{},"果然啊，大家对我的绘画水平表示了强烈的认可。\n",[58,108],{"alt":60,"src":109},"https://img.zzao.club/article/202411191438066.png",[15,111,112],{},"我仔细对比一看啊，确实，除了背带略长，可以说是很还原了~",[15,114,115],{},"我又一寻思，这么好玩的功能，我发给别人，别人感兴趣了，他自己怎么再画出来呢？",[15,117,118],{},"他要去吸取颜色，目测一个格子的长宽数量，然后在网站上设置好，再开始画。 显然是太麻烦了，没等开始画人就关闭网站了！",[15,120,121],{},"从这一点我想到了两个问题：",[46,123,124,127],{},[49,125,126],{},"从吸取颜色到配置数量，太麻烦，太模糊。不像我这样擅长画画的话，很难一步到位",[49,128,129],{},"画着画着，格子不够了怎么办",[15,131,132],{},"于是我灵机一动，我把我现在的配置保存成一个“预设”，别人想用的时候我就发给他。",[15,134,135],{},"能用文本传播，很自然就能想到用json，而且用剪贴板的话，不懂代码的人也不必关心复制的是个什么玩意。用的时候再从一个入口粘贴进去，我这边自动给他加上，这样就完成了和上一个创作者相同的前置条件！",[15,137,138,139,144],{},"不擅长画画也是个好事，不光好的画受欢迎，只要",[27,140,141],{},[30,142,143],{},"你","的画够抽象，相信喜欢的人也是非常多的。因为互联网的好处就是你可以从中找到任何奇怪爱好、奇怪角度的同行者。",[15,146,147],{},"为了解决第一个问题，我梳理了以下功能点， 然后趁着热乎劲儿火速把他们实现：",[46,149,150],{},[49,151,152],{},"预设的内容为：方格大小和数量配置，颜色组，名称",[154,155,159],"pre",{"className":156,"code":157,"language":158,"meta":60,"style":60},"language-json shiki shiki-themes github-light","{\n    name: \"IKUN\",\n    cellConfig: {\n      size: 5,\n      border: 1,\n      xCount: 15,\n      yCount: 24,\n    },\n    // 从kunkun身上吸取的几个颜色\n    colors: [\"#564A54\", \"#DDDBED\", \"#1C1A25\", \"#DDB3C0\", \"#908B96\", \"#CC7A76\", \"#ffffff\"]\n}\n","json",[160,161,162,171,188,196,210,223,236,249,255,262,308],"code",{"__ignoreMap":60},[163,164,167],"span",{"class":165,"line":166},"line",1,[163,168,170],{"class":169},"sgsFI","{\n",[163,172,174,178,181,185],{"class":165,"line":173},2,[163,175,177],{"class":176},"sB1qb","    name",[163,179,180],{"class":169},": ",[163,182,184],{"class":183},"sYBdl","\"IKUN\"",[163,186,187],{"class":169},",\n",[163,189,190,193],{"class":165,"line":76},[163,191,192],{"class":176},"    cellConfig",[163,194,195],{"class":169},": {\n",[163,197,199,202,204,208],{"class":165,"line":198},4,[163,200,201],{"class":176},"      size",[163,203,180],{"class":169},[163,205,207],{"class":206},"sYu0t","5",[163,209,187],{"class":169},[163,211,213,216,218,221],{"class":165,"line":212},5,[163,214,215],{"class":176},"      border",[163,217,180],{"class":169},[163,219,220],{"class":206},"1",[163,222,187],{"class":169},[163,224,226,229,231,234],{"class":165,"line":225},6,[163,227,228],{"class":176},"      xCount",[163,230,180],{"class":169},[163,232,233],{"class":206},"15",[163,235,187],{"class":169},[163,237,239,242,244,247],{"class":165,"line":238},7,[163,240,241],{"class":176},"      yCount",[163,243,180],{"class":169},[163,245,246],{"class":206},"24",[163,248,187],{"class":169},[163,250,252],{"class":165,"line":251},8,[163,253,254],{"class":169},"    },\n",[163,256,258],{"class":165,"line":257},9,[163,259,261],{"class":260},"sAwPA","    // 从kunkun身上吸取的几个颜色\n",[163,263,265,268,271,274,277,280,282,285,287,290,292,295,297,300,302,305],{"class":165,"line":264},10,[163,266,267],{"class":176},"    colors",[163,269,270],{"class":169},": [",[163,272,273],{"class":183},"\"#564A54\"",[163,275,276],{"class":169},", ",[163,278,279],{"class":183},"\"#DDDBED\"",[163,281,276],{"class":169},[163,283,284],{"class":183},"\"#1C1A25\"",[163,286,276],{"class":169},[163,288,289],{"class":183},"\"#DDB3C0\"",[163,291,276],{"class":169},[163,293,294],{"class":183},"\"#908B96\"",[163,296,276],{"class":169},[163,298,299],{"class":183},"\"#CC7A76\"",[163,301,276],{"class":169},[163,303,304],{"class":183},"\"#ffffff\"",[163,306,307],{"class":169},"]\n",[163,309,311],{"class":165,"line":310},11,[163,312,313],{"class":169},"}\n",[46,315,316],{"start":173},[49,317,318,319,323],{},"可以一键导出自己的预设到剪贴板\n粘贴板功能用的vue-use，",[19,320,322],{"href":21,"rel":321},[23],"搭建项目的时候","已经内置好了",[154,325,329],{"className":326,"code":327,"language":328,"meta":60,"style":60},"language-typescript shiki shiki-themes github-light","import { useClipboard } from \"@vueuse/core\";\n\nconst { isSupported, copy } = useClipboard();\n\n","typescript",[160,330,331,349,355],{"__ignoreMap":60},[163,332,333,337,340,343,346],{"class":165,"line":166},[163,334,336],{"class":335},"sD7c4","import",[163,338,339],{"class":169}," { useClipboard } ",[163,341,342],{"class":335},"from",[163,344,345],{"class":183}," \"@vueuse/core\"",[163,347,348],{"class":169},";\n",[163,350,351],{"class":165,"line":173},[163,352,354],{"emptyLinePlaceholder":353},true,"\n",[163,356,357,360,363,366,368,371,374,377,381],{"class":165,"line":76},[163,358,359],{"class":335},"const",[163,361,362],{"class":169}," { ",[163,364,365],{"class":206},"isSupported",[163,367,276],{"class":169},[163,369,370],{"class":206},"copy",[163,372,373],{"class":169}," } ",[163,375,376],{"class":335},"=",[163,378,380],{"class":379},"s7eDp"," useClipboard",[163,382,383],{"class":169},"();\n",[15,385,386,389,390,393],{},[58,387],{"alt":60,"src":388},"https://img.zzao.club/article/202411191438067.png","\n3. 可以一键导入别人的模版\n",[58,391],{"alt":60,"src":392},"https://img.zzao.club/article/202411191438068.png","\n4. 选择预设后，会切换当前配置为预设内容",[15,395,396],{},[58,397],{"alt":60,"src":398},"https://img.zzao.club/article/202411191438069.png",[46,400,401],{"start":212},[49,402,403],{},"预设内容存在了LocalStorage，加载页面时会在本地缓存中加载预设，导入预设的时候，也会往本地缓存同步一下",[154,405,407],{"className":326,"code":406,"language":328,"meta":60,"style":60},"// 加载本地预设\n...\nconst localPresets = localStorage.getItem(\"ZZSTUDIO_PPP_PRESETS\");\n  if (localPresets) {\n    try {\n      const presets = JSON.parse(localPresets);\n      // 检测合法性, 没问题的话, 直接应用\n      if (presets.every((preset: any) => checkPreset(preset))) {\n        // 去重, name一样会被去掉, 本地优先\n        const newPresets = filterNoRepeatPresets(presets.concat(awsomePreset.value));\n        awsomePreset.value = newPresets.concat();\n      }\n    } catch (err) {\n      toast.value.show({\n        msg: \"本地预设加载失败\",\n        type: \"error\",\n      });\n      return false;\n    }\n  } else {\n    logger.info(\"无本地预设\");\n  }\n...\n// 导出预设\n... \nif (isSupported) {\n    copy(copyPreset.value);\n    toast.value.show({\n      type: \"success\",\n      msg: \"已复制到剪切板!\",\n    });\n  }\n...\n",[160,408,409,414,419,444,452,460,482,487,523,528,550,564,570,582,594,605,616,622,633,639,650,666,672,677,683,692,701,710,720,731,742,748,753],{"__ignoreMap":60},[163,410,411],{"class":165,"line":166},[163,412,413],{"class":260},"// 加载本地预设\n",[163,415,416],{"class":165,"line":173},[163,417,418],{"class":335},"...\n",[163,420,421,423,426,429,432,435,438,441],{"class":165,"line":76},[163,422,359],{"class":335},[163,424,425],{"class":206}," localPresets",[163,427,428],{"class":335}," =",[163,430,431],{"class":169}," localStorage.",[163,433,434],{"class":379},"getItem",[163,436,437],{"class":169},"(",[163,439,440],{"class":183},"\"ZZSTUDIO_PPP_PRESETS\"",[163,442,443],{"class":169},");\n",[163,445,446,449],{"class":165,"line":198},[163,447,448],{"class":335},"  if",[163,450,451],{"class":169}," (localPresets) {\n",[163,453,454,457],{"class":165,"line":212},[163,455,456],{"class":335},"    try",[163,458,459],{"class":169}," {\n",[163,461,462,465,468,470,473,476,479],{"class":165,"line":225},[163,463,464],{"class":335},"      const",[163,466,467],{"class":206}," presets",[163,469,428],{"class":335},[163,471,472],{"class":206}," JSON",[163,474,475],{"class":169},".",[163,477,478],{"class":379},"parse",[163,480,481],{"class":169},"(localPresets);\n",[163,483,484],{"class":165,"line":238},[163,485,486],{"class":260},"      // 检测合法性, 没问题的话, 直接应用\n",[163,488,489,492,495,498,501,505,508,511,514,517,520],{"class":165,"line":251},[163,490,491],{"class":335},"      if",[163,493,494],{"class":169}," (presets.",[163,496,497],{"class":379},"every",[163,499,500],{"class":169},"((",[163,502,504],{"class":503},"sqxcx","preset",[163,506,507],{"class":335},":",[163,509,510],{"class":206}," any",[163,512,513],{"class":169},") ",[163,515,516],{"class":335},"=>",[163,518,519],{"class":379}," checkPreset",[163,521,522],{"class":169},"(preset))) {\n",[163,524,525],{"class":165,"line":257},[163,526,527],{"class":260},"        // 去重, name一样会被去掉, 本地优先\n",[163,529,530,533,536,538,541,544,547],{"class":165,"line":264},[163,531,532],{"class":335},"        const",[163,534,535],{"class":206}," newPresets",[163,537,428],{"class":335},[163,539,540],{"class":379}," filterNoRepeatPresets",[163,542,543],{"class":169},"(presets.",[163,545,546],{"class":379},"concat",[163,548,549],{"class":169},"(awsomePreset.value));\n",[163,551,552,555,557,560,562],{"class":165,"line":310},[163,553,554],{"class":169},"        awsomePreset.value ",[163,556,376],{"class":335},[163,558,559],{"class":169}," newPresets.",[163,561,546],{"class":379},[163,563,383],{"class":169},[163,565,567],{"class":165,"line":566},12,[163,568,569],{"class":169},"      }\n",[163,571,573,576,579],{"class":165,"line":572},13,[163,574,575],{"class":169},"    } ",[163,577,578],{"class":335},"catch",[163,580,581],{"class":169}," (err) {\n",[163,583,585,588,591],{"class":165,"line":584},14,[163,586,587],{"class":169},"      toast.value.",[163,589,590],{"class":379},"show",[163,592,593],{"class":169},"({\n",[163,595,597,600,603],{"class":165,"line":596},15,[163,598,599],{"class":169},"        msg: ",[163,601,602],{"class":183},"\"本地预设加载失败\"",[163,604,187],{"class":169},[163,606,608,611,614],{"class":165,"line":607},16,[163,609,610],{"class":169},"        type: ",[163,612,613],{"class":183},"\"error\"",[163,615,187],{"class":169},[163,617,619],{"class":165,"line":618},17,[163,620,621],{"class":169},"      });\n",[163,623,625,628,631],{"class":165,"line":624},18,[163,626,627],{"class":335},"      return",[163,629,630],{"class":206}," false",[163,632,348],{"class":169},[163,634,636],{"class":165,"line":635},19,[163,637,638],{"class":169},"    }\n",[163,640,642,645,648],{"class":165,"line":641},20,[163,643,644],{"class":169},"  } ",[163,646,647],{"class":335},"else",[163,649,459],{"class":169},[163,651,653,656,659,661,664],{"class":165,"line":652},21,[163,654,655],{"class":169},"    logger.",[163,657,658],{"class":379},"info",[163,660,437],{"class":169},[163,662,663],{"class":183},"\"无本地预设\"",[163,665,443],{"class":169},[163,667,669],{"class":165,"line":668},22,[163,670,671],{"class":169},"  }\n",[163,673,675],{"class":165,"line":674},23,[163,676,418],{"class":335},[163,678,680],{"class":165,"line":679},24,[163,681,682],{"class":260},"// 导出预设\n",[163,684,686,689],{"class":165,"line":685},25,[163,687,688],{"class":335},"...",[163,690,691],{"class":169}," \n",[163,693,695,698],{"class":165,"line":694},26,[163,696,697],{"class":335},"if",[163,699,700],{"class":169}," (isSupported) {\n",[163,702,704,707],{"class":165,"line":703},27,[163,705,706],{"class":379},"    copy",[163,708,709],{"class":169},"(copyPreset.value);\n",[163,711,713,716,718],{"class":165,"line":712},28,[163,714,715],{"class":169},"    toast.value.",[163,717,590],{"class":379},[163,719,593],{"class":169},[163,721,723,726,729],{"class":165,"line":722},29,[163,724,725],{"class":169},"      type: ",[163,727,728],{"class":183},"\"success\"",[163,730,187],{"class":169},[163,732,734,737,740],{"class":165,"line":733},30,[163,735,736],{"class":169},"      msg: ",[163,738,739],{"class":183},"\"已复制到剪切板!\"",[163,741,187],{"class":169},[163,743,745],{"class":165,"line":744},31,[163,746,747],{"class":169},"    });\n",[163,749,751],{"class":165,"line":750},32,[163,752,671],{"class":169},[163,754,756],{"class":165,"line":755},33,[163,757,418],{"class":335},[15,759,760],{},"写完之后，开始测试，随手画几个蒙娜丽莎这种作品，发现了几个bug，马上修复。",[15,762,763,764,769],{},"由于点「导出图片」按钮次数",[27,765,766],{},[30,767,768],{},"太","多，感觉有点迷瞪了，容易和「生成」按钮混了，于是我把「生成」按钮挪到了最上边，防止误触。",[15,771,772],{},"又导出了几张大作并且分享之后，有用户给我提出了建议：导出之后的边框太粗了，有点影响视觉。",[15,774,775],{},"我觉得很道理，安排！于是加了一个「导出去边框」的Toggle，测试了一下，确实是有内味了。",[15,777,778,779],{},"目前操作栏如下：\n",[58,780],{"alt":60,"src":781},"https://img.zzao.club/article/202411191438070.png",[15,783,784],{},"以上就是这两次小版本迭代新增的功能，边写边使用边改bug，闲里偷忙，只隔了一天就搞完啦~",[11,786,787],{"id":787},"作品演示",[15,789,790],{},"只复刻iKun肯定不是真粉丝，于是我把自己也打扮成了他的模样 ！",[15,792,793],{},[58,794],{"alt":60,"src":795},"https://img.zzao.club/article/202411191438071.png",[15,797,798,799,802],{},"请把 「",[30,800,801],{},"优秀","」打在评论区！！",[11,804,805],{"id":805},"小结",[15,807,808],{},"本次带来了两个小版本更新，以及我的传世之画作，希望大家喜欢！",[15,810,811,812,817,818,821],{},"从最初架构中，我并没有构思出这些功能或问题，而是在开发、使用的过程中，不断打磨、",[27,813,814],{},[30,815,816],{},"美","化，发现问题，解决问题，",[30,819,820],{},"从使用者的角度增加功能","。可见，最重要的还是抛除杂念，然后下手去做。",[15,823,824],{},"而且！现在还只是纯前端功能，相信有了后端的加入，能够实现更多的有意思的功能~",[15,826,827,828,831],{},"看到这里，如果你已经提起了兴趣，可以去回顾我的上一篇《",[19,829,24],{"href":21,"rel":830},[23],"》，然后行动起来吧~",[15,833,834,835],{},"如果你对这个产品感兴趣或者有好的功能建议要告诉我，欢迎关注公众号：",[19,836,839],{"href":837,"rel":838},"https://mp.weixin.qq.com/s/A8wHxE5Q2jl6Su_7QA6f-A",[23],"早早集市",[15,841,842],{},"感谢你的阅读，我是枣把儿~",[844,845,846],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sB1qb, html code.shiki .sB1qb{--shiki-default:#B31D28;--shiki-default-font-style:italic}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":60,"searchDepth":173,"depth":173,"links":848},[849,850,851,852],{"id":13,"depth":173,"text":13},{"id":39,"depth":173,"text":39},{"id":787,"depth":173,"text":787},{"id":805,"depth":173,"text":805},"2023-12-14T00:00:00.000Z","像素厂 Pixed Pic Pro 迭代记录","md",null,"2025-08-19T00:00:00.000Z",{"published":859,"category":839},"2023-12-14","/post/pixel/ikun-pixeled-pic-pro","---\ntitle: iKun集合！Pixeled Pic Pro 前端迭代篇（一）\npublished: 2023-12-14\nauthor: 枣把儿\ndescription: 像素厂 Pixed Pic Pro 迭代记录\ncategory: 早早集市\ntags: [\"早早集市\", \"Vue3\"]\nlastmod: 2025-08-19\ndate: 2023-12-14\nshowTitle: iKun集合！Pixeled Pic Pro 前端迭代篇（一）\n---\n## 引言\n\n上篇《[Vue3项目实战：像素风LOGO编辑器 Pixeled Pic Pro](https://juejin.cn/post/7311697095505149990)》，我完成了V0.6.0版本，实现了基础功能。本来打算先写完后续的Nest篇、部署篇、总结篇，途中再自己默默更新到V1.0.0。但是写着写着，发现了些刺***激***的玩法，导致打乱了我的计划。\n\n真是计划赶不上变化啊，无奈之下我决定加更一篇，来分享一下我又新加了什么有趣的功能！\n\n## 功能一览\n\n#### V0.7.0\n1. 自定义行x列生成\n\n本来是v0.6.0的功能，偷懒了，放到了这个版本补上。\n\n![](https://img.zzao.club/article/202411191438063.png)\n2.  Toast组件\n\n原因：Konva生成过多矩形后，页面会有明显卡段，所以需要一个提示组件，提醒一下用户。\n\n基于daisyUI封装了一下Toast小组件，目前只支持同时显示一条消息，重复的消息会重复利用这个元素\n\n![](https://img.zzao.club/article/202411191438064.png)\n\n3. Tab键切换颜色调整为空格键\n\n因为Tab键和浏览器默认行为有冲突，页面有表单里元素，会自动focus，使用起来不太方便，所以调整为空格键了\n\n#### V0.8.0\n**预设功能！**\n\n我在自己把玩自己的网站的时候，发现自己写死的几个颜色，有时候不够用，或者说我也不知道用什么颜色比较好。\n\n于是我就想要不我用吸取颜色的软件，找几个高大上的图，吸几组配色，再放上去够大家选择。于是我寻思先在电脑里开始找几个图吧。\n\n![](https://img.zzao.club/article/202411191438065.png)\n很突然，我就发现了iKun的图片（侵删），马上就来了兴致，先画个iKun玩玩再说！\n画完了之后，导出，直接发到\"回家吃饭\"的群里！\n\n果然啊，大家对我的绘画水平表示了强烈的认可。\n![](https://img.zzao.club/article/202411191438066.png)\n\n我仔细对比一看啊，确实，除了背带略长，可以说是很还原了~\n\n我又一寻思，这么好玩的功能，我发给别人，别人感兴趣了，他自己怎么再画出来呢？\n\n他要去吸取颜色，目测一个格子的长宽数量，然后在网站上设置好，再开始画。 显然是太麻烦了，没等开始画人就关闭网站了！\n\n从这一点我想到了两个问题：\n1. 从吸取颜色到配置数量，太麻烦，太模糊。不像我这样擅长画画的话，很难一步到位\n2. 画着画着，格子不够了怎么办\n\n于是我灵机一动，我把我现在的配置保存成一个“预设”，别人想用的时候我就发给他。\n\n能用文本传播，很自然就能想到用json，而且用剪贴板的话，不懂代码的人也不必关心复制的是个什么玩意。用的时候再从一个入口粘贴进去，我这边自动给他加上，这样就完成了和上一个创作者相同的前置条件！ \n\n不擅长画画也是个好事，不光好的画受欢迎，只要***你***的画够抽象，相信喜欢的人也是非常多的。因为互联网的好处就是你可以从中找到任何奇怪爱好、奇怪角度的同行者。\n\n为了解决第一个问题，我梳理了以下功能点， 然后趁着热乎劲儿火速把他们实现：\n1. 预设的内容为：方格大小和数量配置，颜色组，名称\n```json\n{\n    name: \"IKUN\",\n    cellConfig: {\n      size: 5,\n      border: 1,\n      xCount: 15,\n      yCount: 24,\n    },\n    // 从kunkun身上吸取的几个颜色\n    colors: [\"#564A54\", \"#DDDBED\", \"#1C1A25\", \"#DDB3C0\", \"#908B96\", \"#CC7A76\", \"#ffffff\"]\n}\n```\n2. 可以一键导出自己的预设到剪贴板 \n粘贴板功能用的vue-use，[搭建项目的时候](https://juejin.cn/post/7311697095505149990)已经内置好了\n```typescript\nimport { useClipboard } from \"@vueuse/core\";\n\nconst { isSupported, copy } = useClipboard();\n\n```\n\n![](https://img.zzao.club/article/202411191438067.png)\n3. 可以一键导入别人的模版\n![](https://img.zzao.club/article/202411191438068.png)\n4. 选择预设后，会切换当前配置为预设内容\n\n![](https://img.zzao.club/article/202411191438069.png)\n\n5. 预设内容存在了LocalStorage，加载页面时会在本地缓存中加载预设，导入预设的时候，也会往本地缓存同步一下\n```typescript\n// 加载本地预设\n...\nconst localPresets = localStorage.getItem(\"ZZSTUDIO_PPP_PRESETS\");\n  if (localPresets) {\n    try {\n      const presets = JSON.parse(localPresets);\n      // 检测合法性, 没问题的话, 直接应用\n      if (presets.every((preset: any) => checkPreset(preset))) {\n        // 去重, name一样会被去掉, 本地优先\n        const newPresets = filterNoRepeatPresets(presets.concat(awsomePreset.value));\n        awsomePreset.value = newPresets.concat();\n      }\n    } catch (err) {\n      toast.value.show({\n        msg: \"本地预设加载失败\",\n        type: \"error\",\n      });\n      return false;\n    }\n  } else {\n    logger.info(\"无本地预设\");\n  }\n...\n// 导出预设\n... \nif (isSupported) {\n    copy(copyPreset.value);\n    toast.value.show({\n      type: \"success\",\n      msg: \"已复制到剪切板!\",\n    });\n  }\n...\n```\n\n写完之后，开始测试，随手画几个蒙娜丽莎这种作品，发现了几个bug，马上修复。\n\n由于点「导出图片」按钮次数***太***多，感觉有点迷瞪了，容易和「生成」按钮混了，于是我把「生成」按钮挪到了最上边，防止误触。\n\n又导出了几张大作并且分享之后，有用户给我提出了建议：导出之后的边框太粗了，有点影响视觉。\n\n我觉得很道理，安排！于是加了一个「导出去边框」的Toggle，测试了一下，确实是有内味了。\n\n目前操作栏如下：\n![](https://img.zzao.club/article/202411191438070.png)\n\n以上就是这两次小版本迭代新增的功能，边写边使用边改bug，闲里偷忙，只隔了一天就搞完啦~\n\n## 作品演示\n\n只复刻iKun肯定不是真粉丝，于是我把自己也打扮成了他的模样 ！\n\n![](https://img.zzao.club/article/202411191438071.png)\n\n请把 「**优秀**」打在评论区！！\n\n\n## 小结\n\n本次带来了两个小版本更新，以及我的传世之画作，希望大家喜欢！\n\n从最初架构中，我并没有构思出这些功能或问题，而是在开发、使用的过程中，不断打磨、***美***化，发现问题，解决问题，**从使用者的角度增加功能**。可见，最重要的还是抛除杂念，然后下手去做。\n\n而且！现在还只是纯前端功能，相信有了后端的加入，能够实现更多的有意思的功能~\n\n看到这里，如果你已经提起了兴趣，可以去回顾我的上一篇《[Vue3项目实战：像素风LOGO编辑器 Pixeled Pic Pro](https://juejin.cn/post/7311697095505149990)》，然后行动起来吧~\n\n如果你对这个产品感兴趣或者有好的功能建议要告诉我，欢迎关注公众号：[早早集市](https://mp.weixin.qq.com/s/A8wHxE5Q2jl6Su_7QA6f-A)\n\n感谢你的阅读，我是枣把儿\\~\n",{"title":5,"description":854},"post/pixel/ikun-pixeled-pic-pro",[839,865],"Vue3","-07vd4kRDW46y-4J-F8qRAfZIArJ2W6CYIohcOMVA5k",[868,872],{"title":869,"path":870,"stem":871},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":873,"path":874,"stem":875},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005087061]