We can make working with the HTML canvas easier in Vue apps with the Vue Konva library.
In this article, we’ll take a look at how to use Vue Konva to make working with the HTML canvas easier in a Vue app.
Installation
We install the Vue Konva library by running:
npm install vue-konva konva --save
Then we register the plugin by writing:
import Vue from "vue";
import App from "./App.vue";
import VueKonva from "vue-konva";
Vue.use(VueKonva);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
in main.js
Simple Shapes
Now we can use it to add some shapes.
For example, we can add some simple shapes to our canvas by writing:
<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: 400,
height: 400,
},
configCircle: {
x: 200,
y: 200,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
},
};
},
};
</script>
We add the v-stage component to house the canvas content.
Then we add the v-circle in the v-layer and we configure them with the settings.
The config prop has the config.
width and height have the width and height of the canvas.
x and y are the x and y coordinates of the center of the circle.
radius is the radius.
fill is the background color of the circle.
stroke has the border color.
strokeWidth has the border width.
We can also use Vue Konva and Konva from the CDN:
<html>
<head>
<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" />
</head>
<body>
<div id="app">
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-konva@2.1.6/umd/vue-konva.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
configKonva: {
width: 400,
height: 400
},
configCircle: {
x: 200,
y: 200,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
}
});
</script>
</body>
</html>
We don’t have to register the plugin as we did with the NPM version.
The rest of the code is the same.
Core Shapes
Vue Konva comes with some prebuilt shapes.
They include v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, v-path, and v-regular-polygon.
For example, we can add some text and a rectangle by writing:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-text :config="{ text: 'Some text', fontSize: 15 }" />
<v-rect
:config="{
x: 20,
y: 50,
width: 120,
height: 120,
fill: 'red',
shadowBlur: 10,
}"
/>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 400,
height: 400,
},
};
},
};
</script>
For example, we can write:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-line
:config="{
x: 20,
y: 200,
points: [0, 0, 220, 0, 160, 100],
tension: 0.5,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'green', 1, 'yellow'],
}"
/>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 400,
height: 400,
},
};
},
};
</script>
to use the v-line component to make our own shape with the points array having the x and y coordinates of the points.
fillLinearGradientStartPoint has the gradient start coordinates.
fillLinearGradientEndPoint has the gradient end coordinates.
fillLinearGradientColorStops has the colors for the start and end of the gradient.
Conclusion
We can add basic shapes to tyhe HTNML canvas easily in a Vue app with Vue Konva.
