Skip to content

Latest commit

 

History

History
113 lines (99 loc) · 2.92 KB

README.en-US.md

File metadata and controls

113 lines (99 loc) · 2.92 KB

paint-board

Canvas based drawing board

English | 中文

Preview

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

Features

Completed Features：

  • free draw
    • color can be modified and line width can be displayed according to speed
    • multiple effects, fluorescent、multicolor、crayon、bubbles、spray
  • eraser
  • draw text, dclick the board to enter text
  • drawing board drag and drop
  • select mode, can zoom, move and delete(Backspace) elements
  • multi layer, can add, delete and sort
  • undo, redo, clean, save

Unfinished Features:

  • image
  • Infinite scaling
  • toggle background color
  • multi project
  • ...

Operation Guide

Getting Started

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

File List

├─components
│  ├─info // help info
│  ├─layer // multi layer
│  ├─mask // mask
│  ├─toolPanel // tool panel    
│  └─icons
│
├─hooks
│  └─event.ts // event hook
├─pages
│  └─board // board page
│
├─types
│
├─i18n
│
└─utils
  ├─constants
  ├─history.ts // history operation record
  ├─common.ts 
  ├─layer.ts // multi layer
  ├─paintBoard.ts // PaintBoard
  ├─storage.ts // localStorage cache
  ├─cursor.ts // mouse cursor
  ├─select.ts // select mode
  └─element
     ├─eraser.ts // eraser
     ├─element.ts // basic element
     ├─freeDraw.ts // free draw
     └─text.ts // text element

paint-board design

  1. First create a PaintBoard class，where all canvas data is processed, such as init, render, dragging...
class PaintBoard {
  canvas: HTMLCanvasElement
  context: CanvasRenderingContext2D
  ...
  constructor(canvas: HTMLCanvasElement) {}
  initCanvas() {}
  render() {}
  drag() {}
  ...
}
  1. Then according to the current operation, create the corresponding canvas element, such as freedraw, eraserm, text...
class CanvasElement {
  type: string
  layer: number
  // ...
  constructor(type: string, layer: number) {
    this.type = type
    this.layer = layer
    // ...
  }
  // ...
}
  1. Finally, some universal logic will be encapsulated to change the final display on canvas, such as undo, redo, layer...

Document