pixel_round

圆圆画板

这是一个能够实时对图像内容进行平滑的画板，使用时，用户仅需在画板中绘制出像素风格的图像，那么便可实时得到 Q 版的图像，可用于简单可爱风格的图片制作，下方图片为软件作品示例：

• 开发该应用的初衷：

  上一个独立游戏中的物体资源是使用 IPad 的 Procreate 绘制出像素图片，导出后再用自制软件进行批量平滑，因而无法在绘制阶段实时查看平滑效果，妨碍效率，另外附上该独立游戏 h5 版网址：https://juliusjiang.github.io/slime_war/build/web-desktop/

  很多人都喜欢画画，但是一提笔就容易被自己刚画的歪歪扭扭的线给打击信心，所以如果不用画线也可以进行美术创作，那对很多人来讲肯定是好事

• 跳过一切直接体验应用：https://juliusjiang.github.io/pixel_round/point_round_h5/build/

案例展示

以下是 2 个具体的案例，其中左侧为画板图像，右侧为实时平滑后的图像。可以看出来，经过画板的处理，原图像中的锯齿被抹平为连贯的相连直线，图像变得更加柔和

• 案例 1，时髦发型男：

• 案例 2，紫袍巫师：

平滑规则

以下解释中红色块为重点关注目标

• 规则 1：尖角俩侧颜色一致的话，尖角会被该颜色占领

  原图中红色块左下角俩侧均为蓝色块：

  

  平滑后红色块左下角被占领：

  

• 规则 2：符合规则 1 的同时，被占领的形状跟随相邻情况进行变化

  原图中红色块左下角被呈 “L” 排布的蓝色块包围：

  

  平滑后红色块左下角被斜三角形占领：

  

以上 2 个规则为最核心的平滑规则，而且对于旋转、镜像的情况也同样适用。按照以上规则，就能够理解下方图像的变化，那么在使用的时候就知道如何得到自己想要的效果，其中左图为平滑前的原图，右图为平滑后的效果：

使用说明

• 操作说明：该应用由于目前可操作内容不多，所以不设菜单栏，而是把所有操作平铺在界面，由此界面按钮、参数看起来比较多，但最开始要注意的仅是界面左下角的这 6 个操作，其中标注的字母为快捷键

  画笔：使用画笔颜色填充鼠标框选的区域

  拾色器：吸取画板中已有颜色作为当前画笔颜色

  橡皮擦：清除选框内画笔留下的内容

  画笔颜色：调整当前画笔颜色

  撤销：撤销上一步的操作

  恢复：撤销过量的时候，回退 “撤销”

  

• 步骤说明：

  暂时忽略右侧平滑的效果，每 2 个像素作为 1 个单位，绘制出一个恰当的像素图

  

  此时对应的平滑效果图比较扭曲

  

  最后，以平滑效果为准，不断调整像素图，直到效果达到预期即完成

  

  此时像素图已被修改，对比一开始，很多像素细节已经发生修改，这也是最开始以 2 像素作为 1 个单位的原因

  

• 空间限制：目前应用数据存储在浏览器本地，所以存储空间大小取决于浏览器，一般使用不会出现问题，但是长时间积累的话会有不确定性，所以有重要成果的时候记得及时 “导出像素图为 png” 以进行文件备份

未来计划

• 解决平滑后连接处棱角突出的问题

• 扩大平滑的检测范围，兼容更多的角度需要

• 给画板添加更多的操作选项

源码本地运行

• 该工程的开发环境为 NodeJS + TypeScript + React + Antd，且涉及大量的 WebGL 内容

• round_react_creator_h5 是放置源码的核心目录，安装好 NodeJS 后，该目录下运行命令 “npm install” 安装所有依赖项，再运行命令 “npm run start” 即可启动本地调试

• round_react_creator_electron 是 round_react_creator_h5 对应的 Electron 版本，仅用于发布本地应用，可以忽略

其他

• 平滑后图像效果有棱角突出的感觉，有点类似低面数 3D 模型的效果，所以展示尺寸宜小不宜大

• 该应用的平滑效果最终起到的是辅助作用，它仍然要求用户有基础的美术水平，比如简单的配色以及对元素的抽象

• 发布 h5 以后，须把 index.html 中 script 标签中 js 的路径 “/xxx” 改成 “./xxx”，这样才可运行正常，这个问题属于 react，暂时不计划解决