Vue3 + Vite版：从零实现编辑器的图层管理面板和实时缩略图

2023-05-20 13:22:48

图层管理和实时缩略图：提升 Vue3 几何编辑器的用户体验

在之前的文章中，我们深入探讨了如何在 Vue3 中实现一个功能强大的几何画板。现在，我们将进一步扩展我们的画板，使其包含两个至关重要的特性：图层管理面板和实时缩略图。这些特性将显著增强用户体验，使编辑过程更加高效且直观。

图层管理面板：掌控图层层级

图层管理面板是一个必不可少的工具，它允许用户轻松管理画布上的不同图层。有了这个面板，用户可以创建、删除、重命名和重新排列图层，从而对他们的设计进行更精细的控制。

在 Vue3 中，我们可以使用 <template> 和 <script> 标签来构建图层管理面板。它由一个列表组成，其中包含每个图层的名称和一个删除按钮。当用户单击删除按钮时，该图层将从画布中移除。

<template>
  <div class="layer-manager">
    <ul>
      <li v-for="layer in layers" :key="layer.id">
        <span>{{ layer.name }}</span>
        <button @click="removeLayer(layer)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const layers = ref([])

    const addLayer = () => {
      layers.value.push({
        id: Date.now(),
        name: '图层' + layers.value.length
      })
    }

    const removeLayer = (layer) => {
      const index = layers.value.indexOf(layer)
      layers.value.splice(index, 1)
    }

    return {
      layers,
      addLayer,
      removeLayer
    }
  }
}
</script>

实时缩略图：即时预览图层变化

实时缩略图提供了一个宝贵的窗口，用户可以通过它实时预览图层变化。这使得用户能够快速评估更改，并根据需要进行调整。

在 Vue3 中，我们可以利用 <canvas> 元素和 <requestAnimationFrame> 函数来实现实时缩略图。<canvas> 元素是一个特殊的 HTML 元素，允许我们在浏览器中绘制图形。<requestAnimationFrame> 函数创建一个定时器，定期调用一个回调函数（在本例中是 draw 函数）。

<template>
  <div class="thumbnail">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const canvasRef = ref(null)
    const ctx = ref(null)

    onMounted(() => {
      ctx.value = canvasRef.value.getContext('2d')

      // 定时器，每隔16ms调用一次draw函数
      const timer = setInterval(() => {
        draw()
      }, 16)

      // 销毁时清除定时器
      onBeforeUnmount(() => {
        clearInterval(timer)
      })
    })

    const draw = () => {
      // 清空画布
      ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)

      // 绘制图层
      layers.value.forEach((layer) => {
        // 根据图层类型绘制不同的形状
        if (layer.type === '矩形') {
          ctx.value.fillRect(layer.x, layer.y, layer.width, layer.height)
        } else if (layer.type === '圆形') {
          ctx.value.beginPath()
          ctx.value.arc(layer.x, layer.y, layer.radius, 0, Math.PI * 2)
          ctx.value.fill()
        }
      })
    }

    return {
      canvasRef,
      ctx,
      draw
    }
  }
}
</script>