大家好，欢迎来到IT知识分享网。

大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 paint-board

paint-board 是一款支持多端操作的趣味美术画板，包括：强大的多端画板，汇聚海量创意画笔，体验全新的绘画效果！

A powerful multi-end drawing board that brings together a lot of creative brushes to experience a whole new range of drawing effects!

paint-board 支持以下核心能力：

绘图 / 橡皮擦模式

• 提供 12 种不同风格的画笔，包括基本画笔、彩虹画笔、多形状画笔、多材质画笔、像素画笔、多色画笔、文本画笔、多线连接画笔、网状画笔、多点连接画笔、 摆动刷，荆棘刷。 满足多样化绘图。
• 所有画笔都支持颜色和画笔宽度配置，此外多形状、多材质、多颜色等画笔支持自定义配置。
• 橡皮擦模式线性擦除所有内容，支持线性宽度配置。

选择模式

• 在选择模式下，可以通过单击来框选绘图内容。 点击手柄支持拖动、缩放和旋转操作，提供灵活的编辑。
• 选择图像支持多种过滤器配置。
• 选择文本时支持字体设置。
• 所有绘图都支持图层设置，包括上移图层、下移图层、移至顶部和移至底部。
• 所有绘图都支持透明度配置。

绘图板配置 / 多功能菜单 / 国际化

• 绘图板支持配置背景颜色和透明度配置。
• 支持绘画缓存，启用缓存将提高存在大量绘画内容时的绘画性能，而禁用缓存将提高画布清晰度。
• 左下按钮实时显示当前缩放比例，点击可重置缩放比例。
• 中间的按钮列表从左到右依次为：撤消、重做、复制当前选择、删除当前选择、绘制文本、上传图像、清除绘图、另存为图像和打开文件列表。
• 个人电脑按住空格键并单击鼠标左键可移动画布，滚动鼠标滚轮可缩放画布、按住退格键可删除选择、同时按住 Ctrl + V 粘贴剪贴板图像。
• 移动端支持两指按下后拖动和缩放画布、多文件配置、支持多个画布切换，每个画布可自定义标题，添加、删除，并提供上传下载
• 目前支持英文、中文语言显示

目前 paint-board 在 Github 通过 MIT 协议开源，有超过 1.1k 的 star，是一个值得关注的前端开源项目。

如何使用 paint-board

可以通过下面方式直接安装：

git clone https://github.com/LHRUN/paint-board.git
pnpm install
pnpm dev

paint-board 也支持 Docker 部署：

• 构建一个名为 “paint-board” 的 Docker 镜像

docker build -t paint-board .

• 启动一个 Docker 容器

docker run -d -p 8080:80 --name paint-board paint-board

• 在浏览器中打开 http://localhost:8080/paint-board/ 进行访问。

关于 paint-board 的更多文章可以查看以下专题：

• After refactoring with Fabric.js：Exploring the Canvas Series: The Art of Time Reversal in the Canvaswriting…
• Before refactoring with Fabric.js：Canvas Artistry：Mastering Selection, Dragging, and ScalingCanvas Artistry：Drawing magic with multiple effects

本文总结

本文主要和大家介绍 paint-board ，其是一款支持多端操作的趣味美术画板，包括：强大的多端画板，汇聚海量创意画笔，体验全新的绘画效果！ 因为篇幅问题，关于 paint-board 只是做了一个简短的介绍，但是文末的参考资料以及个人主页提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/LHRUN/paint-board

Build A Drawing App in HTML CSS & JavaScript

Drawing App Javascript

https://www.youtube.com/watch?app=desktop&v=y84tBZo8GFo

https://www.youtube.com/watch?app=desktop&v=y84tBZo8GFo

https://songlh.top/2024/01/10/Exploring-the-Canvas-Series-The-Art-of-Time-Reversal-in-the-Canvas/