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.

Live Demo

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.