lllleeo / paint-board

Canvas based drawing board, including free drawing, eraser, text, select, layer, undo, redo, clear, save, drag

A fun art drawing board that supports multi-end operation

English | 简体中文

Preview

Link: https://songlh.top/paint-board/

Completed Features:

• Drawing Mode
  • Provides 12 different styles of brushes, including Basic Brush, Rainbow Brush, Multi-Shape Brush, Multi-Material Brush, Pixel Brush, Multi-Color Brush, Text Brush, Multi-Line Connection Brush, Reticulate Brush, Multi-Point Connection Brush, Wiggle Brush, Thorn Brush. Satisfy the diversified drawing.
  • All brushes support color and brush width configuration, in addition to multi-shape, multi-material, multi-color and other brushes support custom configuration.
• Eraser Mode
  • Eraser mode linearly erases all content and supports linear width configuration.
• Select Mode
  • In the selection mode, you can frame the drawing content by clicking on it. The click handle supports dragging, zooming and rotating operations, providing flexible editing.
  • Selecting images supports multiple filter configurations.
  • Support for font settings when selecting text.
  • Layer settings are supported for all drawings, including Move Layer Up, Move Layer Down, Move to Top, and Move to Bottom.
  • All drawings support transparency configurations.
• Drawing Board Configuration
  • Drawing board support for configuring background color and transparency configurations.
  • Supports painting caching, enabling caching will improve painting performance in the presence of large amounts of painted content, while disabling caching will improve canvas sharpness.
• Multifunction Menu
  • The bottom left button shows the current zoom ratio in real time, click it to reset the zoom ratio.
  • The list of buttons in the center, in order from left to right, are: Undo, Redo, Copy Current Selection, Delete Current Selection, Draw Text, Upload Image, Clear Drawing, Save as Image, and Open File List.
  • PC:
    • Hold down the Space key and click the left mouse button to move the canvas, scroll the mouse wheel to zoom the canvas.
    • Press and hold the Backspace key to delete the selection.
    • Press and hold Ctrl + V at the same time to paste the clipboard image.
  • Mobile:
    • Supports dragging and zooming the canvas after a two-finger press.
• Multifile Configuration
  • Support multiple canvas switching, each canvas can be customized title, add, delete, and provide upload and download
• i18n
  • Currently support English, Chinese language display

Pending Features:

• Multi-platform authentication login and data synchronization

Video Demo

Quick Start

git clone https://github.com/LHRUN/paint-board.git
pnpm install
pnpm dev

Document

• After refactoring with Fabric.js
  • writing...
• Before refactoring with Fabric.js
  • Canvas Artistry：Mastering Selection, Dragging, and Scaling
  • Canvas Artistry：Drawing magic with multiple effects