如何在 Vue 和 Konva 中应用画布滤镜？

要应用滤镜，您需要手动缓存 Konva.Node。您可以在 mounted() 钩子中完成这项工作。 每次您更新样式时，都需要重新缓存节点。

说明：将鼠标移动到矩形上以查看应用噪声滤镜的颜色变化。

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-rect
        ref="rect"
        @mousemove="handleMouseMove"
        :config="{
          filters: filters,
          noise: 1,
          x: 10,
          y: 10,
          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();
      // 在更改属性后重新缓存
      const rectNode = this.$refs.rect.getNode();
      rectNode.cache();
    }
  },
  mounted() {
    // 初始缓存
    const rectNode = this.$refs.rect.getNode();
    rectNode.cache();
  }
};
</script>

Open Sandbox