Vue Konva - Events, Images, and Filters

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.

Events

We can listen to events from input devices easily with Vue Konva.

For example, we can write:

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-circle
        @mousemove="handleMouseMove"
        @mouseout="handleMouseOut"
        :config="configCircle"
      />
      <v-text
        ref="text"
        :config="{
          x: 10,
          y: 10,
          fontFamily: 'Calibri',
          fontSize: 24,
          text: text,
          fill: 'black',
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height,
      },
      text: "",
      configCircle: {
        x: 200,
        y: 200,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4,
      },
    };
  },
  methods: {
    writeMessage(message) {
      this.text = message;
    },
    handleMouseOut(event) {
      this.writeMessage("Mouseout circle");
    },
    handleMouseMove(event) {
      const mousePos = this.$refs.stage.getNode().getPointerPosition();
      const x = mousePos.x - 190;
      const y = mousePos.y - 40;
      this.writeMessage(`(${x}, ${y})`);
    },
  },
};
</script>

We added a circle and listen to the mouseover and mouseout events of the circle.

In the handleMouseMove method, we get the v-stage ‘s ref and get the mouse position from it.

Then we can this.writeMessage to set the text reactive property, which is used in the v-text component.

We also use the handleMouseOut method to listen to mouseout events.

Images

We can add images into the canvas with the v-image component.

For example, we can write:

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-image
        :config="{
          image,
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width,
        height,
      },
      image: null,
    };
  },
  created() {
    const image = new window.Image();
    image.src =
      "https://i.picsum.photos/id/100/200/200.jpg?hmac=-Ffd_UnIv9DLflvK15Fq_1gRuN8t2wWU4UiuwAu4Rqs";
    image.onload = () => {
      this.image = image;
    };
  },
};
</script>

to add our image.

We set the stageSize to the window’s height and width.

And we create an Image instance in the created hook to load the image.

The config is set to the image we want to display.

Filters

We can add filters as a background of shapes.

For example, we can write:

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-circle
        ref="circle"
        [@mousemove](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fmousemove "Twitter profile for @mousemove")="handleMouseMove"
        :config="{
          filters,
          noise: 1,
          x: 40,
          y: 40,
          width: 50,
          height: 50,
          fill: color,
          shadowBlur: 10,
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;
import Konva from "konva";

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height,
      },
      color: "green",
      filters: [Konva.Filters.Noise],
    };
  },
  methods: {
    handleMouseMove() {
      this.color = Konva.Util.getRandomColor();
    },
  },
  mounted() {
    const circleNode = this.$refs.circle.getNode();
    circleNode.cache();
    circleNode.getLayer().batchDraw();
  },
  updated() {
    const circleNode = this.$refs.circle.getNode();
    circleNode.cache();
  },
};
</script>

We added our v-circle component.

The filters reactive property has the array of filters we want to set.

Then we listen to the mousemove event on it by setting the handleMouseMove method as the mousemove event handler.

In the handleMouseMove method, we set the color reactive property to a random color.

We cache the circle in the updated hook.

And draw the circle in the mounted hook.

Now when we move our mouse over the circle, we see the color of the filter change.

Conclusion

We can listen to events and add images and filters easily with Vue Konva.