「大家好，我是熊貓，你的nas領(lǐng)航員。NAS不只是存儲(chǔ)那么簡(jiǎn)單，數(shù)碼也可以是生活，關(guān)注我，給你的生活加點(diǎn)'技'趣！」

引言

paint-board這個(gè)項(xiàng)目其實(shí)很早就有了，但不知道為什么網(wǎng)上一直沒(méi)有教程，但其實(shí)熊貓還是蠻喜歡這個(gè)項(xiàng)目的。用NAS搭建畫(huà)板其實(shí)它不是獨(dú)一家，但論趣味性它肯定是最有趣的，非常適合搭建之后用平板或者觸控屏之類(lèi)的設(shè)備玩玩。

項(xiàng)目

特性：

• 繪畫(huà)模式
  • 自由繪畫(huà)
    • 提供了 12 種不同風(fēng)格的畫(huà)筆，包括基本畫(huà)筆，彩虹畫(huà)筆，多形狀畫(huà)筆，多素材畫(huà)筆，像素畫(huà)筆，多色畫(huà)筆，文字畫(huà)筆，多線連接畫(huà)筆，網(wǎng)狀畫(huà)筆，多點(diǎn)連接畫(huà)筆，波浪曲線畫(huà)筆，荊棘畫(huà)筆。以滿(mǎn)足多樣化的繪畫(huà)需求。
    • 所有畫(huà)筆均支持顏色和畫(huà)筆寬度的配置，另外多形狀、多素材、多色等畫(huà)筆支持定制化配置。
  • 形狀繪制
    • 提供了多種常見(jiàn)形狀的繪制,并支持多端點(diǎn)線段以及箭頭,并且這些形狀均支持邊框和填充的樣式配置。
• 橡皮擦模式
  • 橡皮擦模式可線性擦除所有內(nèi)容，并支持線性寬度配置。
• 選擇模式
  • 在選擇模式下，可以通過(guò)點(diǎn)擊繪畫(huà)內(nèi)容進(jìn)行框選。點(diǎn)擊手柄支持拖拽、縮放和旋轉(zhuǎn)操作，提供靈活的編輯方式。
  • 選擇圖片支持多種濾鏡配置。
  • 選擇文字時(shí)，支持字體和樣式設(shè)置。
  • 所有繪制內(nèi)容均支持圖層設(shè)置，包括向上移動(dòng)層級(jí)、向下移動(dòng)層級(jí)、移動(dòng)至頂層和移動(dòng)至底層。
  • 所有繪制內(nèi)容支持透明度配置。
• 畫(huà)板配置
  • 畫(huà)板支持配置背景配置, 包括顏色, 背景圖, 透明度。
  • 畫(huà)板支持自定義寬高配置。
  • 支持繪畫(huà)緩存，在存在大量繪制內(nèi)容的情況下，啟用緩存將提高繪制性能，而禁用緩存則會(huì)提升畫(huà)布清晰度。
  • 新增輔助線繪制功能。
• 多功能菜單
  • 左下角按鈕實(shí)時(shí)顯示當(dāng)前縮放比例，點(diǎn)擊即可重置縮放比例。
  • 中間按鈕列表按從左到右的功能分別為：撤銷(xiāo)、反撤銷(xiāo)、復(fù)制當(dāng)前選擇內(nèi)容、刪除當(dāng)前選擇內(nèi)容、繪制文字、上傳圖片、清除繪制內(nèi)容、保存為圖片、打開(kāi)文件列表。
  • 電腦端：
    • 按住 Space 鍵并點(diǎn)擊鼠標(biāo)左鍵可移動(dòng)畫(huà)布，滾動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)畫(huà)布縮放。
    • 按住 Backspace 鍵可刪除已選內(nèi)容。
    • 同時(shí)按住 Ctrl 鍵 + V 鍵可粘貼剪貼板圖片。
  • 移動(dòng)端：
    • 支持雙指按壓后拖拽和縮放畫(huà)布。
• 多文件配置
  • 支持多個(gè)畫(huà)布切換，每個(gè)畫(huà)布可自定義標(biāo)題、增加、刪除，并提供上傳和下載功能。
• 國(guó)際化
  • 目前支持中文，英文兩種語(yǔ)言展示。

目前的功能已經(jīng)足夠多了，后續(xù)作者會(huì)增加AI以及多平臺(tái)認(rèn)證和數(shù)據(jù)同步的功能。

部署

