1.0.2 • Published 3 years ago
vue-drawable-kanvas v1.0.2
vue-drawable-canvas
VueJS Component - drawable 'object-based' canvas
Vue3.
Install
yarn add vue-drawable-canvas
Usage
To test - clone repo and run:
yarn serve
To use (See the playground folder for a working demo):
<!-- MyComponent.vue -->
<template>
<VueDrawableCanvas
ref="canvas"
/>
</template>
<script>
import VueDrawingCanvas from 'vue-drawing-canvas';
export default {
name: 'MyComponent',
components: {
VueDrawingCanvas,
},
};
</script>The component have these modes of usage:
| String |
|---|
| draw |
| erase |
| move |
The component can draw these shapes:
| String |
|---|
| pencil |
| circle |
| rectangle |
| triangle |
| text |
| background |
The given mode and shape are set by props.
Canvas shapes are erased or moved by selecting the appropriate mode then clicking and/or dragging the shape.
Props
| Name | Type | Default value | Description |
|---|---|---|---|
| width | Number | 800 | The canvas width |
| height | Number | 600 | The canvas height |
| font | String | 3rem Arial | The font size and type |
| lineWidth | Number | 5 | The width of the stroke |
| strokeStyle | String | #000000 | The color of the stroke |
| fillStyle | String | transparent | The color of the fill. Note: also sets the text color |
| backgroundColor | String | transparent | The background color |
| backgroundImage | String | '' | The background image |
| stretchBackgroundImage | Boolean | false | Stretces the background image to fit the canvas |
| shape | string | string | The shape to be drawn |
| mode | string | string | The canvas mode |
| devicePixelRatio | Boolean | true | Adjust the canavs resolution based on the devicePixelRatio |
Emits
| Event | Data | Description |
|---|---|---|
| mousedown | MouseEvent, Coordinate | Emits the mouse event and the coordinate relative to the canvas where the mouse was clicked |
| target | Coordinate | If mouse click or drag is above an object on the canvas the coordinates realtive to the canvas is emitted |
Methods
| Method name | Parameters | Return value | Description |
|---|---|---|---|
| clear | - | void | Clear the canvas and the undo/redo history |
| undo | - | void | - |
| redo | - | void | - |
| save | scale | Number | returns blob |
| drawText | (coordinate, text) | void | Adds text to the canvas. The coordinate is the top left coordinate where the text will be placed. (Text is rendered with textBaseline 'top') |