当前位置：首页 > VUE

vue实现无限画布

2026-01-19 02:50:34VUE

Vue 实现无限画布的方法

使用 SVG 或 Canvas 作为基础

无限画布通常需要动态渲染内容，SVG 或 Canvas 是常见的选择。SVG 适合矢量图形，Canvas 适合像素级操作。Vue 可以通过数据驱动的方式动态更新画布内容。

vue实现无限画布

<template>
  <div class="canvas-container" ref="container">
    <svg ref="svg" width="100%" height="100%">
      <!-- 动态渲染 SVG 元素 -->
      <g v-for="(item, index) in elements" :key="index">
        <rect :x="item.x" :y="item.y" width="50" height="50" fill="blue" />
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elements: [],
      offsetX: 0,
      offsetY: 0,
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      // 初始化画布事件监听
      this.$refs.container.addEventListener('wheel', this.handleWheel);
    },
    handleWheel(event) {
      // 处理滚动事件，实现画布平移
      this.offsetX += event.deltaX;
      this.offsetY += event.deltaY;
      this.updateCanvas();
    },
    updateCanvas() {
      // 更新画布内容
      this.$refs.svg.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
    },
  },
};
</script>

实现画布平移和缩放

无限画布需要支持平移和缩放功能。可以通过监听鼠标事件（如拖动和滚轮）来实现。

vue实现无限画布

methods: {
  handleMouseDown(event) {
    // 记录初始位置
    this.startX = event.clientX;
    this.startY = event.clientY;
    this.isDragging = true;
  },
  handleMouseMove(event) {
    if (this.isDragging) {
      // 计算偏移量并更新画布位置
      this.offsetX += event.clientX - this.startX;
      this.offsetY += event.clientY - this.startY;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.updateCanvas();
    }
  },
  handleMouseUp() {
    this.isDragging = false;
  },
}

动态加载和卸载内容

无限画布的内容可能非常大，需要动态加载和卸载可见区域的内容以减少性能开销。

methods: {
  checkVisibleArea() {
    // 计算当前视口的可见区域
    const viewport = {
      left: -this.offsetX,
      top: -this.offsetY,
      right: -this.offsetX + window.innerWidth,
      bottom: -this.offsetY + window.innerHeight,
    };
    // 根据可见区域加载或卸载内容
    this.elements = this.getAllElements().filter(element =>
      this.isElementVisible(element, viewport)
    );
  },
  isElementVisible(element, viewport) {
    // 判断元素是否在可见区域内
    return (
      element.x < viewport.right &&
      element.x + 50 > viewport.left &&
      element.y < viewport.bottom &&
      element.y + 50 > viewport.top
    );
  },
}

使用第三方库简化实现

如果需要更复杂的功能（如缩放、历史记录等），可以使用第三方库如 fabric.js 或 konva.js。

import { fabric } from 'fabric';

export default {
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas);
    // 添加无限画布的背景
    this.canvas.setBackgroundColor('rgba(255,255,255,1)', () => {});
    // 监听画布事件
    this.canvas.on('mouse:wheel', this.handleWheel);
  },
  methods: {
    handleWheel(event) {
      // 实现缩放功能
      const delta = event.e.deltaY;
      const zoom = this.canvas.getZoom();
      this.canvas.zoomToPoint({ x: event.e.offsetX, y: event.e.offsetY }, zoom * (delta > 0 ? 0.9 : 1.1));
    },
  },
};