Need help with vue-konva?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

konvajs
701 Stars 86 Forks MIT License 129 Commits 12 Opened issues

Description

Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.

Services available

!
?

Need anything else?

Contributors list

Vue Konva

Version License

ReactKonva Logo

Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue.

It provides declarative and reactive bindings to the Konva Framework.

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.

Documentation / live edit

See Tutorials page

Quick Start

Vue.js version 2.4+ is required.

1 Install via npm

npm install vue-konva konva --save

2 Import and use VueKonva

import Vue from 'vue';
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

3 Reference in your component templates

Or use a CDN

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">


<div id="app">
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/konva/konva.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/vue-konva/umd/vue-konva.min.js"></script>
<script>
  // 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
      }
    }
  })
</script>

Core API

Getting reference to Konva objects

You can use

ref
feature from
vue
.

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:


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.

import Vue from 'vue';
import VueKonva from 'vue-konva'

Vue.use(VueKonva, { prefix: 'Konva'});

// in template:

Change log

The change log can be found on the Releases page.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.