當前位置: 華文世界 > 數位

推薦一款強大多端畫板 paint-board 工具

2024-02-13數位

大家好,很高興又見面了,我是" 高級前端‬進階 ‬",由我帶著大家一起關註前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關註、點贊、收藏、轉發!

什麽是 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/