1. 项目缘起与整体设计思路1.1 为什么会有 artcraft 这个想法先说说 artcraft 到底是个什么东西。简单讲它是一个面向创意工作者的轻量级艺术创作工具集核心定位是“把零散的艺术创作流程串成一条线”。你可以把它理解成一个工作台左边是素材管理中间是画布或编辑区右边是参数调节和导出选项。它不追求大而全而是针对插画、手绘、拼贴、纹理生成这几类高频场景做了深度优化。我做这个项目的出发点很直接。市面上主流的创作软件要么太重打开就要等半天功能菜单层层叠叠找个笔刷设置要翻五级菜单要么太轻轻到连图层混合模式都不支持画到一半就得换工具。artcraft 想卡在中间那个位置——启动快、核心功能齐全、扩展性强。适合谁用独立插画师、手账爱好者、做社交媒体配图的运营人员以及想给孩子做简单绘画工具的父母。不需要你会写代码但如果你懂一点前端可以自己改主题和快捷键。关键词里提到的“artcraft”本身就是一个合成词art 加 craft直译就是“艺术手艺”。这个名字定下来之前我试过好几个方向比如叫“sketchbox”“paintflow”但都觉得太泛。artcraft 的好处是它同时暗示了“艺术性”和“手工感”跟项目想传达的“工具应该像趁手的画笔一样自然”这个理念是吻合的。1.2 技术选型背后的取舍逻辑整个项目基于 Web 技术栈构建核心是 Canvas API 加 WebGL 做混合渲染。为什么不用纯 SVG因为 SVG 在处理大量笔触路径时性能下降非常明显尤其是当图层数量超过 20 个、每个图层有上千个路径点时拖动一下画布就能感觉到明显卡顿。Canvas 2D 在中等复杂度下表现更好而 WebGL 负责处理滤镜和混合模式这类像素级操作。框架层面选了轻量级的响应式方案没有上重型框架。原因很简单artcraft 的交互逻辑集中在画布区域UI 部分只有工具栏、图层面板和属性面板三块用原生模块化加少量状态管理就够了。引入大型框架反而会增加打包体积和启动时间。实测下来生产环境构建后的首屏加载时间控制在 1.2 秒以内这个数字在同类工具里算比较靠前的。存储方案用的是 IndexedDB 加本地文件系统双通道。IndexedDB 负责自动保存草稿和缩略图缓存本地文件系统通过 File System Access API 实现“另存为”和“打开项目”。这里有个细节不是所有浏览器都支持 File System Access API所以做了降级处理——不支持的时候自动切换到下载/上传模式。这个判断逻辑写在初始化阶段用户无感知。1.3 整体架构分层项目分成四层从下往上依次是渲染层Canvas 2D 负责笔触绘制和图层合成WebGL 负责滤镜链和混合模式。两层之间通过一个共享的帧缓冲对象做数据交换。数据层管理图层树、笔触历史、素材库索引。所有数据操作都走一个统一的状态机保证撤销/重做的一致性。交互层处理鼠标、触控笔、键盘快捷键的输入事件。这里做了防抖和节流避免高频事件阻塞渲染。UI 层工具栏、面板、对话框。样式用 CSS 变量管理方便换主题。分层的好处是每层可以独立测试。比如渲染层的笔触平滑算法我写了一套模拟输入数据的测试用例不依赖真实鼠标事件就能验证不同压感曲线下的表现。2. 核心功能模块拆解与实操要点2.1 笔触引擎从“能画”到“好画”的关键细节笔触引擎是 artcraft 最核心的模块也是花时间最多的部分。一个基本的笔触绘制流程是这样的监听指针事件 → 采集坐标和压感 → 对坐标做平滑处理 → 根据压感计算笔刷半径和透明度 → 在 Canvas 上绘制线段或 stamp。听起来简单但坑非常多。第一个坑是坐标采集频率。不同设备的指针事件触发频率不一样有的鼠标 125Hz有的触控笔 240Hz高刷新率屏幕下甚至能到 360Hz。如果每个事件都直接画一个点低频率设备上笔触会显得很“碎”高频率设备上又会重复绘制导致颜色过深。我的做法是引入一个时间窗口把 16 毫秒内的多个事件合并成一个绘制批次取平均坐标和最大压感。这样既平滑了笔触又减少了绘制调用次数。第二个坑是压感曲线。很多触控笔默认的压感响应是线性的但人的手部力量变化其实更接近指数分布——轻轻画的时候力量变化小用力画的时候力量变化大。所以 artcraft 内置了三条压感曲线线性、柔和、强烈。柔和曲线适合勾线强烈曲线适合铺色。你可以在设置里切换也可以自己拖拽控制点自定义。第三个坑是笔刷 stamp 的间距。如果间距太大快速画线时笔触会断成一个个圆点间距太小又会造成大量重叠绘制性能急剧下降。经过反复测试间距设为笔刷半径的 15% 到 25% 之间比较合适。具体数值取决于笔刷的软硬程度硬边笔刷用 15%软边笔刷用 25%。这个参数在代码里是一个常量但暴露在了高级设置里方便有经验的用户微调。注意如果你在开发类似的笔触引擎千万不要在 pointermove 事件里直接调用 canvas 的绘制方法。正确做法是把事件数据推入一个队列在 requestAnimationFrame 回调里统一处理。否则在低端设备上会出现明显的输入延迟。2.2 图层系统混合模式与性能的平衡图层是数字绘画的基础设施。artcraft 的图层系统支持无限层级、拖拽排序、显示/隐藏、锁定、透明度调节以及 12 种混合模式。混合模式的实现分两类一类是 Canvas 2D 原生支持的比如 multiply、screen、overlay直接用 globalCompositeOperation 就行另一类是 Canvas 2D 不支持的比如 color burn、linear light需要用 WebGL 写 shader 来实现。这里有个性能取舍。每次切换混合模式或者调整图层顺序都需要重新合成整个画布。如果图层数量多、画布尺寸大合成一次可能要几十毫秒。为了减少不必要的合成我做了一个脏标记机制只有被修改的图层及其上方图层会被标记为“需要重新合成”下方的图层直接复用上一帧的缓存。实测下来在 20 个图层、2048x2048 画布的场景下单次笔触的合成时间从 45 毫秒降到了 12 毫秒左右。另一个细节是图层缩略图的生成。如果每次笔触结束都重新生成缩略图会浪费大量 CPU。我的策略是延迟生成笔触结束后启动一个 500 毫秒的定时器如果这段时间内没有新的笔触才生成缩略图。如果用户连续画了很多笔缩略图只会在最后生成一次。2.3 素材库与标签管理素材库支持导入图片、颜色板、笔刷预设和纹理。导入的图片会自动生成三个尺寸的缩略图小图用于列表展示中图用于预览原图用于拖拽到画布。缩略图生成用的是 OffscreenCanvas在 Worker 线程里完成不阻塞主线程。标签管理这块我参考了文件系统的思路但做了一些简化。每个素材可以打多个标签标签之间是平级关系没有层级。为什么不做层级标签因为实际用下来层级标签在素材数量少于 500 个的时候反而增加认知负担。平级标签加搜索框的组合更直接。搜索支持模糊匹配输入“天空”能匹配到“天空纹理”“蓝天背景”“星空笔刷”这些素材。实操心得素材导入时最好做一次格式校验和尺寸限制。我遇到过用户导入 8000x8000 的图片直接导致内存溢出。现在的策略是超过 4096 像素的图片自动等比缩放到 4096并且提示用户“图片已缩放以适应画布”。这个提示很重要不然用户会觉得工具“偷”了他的画质。2.4 导出与分享格式选择与参数计算导出支持 PNG、JPEG、WebP 三种格式。PNG 支持透明通道适合需要后期合成的场景JPEG 体积小适合社交媒体分享WebP 兼顾体积和质量但部分老设备不支持。默认导出格式是 PNG因为创作工具的用户对透明通道有刚需。导出尺寸的计算逻辑是这样的如果用户没有指定就按画布的原始尺寸导出。如果指定了宽度高度按原始宽高比自动计算。这里有个容易忽略的点导出时的 DPI 元数据。很多印刷场景需要 300 DPI但屏幕显示只需要 72 DPI。artcraft 在导出对话框里放了一个 DPI 选项默认 72可以改成 300。注意改变 DPI 不会改变像素尺寸只是写入元数据。如果你需要实际放大像素应该用“缩放导出”功能那个会做重采样。导出过程是异步的用到了 Canvas 的 toBlob 方法。大尺寸画布导出时toBlob 可能会阻塞主线程几百毫秒。我的优化方案是先把画布内容复制到一个离屏 Canvas然后在 Worker 里调用 convertToBlob。这样主线程不会卡顿导出进度条也能流畅更新。3. 完整实操流程从零开始创作一幅作品3.1 环境准备与项目初始化假设你已经拿到了 artcraft 的源码第一步是安装依赖。项目用的是 npm 作为包管理器Node 版本要求 18 以上。安装命令很标准npm install安装完成后开发模式启动npm run dev这时候会启动一个本地开发服务器默认端口 5173。打开浏览器访问 localhost:5173 就能看到界面。如果你需要构建生产版本npm run build构建产物在 dist 目录下是一组静态文件可以直接部署到任何静态服务器。这里有个小细节项目根目录下有一个artcraft.config.js文件里面可以配置默认画布尺寸、默认笔刷、快捷键映射等。我建议第一次使用时先把这个文件过一遍把默认画布尺寸改成你常用的尺寸。比如你主要画社交媒体配图可以改成 1080x1080如果画插画可以改成 2480x3508A4 300DPI。3.2 画布设置与素材导入打开 artcraft 后第一件事是新建画布。点击左上角的“新建”按钮弹出对话框。这里需要填三个参数宽度、高度、背景色。背景色有三个选项白色、透明、自定义。如果你打算后期合成选透明如果直接输出选白色。新建完成后进入主界面。左侧是工具栏中间是画布右侧是图层面板和属性面板。先别急着画建议先把常用素材导入进来。点击素材库面板的“导入”按钮选择你的图片文件。支持多选一次可以导入几十张。导入过程中会显示进度条大文件可能需要几秒钟。导入完成后素材会以网格形式展示。你可以给素材打标签方便后续搜索。比如把所有的天空素材打上“天空”标签把人物素材打上“人物”标签。标签的输入框在素材预览图的右下角点击加号就能添加。3.3 笔刷配置与压感测试在开始画之前花两分钟配置笔刷是值得的。点击工具栏的笔刷图标展开笔刷面板。artcraft 内置了 8 种基础笔刷硬圆笔、软圆笔、铅笔、马克笔、水彩笔、喷枪、橡皮擦、涂抹工具。每种笔刷都可以调节大小、硬度、间距、流量、压感影响。我的建议是先选硬圆笔把大小调到 10 像素左右硬度 100%间距 15%流量 100%压感影响只勾选“大小”。然后在画布上画几条线感受一下压感响应。如果觉得轻画时线条太细可以切换到“柔和”压感曲线如果觉得重画时线条太粗可以降低压感影响的最大值。注意不同品牌的触控笔压感范围不一样。有的笔在 artcraft 里默认压感偏弱这时候不要急着换笔刷先去设置里把压感曲线的整体增益调高 20% 到 30%。这个设置在图层面板下方的“输入设置”里。3.4 分层绘制与混合模式应用正式绘制时养成分层的好习惯。我的分层策略是这样的背景层填充底色或导入背景图。草稿层用铅笔笔刷画大致构图透明度调到 30% 左右。线稿层用硬圆笔勾线放在草稿层上方。底色层用马克笔或水彩笔铺大色块混合模式设为“正常”。阴影层用软圆笔画阴影混合模式设为“正片叠底”。高光层用喷枪画高光混合模式设为“叠加”或“滤色”。调整层最后加一个调整层微调色相、饱和度、亮度。每画完一个图层可以点一下图层旁边的锁图标防止误触。如果某个图层画错了直接删掉重来不影响其他图层。混合模式的实际效果需要多试。比如“正片叠底”适合画阴影因为它会让下层颜色变暗“叠加”适合画高光因为它会增加对比度“颜色减淡”适合画发光效果但容易过曝要配合低透明度使用。3.5 导出与后期处理画完之后点击右上角的“导出”按钮。选择 PNG 格式尺寸保持原始大小DPI 设为 72屏幕显示或 300印刷。点击“导出”后浏览器会下载一个 PNG 文件。如果你需要进一步后期处理可以把 PNG 导入到其他软件里。artcraft 的导出不带任何水印也不限制商用。但建议保留一份项目文件.artcraft 格式方便以后修改。项目文件里包含了所有图层、笔刷设置和素材引用体积比 PNG 大但信息完整。4. 常见问题与排查技巧实录4.1 笔触延迟与卡顿的排查思路笔触延迟是最影响体验的问题。如果你感觉画的时候线条“跟不上”手按以下顺序排查排查项可能原因解决方法浏览器使用了不支持的浏览器换用最新版 Chrome 或 Edge画布尺寸画布过大超过 4096x4096缩小画布或降低分辨率图层数量图层过多合成开销大合并已完成图层笔刷间距间距过小绘制调用过多把间距调到 20% 以上硬件加速浏览器未开启硬件加速在浏览器设置里开启内存占用同时打开了多个标签页关闭其他标签页释放内存我遇到最多的情况是画布尺寸过大。很多人习惯开 5000x5000 的画布觉得“大就是好”但实际上屏幕显示根本用不到那么大的分辨率。除非你要印刷否则 2048x2048 足够用了。画布尺寸减半像素数量减少到四分之一性能提升非常明显。4.2 导出失败或文件损坏的处理导出失败通常有两个原因内存不足或浏览器限制。如果画布尺寸超过 8192 像素某些浏览器会直接拒绝导出。这时候需要先缩小画布或者分块导出。分块导出的操作方法是用矩形选择工具选中画布的一部分然后导出选区。重复这个操作直到覆盖整个画布。最后在外部软件里拼接。虽然麻烦但能解决大尺寸导出的问题。文件损坏的情况比较少见通常是因为导出过程中浏览器标签页被关闭或刷新。建议导出时不要切换标签页等进度条走完再操作。4.3 素材导入后的颜色偏差有用户反馈导入的图片在 artcraft 里看起来比原图“灰”一些。这是因为颜色空间的问题。artcraft 默认使用 sRGB 颜色空间如果你的图片是 Adobe RGB 或 ProPhoto RGB导入时会被转换到 sRGB导致颜色变淡。解决方法是在导入前先把图片转换为 sRGB。如果你用 Photoshop可以在“编辑”菜单里找到“转换为配置文件”选择 sRGB IEC61966-2.1。如果你用其他工具找类似的颜色空间转换选项。转换后再导入颜色就一致了。4.4 快捷键冲突与自定义artcraft 的默认快捷键参考了主流绘画软件的习惯B 是笔刷E 是橡皮擦CtrlZ 是撤销CtrlShiftZ 是重做空格键是临时切换到抓手工具。但如果你同时安装了浏览器插件某些快捷键可能会被拦截。排查方法是打开浏览器的扩展管理页面逐个禁用插件看问题是否消失。找到冲突的插件后要么禁用要么在插件设置里修改快捷键。如果不想折腾可以直接在 artcraft 的设置里重新映射快捷键。设置文件是 JSON 格式改起来很直观。实操心得我习惯把“撤销”改成 CtrlAltZ因为 CtrlZ 在很多软件里是“撤销”但在某些浏览器里是“恢复关闭的标签页”。改成 CtrlAltZ 之后再也没有误触过。4.5 项目文件丢失的预防措施artcraft 有自动保存功能默认每 30 秒保存一次到 IndexedDB。但 IndexedDB 是浏览器级别的存储如果你清理了浏览器数据自动保存的草稿也会丢失。所以重要作品一定要手动导出项目文件。我的做法是每完成一个阶段比如线稿完成、底色完成就手动导出一次项目文件命名带上日期和版本号。比如插画项目_20250101_v1.artcraft。这样即使浏览器数据丢了也能从项目文件恢复。另外项目文件里引用的是素材的路径或 ID不是素材本身。如果你把项目文件拷贝到另一台电脑素材可能会丢失。所以要么把素材和项目文件放在同一个文件夹里一起拷贝要么在导出项目文件时选择“嵌入素材”选项。嵌入素材会让文件变大但保证了可移植性。5. 扩展方向与个人体会artcraft 目前的功能已经覆盖了从绘制到导出的完整流程但还有一些可以继续打磨的地方。比如笔刷引擎可以加入纹理笔尖让笔触更有质感图层系统可以加入图层组和蒙版方便管理复杂作品导出可以加入批量处理一次导出多个尺寸。如果你打算基于 artcraft 做二次开发我建议从笔刷预设入手。现在的笔刷参数是硬编码在代码里的你可以把它们抽出来做成 JSON 配置文件让用户自己导入导出笔刷。这个改动不大但能显著提升工具的扩展性。我在实际使用中体会最深的一点是工具的价值不在于功能多少而在于能不能让创作者进入“心流”状态。artcraft 的很多设计决策——比如简化图层面板、把常用参数放在一级菜单、减少弹窗打断——都是围绕这个目标做的。有时候少一个功能反而让创作更顺畅。最后分享一个小技巧如果你觉得画出来的线条总是“抖”不一定是工具的问题可能是握笔姿势或屏幕刷新率的问题。试试把画布放大到 200% 再画或者换一块刷新率 120Hz 以上的屏幕。很多时候硬件升级比软件优化更立竿见影。
1. 项目缘起与整体设计思路1.1 为什么会有 artcraft 这个想法先说说 artcraft 到底是个什么东西。简单讲它是一个面向创意工作者的轻量级艺术创作工具集核心定位是“把零散的艺术创作流程串成一条线”。你可以把它理解成一个工作台左边是素材管理中间是画布或编辑区右边是参数调节和导出选项。它不追求大而全而是针对插画、手绘、拼贴、纹理生成这几类高频场景做了深度优化。我做这个项目的出发点很直接。市面上主流的创作软件要么太重打开就要等半天功能菜单层层叠叠找个笔刷设置要翻五级菜单要么太轻轻到连图层混合模式都不支持画到一半就得换工具。artcraft 想卡在中间那个位置——启动快、核心功能齐全、扩展性强。适合谁用独立插画师、手账爱好者、做社交媒体配图的运营人员以及想给孩子做简单绘画工具的父母。不需要你会写代码但如果你懂一点前端可以自己改主题和快捷键。关键词里提到的“artcraft”本身就是一个合成词art 加 craft直译就是“艺术手艺”。这个名字定下来之前我试过好几个方向比如叫“sketchbox”“paintflow”但都觉得太泛。artcraft 的好处是它同时暗示了“艺术性”和“手工感”跟项目想传达的“工具应该像趁手的画笔一样自然”这个理念是吻合的。1.2 技术选型背后的取舍逻辑整个项目基于 Web 技术栈构建核心是 Canvas API 加 WebGL 做混合渲染。为什么不用纯 SVG因为 SVG 在处理大量笔触路径时性能下降非常明显尤其是当图层数量超过 20 个、每个图层有上千个路径点时拖动一下画布就能感觉到明显卡顿。Canvas 2D 在中等复杂度下表现更好而 WebGL 负责处理滤镜和混合模式这类像素级操作。框架层面选了轻量级的响应式方案没有上重型框架。原因很简单artcraft 的交互逻辑集中在画布区域UI 部分只有工具栏、图层面板和属性面板三块用原生模块化加少量状态管理就够了。引入大型框架反而会增加打包体积和启动时间。实测下来生产环境构建后的首屏加载时间控制在 1.2 秒以内这个数字在同类工具里算比较靠前的。存储方案用的是 IndexedDB 加本地文件系统双通道。IndexedDB 负责自动保存草稿和缩略图缓存本地文件系统通过 File System Access API 实现“另存为”和“打开项目”。这里有个细节不是所有浏览器都支持 File System Access API所以做了降级处理——不支持的时候自动切换到下载/上传模式。这个判断逻辑写在初始化阶段用户无感知。1.3 整体架构分层项目分成四层从下往上依次是渲染层Canvas 2D 负责笔触绘制和图层合成WebGL 负责滤镜链和混合模式。两层之间通过一个共享的帧缓冲对象做数据交换。数据层管理图层树、笔触历史、素材库索引。所有数据操作都走一个统一的状态机保证撤销/重做的一致性。交互层处理鼠标、触控笔、键盘快捷键的输入事件。这里做了防抖和节流避免高频事件阻塞渲染。UI 层工具栏、面板、对话框。样式用 CSS 变量管理方便换主题。分层的好处是每层可以独立测试。比如渲染层的笔触平滑算法我写了一套模拟输入数据的测试用例不依赖真实鼠标事件就能验证不同压感曲线下的表现。2. 核心功能模块拆解与实操要点2.1 笔触引擎从“能画”到“好画”的关键细节笔触引擎是 artcraft 最核心的模块也是花时间最多的部分。一个基本的笔触绘制流程是这样的监听指针事件 → 采集坐标和压感 → 对坐标做平滑处理 → 根据压感计算笔刷半径和透明度 → 在 Canvas 上绘制线段或 stamp。听起来简单但坑非常多。第一个坑是坐标采集频率。不同设备的指针事件触发频率不一样有的鼠标 125Hz有的触控笔 240Hz高刷新率屏幕下甚至能到 360Hz。如果每个事件都直接画一个点低频率设备上笔触会显得很“碎”高频率设备上又会重复绘制导致颜色过深。我的做法是引入一个时间窗口把 16 毫秒内的多个事件合并成一个绘制批次取平均坐标和最大压感。这样既平滑了笔触又减少了绘制调用次数。第二个坑是压感曲线。很多触控笔默认的压感响应是线性的但人的手部力量变化其实更接近指数分布——轻轻画的时候力量变化小用力画的时候力量变化大。所以 artcraft 内置了三条压感曲线线性、柔和、强烈。柔和曲线适合勾线强烈曲线适合铺色。你可以在设置里切换也可以自己拖拽控制点自定义。第三个坑是笔刷 stamp 的间距。如果间距太大快速画线时笔触会断成一个个圆点间距太小又会造成大量重叠绘制性能急剧下降。经过反复测试间距设为笔刷半径的 15% 到 25% 之间比较合适。具体数值取决于笔刷的软硬程度硬边笔刷用 15%软边笔刷用 25%。这个参数在代码里是一个常量但暴露在了高级设置里方便有经验的用户微调。注意如果你在开发类似的笔触引擎千万不要在 pointermove 事件里直接调用 canvas 的绘制方法。正确做法是把事件数据推入一个队列在 requestAnimationFrame 回调里统一处理。否则在低端设备上会出现明显的输入延迟。2.2 图层系统混合模式与性能的平衡图层是数字绘画的基础设施。artcraft 的图层系统支持无限层级、拖拽排序、显示/隐藏、锁定、透明度调节以及 12 种混合模式。混合模式的实现分两类一类是 Canvas 2D 原生支持的比如 multiply、screen、overlay直接用 globalCompositeOperation 就行另一类是 Canvas 2D 不支持的比如 color burn、linear light需要用 WebGL 写 shader 来实现。这里有个性能取舍。每次切换混合模式或者调整图层顺序都需要重新合成整个画布。如果图层数量多、画布尺寸大合成一次可能要几十毫秒。为了减少不必要的合成我做了一个脏标记机制只有被修改的图层及其上方图层会被标记为“需要重新合成”下方的图层直接复用上一帧的缓存。实测下来在 20 个图层、2048x2048 画布的场景下单次笔触的合成时间从 45 毫秒降到了 12 毫秒左右。另一个细节是图层缩略图的生成。如果每次笔触结束都重新生成缩略图会浪费大量 CPU。我的策略是延迟生成笔触结束后启动一个 500 毫秒的定时器如果这段时间内没有新的笔触才生成缩略图。如果用户连续画了很多笔缩略图只会在最后生成一次。2.3 素材库与标签管理素材库支持导入图片、颜色板、笔刷预设和纹理。导入的图片会自动生成三个尺寸的缩略图小图用于列表展示中图用于预览原图用于拖拽到画布。缩略图生成用的是 OffscreenCanvas在 Worker 线程里完成不阻塞主线程。标签管理这块我参考了文件系统的思路但做了一些简化。每个素材可以打多个标签标签之间是平级关系没有层级。为什么不做层级标签因为实际用下来层级标签在素材数量少于 500 个的时候反而增加认知负担。平级标签加搜索框的组合更直接。搜索支持模糊匹配输入“天空”能匹配到“天空纹理”“蓝天背景”“星空笔刷”这些素材。实操心得素材导入时最好做一次格式校验和尺寸限制。我遇到过用户导入 8000x8000 的图片直接导致内存溢出。现在的策略是超过 4096 像素的图片自动等比缩放到 4096并且提示用户“图片已缩放以适应画布”。这个提示很重要不然用户会觉得工具“偷”了他的画质。2.4 导出与分享格式选择与参数计算导出支持 PNG、JPEG、WebP 三种格式。PNG 支持透明通道适合需要后期合成的场景JPEG 体积小适合社交媒体分享WebP 兼顾体积和质量但部分老设备不支持。默认导出格式是 PNG因为创作工具的用户对透明通道有刚需。导出尺寸的计算逻辑是这样的如果用户没有指定就按画布的原始尺寸导出。如果指定了宽度高度按原始宽高比自动计算。这里有个容易忽略的点导出时的 DPI 元数据。很多印刷场景需要 300 DPI但屏幕显示只需要 72 DPI。artcraft 在导出对话框里放了一个 DPI 选项默认 72可以改成 300。注意改变 DPI 不会改变像素尺寸只是写入元数据。如果你需要实际放大像素应该用“缩放导出”功能那个会做重采样。导出过程是异步的用到了 Canvas 的 toBlob 方法。大尺寸画布导出时toBlob 可能会阻塞主线程几百毫秒。我的优化方案是先把画布内容复制到一个离屏 Canvas然后在 Worker 里调用 convertToBlob。这样主线程不会卡顿导出进度条也能流畅更新。3. 完整实操流程从零开始创作一幅作品3.1 环境准备与项目初始化假设你已经拿到了 artcraft 的源码第一步是安装依赖。项目用的是 npm 作为包管理器Node 版本要求 18 以上。安装命令很标准npm install安装完成后开发模式启动npm run dev这时候会启动一个本地开发服务器默认端口 5173。打开浏览器访问 localhost:5173 就能看到界面。如果你需要构建生产版本npm run build构建产物在 dist 目录下是一组静态文件可以直接部署到任何静态服务器。这里有个小细节项目根目录下有一个artcraft.config.js文件里面可以配置默认画布尺寸、默认笔刷、快捷键映射等。我建议第一次使用时先把这个文件过一遍把默认画布尺寸改成你常用的尺寸。比如你主要画社交媒体配图可以改成 1080x1080如果画插画可以改成 2480x3508A4 300DPI。3.2 画布设置与素材导入打开 artcraft 后第一件事是新建画布。点击左上角的“新建”按钮弹出对话框。这里需要填三个参数宽度、高度、背景色。背景色有三个选项白色、透明、自定义。如果你打算后期合成选透明如果直接输出选白色。新建完成后进入主界面。左侧是工具栏中间是画布右侧是图层面板和属性面板。先别急着画建议先把常用素材导入进来。点击素材库面板的“导入”按钮选择你的图片文件。支持多选一次可以导入几十张。导入过程中会显示进度条大文件可能需要几秒钟。导入完成后素材会以网格形式展示。你可以给素材打标签方便后续搜索。比如把所有的天空素材打上“天空”标签把人物素材打上“人物”标签。标签的输入框在素材预览图的右下角点击加号就能添加。3.3 笔刷配置与压感测试在开始画之前花两分钟配置笔刷是值得的。点击工具栏的笔刷图标展开笔刷面板。artcraft 内置了 8 种基础笔刷硬圆笔、软圆笔、铅笔、马克笔、水彩笔、喷枪、橡皮擦、涂抹工具。每种笔刷都可以调节大小、硬度、间距、流量、压感影响。我的建议是先选硬圆笔把大小调到 10 像素左右硬度 100%间距 15%流量 100%压感影响只勾选“大小”。然后在画布上画几条线感受一下压感响应。如果觉得轻画时线条太细可以切换到“柔和”压感曲线如果觉得重画时线条太粗可以降低压感影响的最大值。注意不同品牌的触控笔压感范围不一样。有的笔在 artcraft 里默认压感偏弱这时候不要急着换笔刷先去设置里把压感曲线的整体增益调高 20% 到 30%。这个设置在图层面板下方的“输入设置”里。3.4 分层绘制与混合模式应用正式绘制时养成分层的好习惯。我的分层策略是这样的背景层填充底色或导入背景图。草稿层用铅笔笔刷画大致构图透明度调到 30% 左右。线稿层用硬圆笔勾线放在草稿层上方。底色层用马克笔或水彩笔铺大色块混合模式设为“正常”。阴影层用软圆笔画阴影混合模式设为“正片叠底”。高光层用喷枪画高光混合模式设为“叠加”或“滤色”。调整层最后加一个调整层微调色相、饱和度、亮度。每画完一个图层可以点一下图层旁边的锁图标防止误触。如果某个图层画错了直接删掉重来不影响其他图层。混合模式的实际效果需要多试。比如“正片叠底”适合画阴影因为它会让下层颜色变暗“叠加”适合画高光因为它会增加对比度“颜色减淡”适合画发光效果但容易过曝要配合低透明度使用。3.5 导出与后期处理画完之后点击右上角的“导出”按钮。选择 PNG 格式尺寸保持原始大小DPI 设为 72屏幕显示或 300印刷。点击“导出”后浏览器会下载一个 PNG 文件。如果你需要进一步后期处理可以把 PNG 导入到其他软件里。artcraft 的导出不带任何水印也不限制商用。但建议保留一份项目文件.artcraft 格式方便以后修改。项目文件里包含了所有图层、笔刷设置和素材引用体积比 PNG 大但信息完整。4. 常见问题与排查技巧实录4.1 笔触延迟与卡顿的排查思路笔触延迟是最影响体验的问题。如果你感觉画的时候线条“跟不上”手按以下顺序排查排查项可能原因解决方法浏览器使用了不支持的浏览器换用最新版 Chrome 或 Edge画布尺寸画布过大超过 4096x4096缩小画布或降低分辨率图层数量图层过多合成开销大合并已完成图层笔刷间距间距过小绘制调用过多把间距调到 20% 以上硬件加速浏览器未开启硬件加速在浏览器设置里开启内存占用同时打开了多个标签页关闭其他标签页释放内存我遇到最多的情况是画布尺寸过大。很多人习惯开 5000x5000 的画布觉得“大就是好”但实际上屏幕显示根本用不到那么大的分辨率。除非你要印刷否则 2048x2048 足够用了。画布尺寸减半像素数量减少到四分之一性能提升非常明显。4.2 导出失败或文件损坏的处理导出失败通常有两个原因内存不足或浏览器限制。如果画布尺寸超过 8192 像素某些浏览器会直接拒绝导出。这时候需要先缩小画布或者分块导出。分块导出的操作方法是用矩形选择工具选中画布的一部分然后导出选区。重复这个操作直到覆盖整个画布。最后在外部软件里拼接。虽然麻烦但能解决大尺寸导出的问题。文件损坏的情况比较少见通常是因为导出过程中浏览器标签页被关闭或刷新。建议导出时不要切换标签页等进度条走完再操作。4.3 素材导入后的颜色偏差有用户反馈导入的图片在 artcraft 里看起来比原图“灰”一些。这是因为颜色空间的问题。artcraft 默认使用 sRGB 颜色空间如果你的图片是 Adobe RGB 或 ProPhoto RGB导入时会被转换到 sRGB导致颜色变淡。解决方法是在导入前先把图片转换为 sRGB。如果你用 Photoshop可以在“编辑”菜单里找到“转换为配置文件”选择 sRGB IEC61966-2.1。如果你用其他工具找类似的颜色空间转换选项。转换后再导入颜色就一致了。4.4 快捷键冲突与自定义artcraft 的默认快捷键参考了主流绘画软件的习惯B 是笔刷E 是橡皮擦CtrlZ 是撤销CtrlShiftZ 是重做空格键是临时切换到抓手工具。但如果你同时安装了浏览器插件某些快捷键可能会被拦截。排查方法是打开浏览器的扩展管理页面逐个禁用插件看问题是否消失。找到冲突的插件后要么禁用要么在插件设置里修改快捷键。如果不想折腾可以直接在 artcraft 的设置里重新映射快捷键。设置文件是 JSON 格式改起来很直观。实操心得我习惯把“撤销”改成 CtrlAltZ因为 CtrlZ 在很多软件里是“撤销”但在某些浏览器里是“恢复关闭的标签页”。改成 CtrlAltZ 之后再也没有误触过。4.5 项目文件丢失的预防措施artcraft 有自动保存功能默认每 30 秒保存一次到 IndexedDB。但 IndexedDB 是浏览器级别的存储如果你清理了浏览器数据自动保存的草稿也会丢失。所以重要作品一定要手动导出项目文件。我的做法是每完成一个阶段比如线稿完成、底色完成就手动导出一次项目文件命名带上日期和版本号。比如插画项目_20250101_v1.artcraft。这样即使浏览器数据丢了也能从项目文件恢复。另外项目文件里引用的是素材的路径或 ID不是素材本身。如果你把项目文件拷贝到另一台电脑素材可能会丢失。所以要么把素材和项目文件放在同一个文件夹里一起拷贝要么在导出项目文件时选择“嵌入素材”选项。嵌入素材会让文件变大但保证了可移植性。5. 扩展方向与个人体会artcraft 目前的功能已经覆盖了从绘制到导出的完整流程但还有一些可以继续打磨的地方。比如笔刷引擎可以加入纹理笔尖让笔触更有质感图层系统可以加入图层组和蒙版方便管理复杂作品导出可以加入批量处理一次导出多个尺寸。如果你打算基于 artcraft 做二次开发我建议从笔刷预设入手。现在的笔刷参数是硬编码在代码里的你可以把它们抽出来做成 JSON 配置文件让用户自己导入导出笔刷。这个改动不大但能显著提升工具的扩展性。我在实际使用中体会最深的一点是工具的价值不在于功能多少而在于能不能让创作者进入“心流”状态。artcraft 的很多设计决策——比如简化图层面板、把常用参数放在一级菜单、减少弹窗打断——都是围绕这个目标做的。有时候少一个功能反而让创作更顺畅。最后分享一个小技巧如果你觉得画出来的线条总是“抖”不一定是工具的问题可能是握笔姿势或屏幕刷新率的问题。试试把画布放大到 200% 再画或者换一块刷新率 120Hz 以上的屏幕。很多时候硬件升级比软件优化更立竿见影。
