什么是 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.gitpnpm installpnpm 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
https://www.codingnepalweb.com/build-drawing-app-html-canvas-javascript/
https://codingartistweb.com/2022/03/drawing-app-javascript/#google_vignette
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/