該項(xiàng)目沒(méi)有已經(jīng)做好的鏡像，所以需要我們自行構(gòu)建鏡像，項(xiàng)目也是開(kāi)源的所以直接去github下載源文件就可以了，這里貼一個(gè)項(xiàng)目地址，如果有g(shù)ithub賬號(hào)記得給作者點(diǎn)個(gè)星。

項(xiàng)目地址

為了確保萬(wàn)無(wú)一失，這里熊貓建議直接將整個(gè)項(xiàng)目下載下來(lái)，而不是單獨(dú)下載Dockerfile文件，這樣可以避免一些環(huán)境或者依賴(lài)的丟失。下載之后新建好paint-board文件夾，再將下載的壓縮文件解壓到此文件夾。

項(xiàng)目解壓

這時(shí)候還不急構(gòu)建項(xiàng)目，因?yàn)槟壳癲ockerhub因?yàn)橐恍┰虿荒苤苯舆B接，但構(gòu)建鏡像一定會(huì)用到一些環(huán)境和依賴(lài)，這時(shí)候我們文本形式打開(kāi)Dockerfile文件，找到代碼前綴為FROM xxxx的內(nèi)容，這些就是構(gòu)件中需要用到的東西。

構(gòu)建環(huán)境

常規(guī)是沒(méi)有帶上加速地址的，所以這里我們需要給后面的鏡像加上加速地址，例如熊貓常用的dockerpull.com或者docker.1panel.live，那個(gè)能用就用那個(gè)，使用之前可以用命令行ping以下這些網(wǎng)站看看是否連通。

修改之后

修改之后保存文件，隨后打開(kāi)NAS的SSH端口，連接上之后通過(guò)cd命令移動(dòng)到Dockerfile文件所在目錄，執(zhí)行鏡像構(gòu)建命令docker build -t paint-board .（注意，這里是空一格然后一個(gè)小數(shù)點(diǎn)）

鏡像構(gòu)建

耐心等待鏡像構(gòu)建完成，可能會(huì)比較久，構(gòu)建完成之后能在docker的本地鏡像中看到名為paint-board的鏡像。這時(shí)候我們?cè)賵?zhí)行命令docker run -d -p 8020:80 --name paint-board paint-board就能啟動(dòng)項(xiàng)目了，本地端口如果有沖突記得自行更改。

image.png

如果遇到這樣的報(bào)錯(cuò)，說(shuō)明npm版本太低，可使用命令npm install -g npm@10.8.3更新npm版本，隨后再重新構(gòu)建鏡像。

體驗(yàn)

項(xiàng)目部署成功之后瀏覽器輸入NASIP:8020/paint-board/就能訪問(wèn)項(xiàng)目頁(yè)面了。

項(xiàng)目界面

畫(huà)板有自由繪畫(huà)和形狀繪畫(huà)兩種方式，顧名思義，一個(gè)自由發(fā)揮一個(gè)用預(yù)設(shè)的一些形狀來(lái)畫(huà)畫(huà)。

演示

自由繪畫(huà)中又分為了很多風(fēng)格，例如基礎(chǔ)、彩虹、多形狀、素材、像素以及多色和文字等等。每樣都嘗試了一下，有些風(fēng)格挺有趣的，例如文字、波浪曲線以及多點(diǎn)連接這種。

風(fēng)格繪畫(huà)

在基礎(chǔ)這一風(fēng)格中，我們能看到還提供了谷歌AI的功能，打開(kāi)此功能后右上角會(huì)出現(xiàn)一個(gè)選擇框，隨便畫(huà)點(diǎn)東西，這里便會(huì)根據(jù)你畫(huà)的內(nèi)容AI生成一些選項(xiàng)，點(diǎn)擊之后便會(huì)將當(dāng)前畫(huà)的內(nèi)容更換為AI提供的內(nèi)容。

AI繪畫(huà)

總結(jié)

蠻有趣的項(xiàng)目，使我的NAS煥發(fā)活力。部署之后給家里小熊貓拿來(lái)畫(huà)畫(huà)，她還蠻開(kāi)心的，感興趣的也可以嘗試自部署玩玩。

以上便是本期的全部?jī)?nèi)容了，如果你覺(jué)得還算有趣或者對(duì)你有所幫助，不妨點(diǎn)贊收藏，最后也希望能得到你的關(guān)注，咱們下期見(jiàn)！

三連

作者聲明本文無(wú)利益相關(guān)，歡迎值友理性交流，和諧討論～

,