Atrament 是一个用于在 HTML 画布上绘制和手写的库。它的目标是让绘图感觉自然舒适,结果平滑愉悦。Atrament 不会存储笔画路径本身 - 相反,它会直接绘制到画布位图上,就像一支墨水笔在一张纸上一样(“atrament”在斯洛伐克语和波兰语中意为墨水)。这使得它适用于某些应用程序,但对其他应用程序来说并不完全理想。它具备以下特点:
- 丰富的编辑能力:支持绘制/填充/擦除模式
- 自适应平滑:可调自适应平滑,让画笔更像手绘
- 丰富的事件系统:支持跟踪绘图的事件
- 画笔调节:支持画笔粗细与颜色调整。
⚠️ 注意:从版本 4 开始,Atrament 支持常青浏览器(Firefox、Chrome 和基于 Chromium 的浏览器)以及 Safari 15 或更高版本。如果您的应用程序必须支持旧版浏览器,请使用版本 3。您可以在这里查看 v3 的文档。
Atrament 实践
接下来将以 React
+ Atrament
实现一个画画面板。该画板具备以下功能:
- 背景设置
- 编辑面板:支持设置画笔粗细、颜色、平滑度、橡皮擦。
- 操作面板:上一步、下一步、下载图片。
作者:xiaoTuiMao
链接:juejin.cn/post/737394…
作者:魔法师
链接:juejin.cn/post/737365…