当前位置：首页 > VUE

vue 实现平面

2026-01-13 03:21:15VUE

Vue 实现平面图形的绘制

在Vue中实现平面图形绘制通常结合HTML5的Canvas或SVG技术，以下是两种常见方法的实现示例：

使用Canvas绘制

通过Vue封装Canvas操作，动态绘制平面图形（如矩形、圆形等）：

<template>
  <canvas ref="canvas" width="400" height="300"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = '#3498db';
    ctx.fillRect(50, 50, 100, 80);

    // 绘制圆形
    ctx.beginPath();
    ctx.arc(200, 150, 50, 0, Math.PI * 2);
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
  }
};
</script>

使用SVG绘制

SVG是矢量图形标准，适合在Vue中直接通过模板声明式渲染：

<template>
  <svg width="400" height="300">
    <!-- 矩形 -->
    <rect x="50" y="50" width="100" height="80" fill="#3498db" />

    <!-- 圆形 -->
    <circle cx="200" cy="150" r="50" fill="#e74c3c" />
  </svg>
</template>

动态图形生成

结合Vue的响应式数据动态控制图形属性：

<template>
  <svg width="400" height="300">
    <circle 
      :cx="circle.x" 
      :cy="circle.y" 
      :r="circle.radius" 
      :fill="circle.color" 
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      circle: {
        x: 100,
        y: 100,
        radius: 30,
        color: '#9b59b6'
      }
    };
  }
};
</script>

第三方库集成

使用专门的图形库（如D3.js或Fabric.js）增强功能：

vue 实现平面

<template>
  <canvas ref="canvas" width="500" height="400"></canvas>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const canvas = new fabric.Canvas(this.$refs.canvas);
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 60,
      height: 40,
      fill: '#2ecc71'
    });
    canvas.add(rect);
  }
};
</script>