- Notifications
You must be signed in to change notification settings - Fork135
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
License
konvajs/vue-konva
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue.
It provides declarative and reactive bindings to theKonva Framework.
Allvue-konva components correspond toKonva components of the same name with the prefix 'v-'. All the parameters available forKonva objects can add asconfig in the prop for correspondingvue-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 aboutKonva you can readKonva Overview.
Vue.js version 2.4+ is required.
vue@3:
npm install vue-konva konva --savevue@2:
npm install vue-konva@2 konva --savevue@3:
import{createApp}from'vue';importAppfrom'./App.vue';importVueKonvafrom'vue-konva';constapp=createApp(App);app.use(VueKonva);app.mount('#app');
vue@2:
importVuefrom'vue';importVueKonvafrom'vue-konva';Vue.use(VueKonva);
<template><v-stage:config="configKonva"><v-layer><v-circle:config="configCircle"></v-circle></v-layer></v-stage></template>
<script>export default{data(){return{configKonva:{width:200,height:200},configCircle:{x:100,y:100,radius:70,fill:"red",stroke:"black",strokeWidth:4}};}};</script>
<html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/><metahttp-equiv="x-ua-compatible"content="ie=edge"/></head><body><divid="app"><v-stageref="stage":config="configKonva"><v-layerref="layer"><v-circle:config="configCircle"></v-circle></v-layer></v-stage></div><!--1. Link Vue Javascript & Konva--><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/konva/konva.js"></script><!--2. Link VueKonva Javascript --><scriptsrc="https://unpkg.com/vue-konva/umd/vue-konva.min.js"></script><script>// 3. Create the Vue instancenewVue({el:'#app',data:{configKonva:{width:200,height:200,},configCircle:{x:100,y:100,radius:70,fill:'red',stroke:'black',strokeWidth:4,},},});</script></body></html>
You can useref feature fromvue.
<template><v-stageref="stage"><v-layerref="layer"><v-rectref="rect"/></v-layer></v-stage></template><script>constwidth=window.innerWidth;constheight=window.innerHeight;exportdefault{mounted(){conststage=this.$refs.stage.getNode();constlayer=this.$refs.layer.getNode();constrect=this.$refs.rect.getNode();},};</script>
By defaultvue-konva works in "non-strict" mode. If you changed a propertymanually (or by user action likedrag&drop) properties of the node will be not matched with properties passed asconfig.vue-konva updates ONLY changed properties.
In strict modevue-konva will update all properties of the nodes to the values that you provided inconfig, 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:
<v-rect:config="{}"__useStrictMode></v-rect>
By defaultvue-konva is usingv- prefix for all components.
You can use your own prefix if default one conflicts with some other libs or your components.
importVuefrom'vue';importVueKonvafrom'vue-konva'Vue.use(VueKonva,{prefix:'Konva'});// in template:<konva-stageref="stage" :config="stage">
By passing aRecord<string, new (...args: any) => Node<any>> object tocustomNodes in options, you can use your own konva node classes in Vue Konva.
importVuefrom'vue';importVueKonvafrom'vue-konva'classMyRectextendsKonva.Rect{constructor(){super()console.log('MyRect')}}Vue.use(VueKonva,{// The keys are used as component names.customNodes:{ MyRect}})// in template:<v-my-rect/>
The change log can be found on theReleases page.
About
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.