如何绘制单击多边形vue-konva

npm install vue-konva konva

<template>
  <div>
    <v-stage :config="stageSize">
      <v-layer>
        <v-regular-polygon
          :x="stageSize.width / 2"
          :y="stageSize.height / 2"
          :sides="sides"
          :radius="radius"
          :fill="fill"
          :draggable="draggable"
          @click="handleClick"
        ></v-regular-polygon>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
import { Stage, Layer, RegularPolygon } from "vue-konva";

export default {
  components: {
    VStage: Stage,
    VLayer: Layer,
    VRegularPolygon: RegularPolygon,
  },
  data() {
    return {
      stageSize: {
        width: 500,
        height: 500,
      },
      sides: 6, // 设置多边形的边数
      radius: 100, // 设置多边形的半径
      fill: "red", // 设置多边形的填充色
      draggable: true, // 设置多边形是否可拖动
    };
  },
  methods: {
    handleClick() {
      console.log("多边形被单击");
      // 在这里可以添加处理多边形单击事件的逻辑
    },
  },
};
</script>