https://github.com/pengfeiw/react-paint

windows 画板 —— Microsoft Paint
https://github.com/pengfeiw/react-paint

canvas paint react reactjs typescript

Last synced: 26 days ago
JSON representation

windows 画板 —— Microsoft Paint

• Host: GitHub
• URL: https://github.com/pengfeiw/react-paint
• Owner: pengfeiw
• License: mit
• Created: 2021-06-15T00:48:12.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-07-15T23:03:17.000Z (over 2 years ago)
• Last Synced: 2023-11-07T17:11:55.945Z (about 1 year ago)
• Topics: canvas, paint, react, reactjs, typescript
• Language: TypeScript
• Homepage: https://pengfeiw.github.io/minicode/react-paint
• Size: 1.15 MB
• Stars: 111
• Watchers: 4
• Forks: 16
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Paint

[中文说明](./README_CN.md)

**Microsoft Paint** realized with reactjs.

online: [https://pengfeiw.github.io/minicode/react-paint](https://pengfeiw.github.io/minicode/react-paint)

![Microsoft Paint](https://cdn.jsdelivr.net/gh/pengfeiw/[email protected]/image/69.png)

## Feature

Support mouse and touch screen, so you can use it with IPad.

- pen

- eraser

- fill

- change color

- change linewidth

- many shapes

- two linestyle: solid and dot

- redo and undo

- extract color

### Run in local

- clone repository: `git clone https://github.com/pengfeiw/react-paint.git`

- install package: `npm install`

- start server: `npm run start`

- open in browser：[http://localhost:3000](http://localhost:3000)

### Technique 

- TypeScript

- React

- Material-UI

- 2D drawing with [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

### Has issue?

If you run into any problems, you can leave a message in [<>](http://pengfeixc.com/blog/60d073bce97367196dce3efc) or commit an [issue](https://github.com/pengfeiw/react-paint/issues).

More fun and interesting things, visit [minicode](https://pengfeiw.github.io/minicode).