https://github.com/oceanpresentchao/peintre

A configurable canvas painter component for Vue3
https://github.com/oceanpresentchao/peintre

canvas painter typescript vue vuejs

Last synced: about 2 months ago
JSON representation

A configurable canvas painter component for Vue3

• Host: GitHub
• URL: https://github.com/oceanpresentchao/peintre
• Owner: OceanPresentChao
• License: mit
• Created: 2022-05-14T14:09:53.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-14T05:22:22.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T07:02:39.554Z (about 2 months ago)
• Topics: canvas, painter, typescript, vue, vuejs
• Language: Vue
• Homepage:
• Size: 518 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.EN.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Peintre

A lightweight configurable Vue3 canvas painter component. 



English | 简体中文



## Feature

1. Multi Layer √

2. Change Tool Color&Size √

3. Rectangle、Circle,etc Tool √

4. Pressure Support √

5. Mobile Touch Support √

6. Switch Layer with Dragging √

7. Change Tool Size with Scroll Event √

8. Redo Support √

## Live Demo

[Demo](https://oceanpresentchao.github.io/Peintre/)

## Installation

### With npm

```bash

npm i -S peintre

```

## Usage

```html

import {Painter} from "peintre"

```

## Props

| Attribute  | Description | Type                                          | Default |

| ---------  | ----------- | --------------------------------------------- | ------- |

| width    | canvas width   | number |   800     |

| height    | canvas height   | number |   600     |

| maxLine    | max context linewidth   | number |   500     |

| minLine    | min context linewidth   | number |   1     |

| pressure    | whether support pressure or not   | boolean |   false    |

| lang    | Language   | string |  "zh" \| "en"    |

## DevelopmentBlog(zh-CN)

[Peintre DevelopmentBlog](http://oceanpresent.art/posts/hard-boiled-wonderland/peintre)