Code Monkey home page Code Monkey logo

paint-board's Introduction

logo

A fun art drawing board that supports multi-end operation

English | 简体中文

Preview

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

preview

Completed Features:

  • Drawing Mode
    • FreeStyle
      • 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.
    • ShapeDraw
      • A variety of common shapes are provided for drawing, with support for multi-point segments and arrows. The shapes support border and fill styles.
  • 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.
    • Supports font and style 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.
    • The drawing board supports customized width and height 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.
    • Added Guide Line drawing feature.
  • 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.

Future Plans

  • Multi-platform authentication login and data synchronization
  • AI Enhanced Drawing

V1.0.0 Video Demo

v1.0.0 demo youtube

Quick Start

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

Docker Support

  1. Build a Docker image with the name paint-board.
docker build -t paint-board .
  1. Start a docker container.
docker run -d -p 8080:80 --name paint-board paint-board
  1. Accessed by opening http://localhost:8080/paint-board/ in your browser.

Contact me

If you have any suggestions or good ideas, welcome to contact me at any time!

Buy the author a coffee.

👋 If you think my project is cool and want to support my development work, feel free to buy me a cup of coffee with Alipay or WeChat ~

wechat wechat

Contributing

I'm glad you're interested in contributing to PAINT BOARD. If you find a bug and want to fix it, please submit it in an Issue first. For new feature additions, please contact us in Discussions, or directly through the contact details provided above, and read the Contribution Guidelines below before contributing. Thank you for your support!

Contribution Guidelines

Document

License

MIT License. See the LICENSE file.

paint-board's People

Contributors

lhrun avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.