Vue与Konva.js结合实现空间结构管理与标注图片数据多边形区域功能

<template>
  <v-stage ref="stage" :config="stageSize" @mousedown="handleMouseDown">
    <v-layer>
      <v-image :config="backgroundImageConfig"></v-image>
      <!-- 多边形图形 -->
      <v-group :config="groupConfig">
        <v-regular-polygon v-for="polygon in polygons" :key="polygon.id" :config="polygon.config">
        </v-regular-polygon>
      </v-group>
    </v-layer>
  </v-stage>
</template>
 
<script>
import { mapState } from 'vuex';
import { polygonsToConfig } from '@/utils/konvaUtils';
 
export default {
  data() {
    return {
      // 初始化舞台大小
      stageSize: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      // 背景图片配置
      backgroundImageConfig: {
        image: this.image,
        width: this.image.width,
        height: this.image.height,
        draggable: false
      },
      // 多边形组配置
      groupConfig: {
        visible: true
      }
    };
  },
  computed: {
    ...mapState({
      polygons: state => state.polygons
    }),
    // 多边形配置数组
    polygonsConfig() {
      return polygonsToConfig(this.polygons);
    }
  },
  watch: {
    // 监听多边形数据变化，更新Konva.js层的多边形
    polygonsConfig: {
      handler(newConfig) {
        this.updatePolygons(newConfig);
      },
      deep: true
    }
  },
  methods: {
    // 更新多边形的配置
    updatePolygons(configs) {
      const layer = this.$refs.stage.getStage().findOne('Layer');
      configs.forEach(config => {
        const shape = layer.findOne('#' + config.id);
        shape.setAttrs(config);
      });
      layer.batchDraw();
    },
    handleMouseDown(e) {
      // 鼠标按下事件处理逻辑
    }
  }
};
</script>

在这个代码实例中，我们使用Vue和Konva.js创建了一个可以管理和标注图片上多边形区域的应用。我们定义了舞台（v-stage）和层（v-layer），在层中放置了背景图片（v-image）和多边形组（v-group）。多边形数据通过计算属性与Konva.js的图形进行绑定，并且使用watch来监听多边形数据的变化，从而动态更新Konva.js的多边形配置。这个例子展示了如何在Vue应用中结合使用Konva.js来实现复杂的交互式图形界面。