分享一个基于 Canvas 的 WEB 端多功能画画板

[LHRUN]

分享一个我之前做的画画版，上一个功能迭代也是上半年的事情了，最近几个月被工作缠的一点时间都没有，只改了一点小的交互和 BUG 。然后最近终于有了些空闲，于是决定继续迭代，增加一些新功能。目前是有以下功能

1. 画笔: 支持颜色修改、动态线宽和多种画笔效果。
2. 橡皮擦: 通过鼠标线性移动来擦除内容。
3. 文字绘制: 双击画板可以绘制文字。
4. 拖拽功能: 按住空格键随意拖拽画布。
5. 选择模式: 通过点击元素进行元素框选，按住手柄可以缩放或移动元素，按下 Backspace 键可删除选中的元素。
6. 图层管理: 图层按照顺序进行显示，可以新增、删除和排序图层。
7. 撤销与保存: 支持撤销、反撤销、清除和保存功能。

接下来的计划是做移动端适配（这个优先级最高，现在只支持 PC ，我最初就是想做平板和移动端，用手指绘画，然后两指或三指拖拽缩放，但是一直没做到🤣）、背景颜色和图片切换、面板缩放以及登录与数据同步分享这几个功能。

分享出来是想让大家提提意见，看有什么酷炫的功能或者效果可以加入进去，当然，如果能给个 Star 就更棒了，哈哈😂

Github: https://github.com/LHRUN/paint-board
Link: https://songlh.top/paint-board

[deiphi]

绘画这些功能还是很赞，但是文字输入部分，个人认为有几点做得还不够好。

1 、在工具栏没有“输入文字”的图标或引导。
2 、文字输入后似乎不能修改文字内容和颜色。
3 、文字不能选择字体。

另外期待移动端适配：）

[zjsxwc]

up ，我有个需求，能不能粘贴我当前剪切板里复制过的图片，到图层里，然后能拖动被粘贴剪切板里图片的位置。

[liangxin1998]

@zjsxwc 那是你的需求不是 up 的需求

[HongXinss]

做的很棒，star 了

[PlanV]

真不错，很牛啊，star 了

[LHRUN]

@deiphi 多谢提议，1. 这个是要加的，如果现在没有看说明，应该没有人会想要双击的，即使双击了也不知道是要干什么。2. 这个我之前没有考虑过，但应该是个必须的功能。3. 这个我之后看一下可以怎么做，其实可以提供一些免费字体用于选择，比如谷歌的

[yangheng4922]

上层图层用橡皮檫的痕迹会盖住下面的图层

[LHRUN]

@zjsxwc
@liangxin1998
加载图片这个在我的计划之内，不过粘贴图片我之前没有想到，后面研究一下应该也会加上的

[LHRUN]

@yangheng4922 这个不知道是不是我的图层理解问题，也有别人给我提过，我认为上层图层的操作应该都会覆盖到下面的图层，包括橡皮擦，如果你不想要覆盖，应该要调换这个图层的顺序

[LHRUN]

@HongXinss
@PlanV
thanks 😘

[daydreamcafe]

做得很好，简单易用而且看了下代码，很简洁易懂，先 star 了，改天找个时间好好精读一下，感觉是个值得学习的 canvas 示例项目

[WesleyQin]

加载图片作为底层，调整图片的透明度。
支持 pad ，最好能支持笔触，ipad pencil 屏蔽手指误触
用来给小朋友临摹图片。

[yangheng4922]

@LHRUN #9
绘制操作是这样没错 橡皮檫的话不是传统的绘制操作 他应该是删除像素的
平时用的图像处理基本都是这样的 ps 这些

[LHRUN]

@daydreamcafe 谢谢，不过之前做的有些只考虑了功能，没考虑一些优化细节（部分逻辑有点烂😂），并且没有用任何 canvas 库，现在已经有点性能问题了，我现在也在想到底是坚持自己写，还是开始接入 canvas 库重写部分逻辑

[LHRUN]

@WesleyQin 误触这个之前没有了解过，后面看看相关文档。透明度这个是个好想法，多谢提议

[LHRUN]

@yangheng4922 那可能和我最初的设计有点出入了，不过多谢建议 😘

[sankooc]

不错 不错 star 了

[LHRUN]

@sankooc thanks 😘

[nicoljiang]

效果不粗，但是在 retina 上清晰度好像比较低。

[LHRUN]

@nicoljiang 记录了，后面我看看