Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/konvajs/vue-konva
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
https://github.com/konvajs/vue-konva
canvas canvas-animation graphics konva konvajs shape vue vue-styleguidist
Last synced: 20 days ago
JSON representation
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
- Host: GitHub
- URL: https://github.com/konvajs/vue-konva
- Owner: konvajs
- License: mit
- Created: 2017-11-08T03:23:11.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T19:41:39.000Z (7 months ago)
- Last Synced: 2024-06-16T05:30:54.723Z (5 months ago)
- Topics: canvas, canvas-animation, graphics, konva, konvajs, shape, vue, vue-styleguidist
- Language: TypeScript
- Homepage: https://konvajs.github.io/docs/vue/
- Size: 1.9 MB
- Stars: 1,112
- Watchers: 23
- Forks: 127
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - vue-konva - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.   (Libraries / Canvas draw)
README
# Vue Konva
Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue.
It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/).
All `vue-konva` components correspond to `Konva` components of the same name with the prefix 'v-'. All the parameters available for `Konva` objects can add as `config` in the prop for corresponding `vue-konva` components.
Core shapes are: `v-rect`, `v-circle`, `v-ellipse`, `v-line`, `v-image`, `v-text`, `v-text-path`, `v-star`, `v-label`, `v-path`, `v-regular-polygon`.
Also you can create custom shape.
To get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html).
## Documentation / live edit
See [Tutorials page](https://konvajs.org/docs/vue/)
## Quick Start
[Vue.js](https://vuejs.org) version 2.4+ is required.
### 1 Install via npm
`vue@3`:
```npm
npm install vue-konva konva --save
```
`vue@2`:
```npm
npm install vue-konva@2 konva --save
```
### 2 Import and use VueKonva
`vue@3`:
```js
import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';
const app = createApp(App);
app.use(VueKonva);
app.mount('#app');
```
`vue@2`:
```javascript
import Vue from 'vue';
import VueKonva from 'vue-konva';
Vue.use(VueKonva);
```
### 3 Reference in your component templates
```html
```
```javascript
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
```
### Or use a CDN
```html
// 3. Create the Vue instance
new Vue({
el: '#app',
data: {
configKonva: {
width: 200,
height: 200,
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
},
},
});
```
# Core API
## Getting reference to Konva objects
You can use `ref` feature from `vue`.
```html
const width = window.innerWidth;
const height = window.innerHeight;
export default {
mounted() {
const stage = this.$refs.stage.getNode();
const layer = this.$refs.layer.getNode();
const rect = this.$refs.rect.getNode();
},
};
```
### Strict mode
By default `vue-konva` works in "non-strict" mode. If you changed a property **manually** (or by user action like `drag&drop`) properties of the node will be not matched with properties passed as `config`. `vue-konva` updates ONLY changed properties.
In strict mode `vue-konva` will update all properties of the nodes to the values that you provided in `config`, no matter changed they or not.
You should decide what mode is better in your actual use case.
To enable strict mode pass \_\_useStrictMode attribute:
```html
```
## Configurable prefix
By default `vue-konva` is using `v-` prefix for all components.
You can use your own prefix if default one conflicts with some other libs or your components.
```javascript
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva, { prefix: 'Konva'});
// in template:
```
## Custom Konva Nodes
By passing a `Record Node>` object to `customNodes` in options, you can use your own konva node classes in Vue Konva.
```js
import Vue from 'vue';
import VueKonva from 'vue-konva'
class MyRect extends Konva.Rect {
constructor() {
super()
console.log('MyRect')
}
}
Vue.use(VueKonva, {
// The keys are used as component names.
customNodes: { MyRect }
})
// in template:
```
## Change log
The change log can be found on the [Releases page](https://github.com/konvajs/vue-konva/releases).