Vue Konva: A JavaScript library for drawing complex canvas graphics using Vue
Vue Konva
This library encapsulates the power of Konva and enables drawing of complex canvas graphics using Vue components and events. It provides declarative and reactive bindings to the Konva Framework. To get a detailed understanding of how Konva works, you can read the Konva Overview.
Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. Konva enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
API
All vue-konva
components correspond to Konva
components of the same name with the prefix 'v-', meaning you can use the full power of the framework like its shapes, styles, & animations. 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, SVG Path, v-regular-polygon.
Using Vue Konva
Vue.js version 2.4+ is required. Install via npm
npm install vue-konva konva --save
Import and use VueKonva
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
Reference in your component templates
<template>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="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>
If you encounter any problems or have any suggestions, visit the code repository of this project, by clicking here.
Created & submitted by Rafael Escala.