vue实现画图和连线

Vue 实现画图和连线

使用 SVG 实现基本绘图

在 Vue 中可以通过 SVG 实现基础的画图和连线功能。SVG 提供了丰富的图形元素，如 <line>、<path>、<circle> 等，适合绘制图形和连线。

<template>
  <svg width="500" height="500" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing">
    <line v-for="(line, index) in lines" :key="index" 
          :x1="line.x1" :y1="line.y1" 
          :x2="line.x2" :y2="line.y2" 
          stroke="black" stroke-width="2" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lines: [],
      currentLine: { x1: 0, y1: 0, x2: 0, y2: 0 }
    };
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.currentLine = { x1: offsetX, y1: offsetY, x2: offsetX, y2: offsetY };
    },
    draw(event) {
      if (!this.isDrawing) return;
      const { offsetX, offsetY } = event;
      this.currentLine.x2 = offsetX;
      this.currentLine.y2 = offsetY;
    },
    stopDrawing() {
      if (this.isDrawing) {
        this.lines.push({ ...this.currentLine });
        this.isDrawing = false;
      }
    }
  }
};
</script>

使用 Canvas 实现高级绘图

如果需要更复杂的绘图功能，可以使用 HTML5 Canvas。Canvas 提供了更灵活的绘图 API，适合动态绘制和渲染。

<template>
  <canvas ref="canvas" width="500" height="500" 
          @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      startX: 0,
      startY: 0,
      ctx: null
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.ctx.strokeStyle = 'black';
    this.ctx.lineWidth = 2;
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.startX = offsetX;
      this.startY = offsetY;
    },
    draw(event) {
      if (!this.isDrawing) return;
      const { offsetX, offsetY } = event;
      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
      this.ctx.beginPath();
      this.ctx.moveTo(this.startX, this.startY);
      this.ctx.lineTo(offsetX, offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};
</script>

使用第三方库实现复杂功能

对于更复杂的图形和连线需求，可以使用第三方库如 D3.js 或 Konva.js。这些库提供了更高级的功能，如拖拽、缩放和事件处理。

以 Konva.js 为例：

<template>
  <div ref="container"></div>
</template>

<script>
import Konva from 'konva';

export default {
  mounted() {
    const stage = new Konva.Stage({
      container: this.$refs.container,
      width: 500,
      height: 500
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    let line = new Konva.Line({
      points: [50, 50, 150, 150],
      stroke: 'black',
      strokeWidth: 2
    });
    layer.add(line);
    layer.draw();
  }
};
</script>

实现节点拖拽和连线

结合拖拽和连线功能，可以构建更复杂的图形编辑器。以下是一个简单的实现示例：

<template>
  <svg width="500" height="500" @mousemove="updateLine">
    <circle v-for="(node, index) in nodes" :key="index" 
            :cx="node.x" :cy="node.y" r="20" fill="blue" 
            @mousedown="startDrag(index, $event)" 
            @mouseup="stopDrag" />
    <line v-if="dragging" :x1="nodes[draggedNode].x" :y1="nodes[draggedNode].y" 
          :x2="currentX" :y2="currentY" stroke="black" stroke-width="2" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        { x: 100, y: 100 },
        { x: 300, y: 300 }
      ],
      dragging: false,
      draggedNode: null,
      currentX: 0,
      currentY: 0
    };
  },
  methods: {
    startDrag(index, event) {
      this.dragging = true;
      this.draggedNode = index;
      this.currentX = event.offsetX;
      this.currentY = event.offsetY;
    },
    updateLine(event) {
      if (!this.dragging) return;
      this.currentX = event.offsetX;
      this.currentY = event.offsetY;
    },
    stopDrag() {
      if (this.dragging) {
        this.nodes[this.draggedNode].x = this.currentX;
        this.nodes[this.draggedNode].y = this.currentY;
        this.dragging = false;
      }
    }
  }
};
</script>

以上方法提供了从基础到高级的 Vue 画图和连线实现方案，可以根据需求选择适合的方式。