Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oceanpresentchao/peintre2
A configurable light canvas painter component with Vue3.可配置的轻量级Vue3画板组件
https://github.com/oceanpresentchao/peintre2
canvas painter typescript vue vue3
Last synced: 3 months ago
JSON representation
A configurable light canvas painter component with Vue3.可配置的轻量级Vue3画板组件
- Host: GitHub
- URL: https://github.com/oceanpresentchao/peintre2
- Owner: OceanPresentChao
- License: mit
- Created: 2023-01-04T05:39:05.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-14T05:00:36.000Z (7 months ago)
- Last Synced: 2024-11-06T08:45:56.601Z (3 months ago)
- Topics: canvas, painter, typescript, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 483 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.EN.md
- License: LICENSE
Awesome Lists containing this project
README
# Peintre2
一个开箱即用的可配置的轻量级Vue3画板组件。支持多图层、多工具、选择变形图形
English | 简体中文
## Features
1. multi layers √
2. change color and line width of tool √
3. geometry tool such as line、rectangle、ellipse √
4. draggable layers √
5. grabbing context √
6. undo、redo √
7. save image √
8. selecting and move、resize elements √
9. optional tool bar mode √
## Live Demo
[Demo](https://oceanpresentchao.github.io/Peintre2/)
## Installation
### With npm
```bash
npm i peintre
pnpm add peintre
```
## Usage
```html
import Painter from "peintre"
import 'peintre/dist/style.css'
```
## Props
| Attribute | Description | Type | Default |
| --------- | ----------- | --------------------------------------------- | ------- |
| width | canvas width | number | 800 |
| height | canvas height | number | 600 |
| maxLine | max context line width | number | 100 |
| minLine | min context line width | number | 1 |
| mode | mode of tool bar | 'side' | 'float' | 'side' |