Question

我正在将vue-konva与vuejs一起使用，我无法在我的元素上应用konva过滤器。我已经实现了这样的组件：

<template>
  <div>
    <v-stage ref="stage" :config="configKonva">
      <v-layer ref="layer">
        <v-image ref="maskelement" :config="imageConfig" />
        <v-circle :config="configCircle"></v-circle>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
  export default {
    name: 'mySvg',
    data() {
      const img = new Image();
      img.src = 'myImagePath.png';
      return {
        configCircle: {
          x: 500,
          y: 200,
          radius: 70,
          fill: 'red',
          stroke: 'pink',
          strokeWidth: 4,
        },

        imageConfig: {
          x: 0,
          y: 0,
          image: img,
          width: 1181,
          height: 1181,
          filters: [
            Konva.Filters.Mask,
          ],
          threshold: 200,
        },
      };
    },
  };
</script>

我还试图像这样向图像配置添加sceneFunc属性：

imageConfig: {
  x: 0,
  y: 0,
  image: img,
  width: 1181,
  height: 1181,
  sceneFunc: (context, elem) => {
    elem.filters([Konva.Filters.Mask]);
    elem.threshold(200);
  },
},

但是只要有sceneFunc属性，我的组件就不会显示

我应该如何在vuejs中使用过滤器？

Answer 1

您可以使用以下代码将缓存应用于图片：

<template>
  <v-stage :config="{
    width: 300,
    height: 300
  }">
    <v-layer>
      <v-image :config="{
        image: this.image,
        filters: this.filters,
        blur: 100,
        scaleX: 0.3,
        scaleY: 0.3
      }" ref="image"></v-image>
    </v-layer>
  </v-stage>
</template>

<script>
import VueKonva from 'vue-konva'
import Vue from 'vue';
Vue.use(VueKonva)
export default {
  name: "App",
  data() {
    return {
      image: null,
      filters: [Konva.Filters.Blur]
    }
  },
  created() {
    var img = new Image();
    img.src = './logo.png';
    img.onload = () => {
      this.image = img;
      this.$nextTick(() => {
        const node = this.$refs.image.getStage();
        node.cache();
        node.getLayer().batchDraw();
      })
    }
  }
};
</script>

vue-konva-向图像添加过滤器

1 个答案: