打破界限，随心所欲绘！NAS带你体验多端操作的paint-board艺术之旅！

「大家好，我是熊猫，你的NAS领航员。NAS不只是存储那么简单，数码也可以是生活，关注我，给你的生活加点'技'趣！」

引言

paint-board这个项目其实很早就有了，但不知道为什么网上一直没有教程，但其实熊猫还是蛮喜欢这个项目的。用NAS搭建画板其实它不是独一家，但论趣味性它肯定是最有趣的，非常适合搭建之后用平板或者触控屏之类的设备玩玩。

项目

特性：

• 绘画模式
  • 自由绘画
    • 提供了 12 种不同风格的画笔，包括基本画笔，彩虹画笔，多形状画笔，多素材画笔，像素画笔，多色画笔，文字画笔，多线连接画笔，网状画笔，多点连接画笔，波浪曲线画笔，荆棘画笔。以满足多样化的绘画需求。
    • 所有画笔均支持颜色和画笔宽度的配置，另外多形状、多素材、多色等画笔支持定制化配置。
  • 形状绘制
    • 提供了多种常见形状的绘制,并支持多端点线段以及箭头,并且这些形状均支持边框和填充的样式配置。
• 橡皮擦模式
  • 橡皮擦模式可线性擦除所有内容，并支持线性宽度配置。
• 选择模式
  • 在选择模式下，可以通过点击绘画内容进行框选。点击手柄支持拖拽、缩放和旋转操作，提供灵活的编辑方式。
  • 选择图片支持多种滤镜配置。
  • 选择文字时，支持字体和样式设置。
  • 所有绘制内容均支持图层设置，包括向上移动层级、向下移动层级、移动至顶层和移动至底层。
  • 所有绘制内容支持透明度配置。
• 画板配置
  • 画板支持配置背景配置, 包括颜色, 背景图, 透明度。
  • 画板支持自定义宽高配置。
  • 支持绘画缓存，在存在大量绘制内容的情况下，启用缓存将提高绘制性能，而禁用缓存则会提升画布清晰度。
  • 新增辅助线绘制功能。
• 多功能菜单
  • 左下角按钮实时显示当前缩放比例，点击即可重置缩放比例。
  • 中间按钮列表按从左到右的功能分别为：撤销、反撤销、复制当前选择内容、删除当前选择内容、绘制文字、上传图片、清除绘制内容、保存为图片、打开文件列表。
  • 电脑端：
    • 按住 Space 键并点击鼠标左键可移动画布，滚动鼠标滚轮实现画布缩放。
    • 按住 Backspace 键可删除已选内容。
    • 同时按住 Ctrl 键 + V 键可粘贴剪贴板图片。
  • 移动端：
    • 支持双指按压后拖拽和缩放画布。
• 多文件配置
  • 支持多个画布切换，每个画布可自定义标题、增加、删除，并提供上传和下载功能。
• 国际化
  • 目前支持中文，英文两种语言展示。

目前的功能已经足够多了，后续作者会增加AI以及多平台认证和数据同步的功能。

部署

该项目没有已经做好的镜像，所以需要我们自行构建镜像，项目也是开源的所以直接去github下载源文件就可以了，这里贴一个项目地址，如果有github账号记得给作者点个星。

项目地址

为了确保万无一失，这里熊猫建议直接将整个项目下载下来，而不是单独下载Dockerfile文件，这样可以避免一些环境或者依赖的丢失。下载之后新建好paint-board文件夹，再将下载的压缩文件解压到此文件夹。

项目解压

这时候还不急构建项目，因为目前dockerhub因为一些原因不能直接连接，但构建镜像一定会用到一些环境和依赖，这时候我们文本形式打开Dockerfile文件，找到代码前缀为FROM xxxx的内容，这些就是构件中需要用到的东西。

构建环境

常规是没有带上加速地址的，所以这里我们需要给后面的镜像加上加速地址，例如熊猫常用的dockerpull.com或者docker.1panel.live，那个能用就用那个，使用之前可以用命令行ping以下这些网站看看是否连通。

修改之后

修改之后保存文件，随后打开NAS的SSH端口，连接上之后通过cd命令移动到Dockerfile文件所在目录，执行镜像构建命令docker build -t paint-board .（注意，这里是空一格然后一个小数点）

镜像构建

耐心等待镜像构建完成，可能会比较久，构建完成之后能在docker的本地镜像中看到名为paint-board的镜像。这时候我们再执行命令docker run -d -p 8020:80 --name paint-board paint-board就能启动项目了，本地端口如果有冲突记得自行更改。

image.png

如果遇到这样的报错，说明npm版本太低，可使用命令npm install -g npm@10.8.3更新npm版本，随后再重新构建镜像。

体验

项目部署成功之后浏览器输入NASIP:8020/paint-board/就能访问项目页面了。

项目界面

画板有自由绘画和形状绘画两种方式，顾名思义，一个自由发挥一个用预设的一些形状来画画。

演示

自由绘画中又分为了很多风格，例如基础、彩虹、多形状、素材、像素以及多色和文字等等。每样都尝试了一下，有些风格挺有趣的，例如文字、波浪曲线以及多点连接这种。

风格绘画

在基础这一风格中，我们能看到还提供了谷歌AI的功能，打开此功能后右上角会出现一个选择框，随便画点东西，这里便会根据你画的内容AI生成一些选项，点击之后便会将当前画的内容更换为AI提供的内容。

AI绘画

总结

蛮有趣的项目，使我的NAS焕发活力。部署之后给家里小熊猫拿来画画，她还蛮开心的，感兴趣的也可以尝试自部署玩玩。

以上便是本期的全部内容了，如果你觉得还算有趣或者对你有所帮助，不妨点赞收藏，最后也希望能得到你的关注，咱们下期见！

三连

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～

,