如何在 vuejs 中使用 konvajs 连接 2 个对象？

Question

早上好，我发现自己正在使用 Konvajs 库，https://github.com/konvajs/vue-konva

有如下文档：https://konvajs.org/docs/sandbox/Connected_Objects.html，但是我用vuejs无法实现

因为我需要做的是，选择对象1时，我可以拖动并形成箭头，选择对象2时，它们链接

目前我已经构建了以下内容：

<template>
    <v-container>
        <v-stage :config="configKonva">
            <v-layer>
                <v-circle :config="configCircle"></v-circle>
            </v-layer>
            <v-layer>
                <v-circle :config="configCircleA"></v-circle>
            </v-layer>
        </v-stage>
     </v-container>
</template>

<script>
    export default {
        data(){
            return {
                configKonva: {
                    width: 200,
                    height: 200
                },
                configCircle: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "red",
                    stroke: "black",
                    strokeWidth: 4,
                    draggable: true
                },
                configCircleA: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "green",
                    stroke: "black",
                    strokeWidth: 4,
                    draggable: true
                }
            }
        },
     }
</script>

视觉上我只创建了圆圈，我缺乏这两个通过一条线的连接

Answer 1

有很多方法可以实现此类功能。基本上，您只需要收听mousedown、mousemove 和mouseup 事件即可了解何时绘制线条。您还可以添加touchstart、touchmove 和touchend 事件以支持移动设备：

<template>
  <div>
    <v-stage
      ref="stage"
      :config="stageSize"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
      @mousemove="handleMouseMove"
    >
      <v-layer>
        <v-line
          v-for="line in connections"
          :key="line.id"
          :config="{
            stroke: 'black',
            points: line.points
          }"
        />
        <v-circle
          v-for="target in targets"
          :key="target.id"
          :config="{
            x: target.x,
            y: target.y,
            radius: 40,
            stroke: 'black',
            fill: 'green'
          }"
        />
        <v-text :config="{ text: 'Try to drag-to-connect objects'}"/>
      </v-layer>
      <v-layer ref="dragLayer"></v-layer>
    </v-stage>
  </div>
</template>

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

function generateTargets() {
  const circles = [];
  for (var i = 0; i < 10; i++) {
    circles.push({
      x: width * Math.random(),
      y: height * Math.random(),
      id: i
    });
  }
  return circles;
}

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      targets: generateTargets(),
      connections: [],
      drawningLine: false
    };
  },
  methods: {
    handleMouseDown(e) {
      const onCircle = e.target instanceof Konva.Circle;
      if (!onCircle) {
        return;
      }
      this.drawningLine = true;
      this.connections.push({
        id: Date.now(),
        points: [e.target.x(), e.target.y()]
      });
    },
    handleMouseMove(e) {
      if (!this.drawningLine) {
        return;
      }
      const pos = e.target.getStage().getPointerPosition();
      const lastLine = this.connections[this.connections.length - 1];
      lastLine.points = [lastLine.points[0], lastLine.points[1], pos.x, pos.y];
    },
    handleMouseUp(e) {
      const onCircle = e.target instanceof Konva.Circle;
      if (!onCircle) {
        return;
      }
      this.drawningLine = false;
      const lastLine = this.connections[this.connections.length - 1];
      lastLine.points = [
        lastLine.points[0],
        lastLine.points[1],
        e.target.x(),
        e.target.y()
      ];
    }
  }
};
</script>

演示：https://codesandbox.io/s/vue-konva-connection-objects-qk2ps