vue实现画板

Vue 实现画板功能

在 Vue 中实现画板功能可以通过 HTML5 的 Canvas API 实现。以下是一个完整的实现方案：

创建 Vue 组件

新建一个 Vue 单文件组件（SFC），命名为 DrawingBoard.vue：

<template>
  <div class="drawing-board">
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    ></canvas>
    <div class="controls">
      <input type="color" v-model="selectedColor">
      <input type="range" v-model="brushSize" min="1" max="50">
      <button @click="clearCanvas">清除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      selectedColor: '#000000',
      brushSize: 5,
      lastX: 0,
      lastY: 0
    }
  },
  mounted() {
    this.setupCanvas()
  },
  methods: {
    setupCanvas() {
      const canvas = this.$refs.canvas
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
    },
    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      this.lastX = e.clientX - rect.left
      this.lastY = e.clientY - rect.top
    },
    draw(e) {
      if (!this.isDrawing) return

      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const currentX = e.clientX - rect.left
      const currentY = e.clientY - rect.top

      ctx.beginPath()
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(currentX, currentY)
      ctx.strokeStyle = this.selectedColor
      ctx.lineWidth = this.brushSize
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.stroke()

      this.lastX = currentX
      this.lastY = currentY
    },
    stopDrawing() {
      this.isDrawing = false
    },
    clearCanvas() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    handleTouchStart(e) {
      e.preventDefault()
      const touch = e.touches[0]
      const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
      })
      this.startDrawing(mouseEvent)
    },
    handleTouchMove(e) {
      e.preventDefault()
      const touch = e.touches[0]
      const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
      })
      this.draw(mouseEvent)
    },
    handleTouchEnd() {
      this.stopDrawing()
    }
  }
}
</script>

<style scoped>
.drawing-board {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  position: relative;
}

canvas {
  width: 100%;
  height: 100%;
  background-color: white;
  cursor: crosshair;
}

.controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>

功能说明

1. 画布设置：在 mounted 生命周期钩子中初始化画布尺寸，使其填充父容器。

2. 绘图功能：通过鼠标事件监听实现绘图功能：

   • mousedown 开始绘制
   • mousemove 持续绘制
   • mouseup 和 mouseleave 停止绘制

3. 触摸支持：添加触摸事件处理，使画板在移动设备上也能使用。

4. 控制面板：

   • 颜色选择器：修改画笔颜色
   • 滑块：调整画笔粗细
   • 清除按钮：清空画布

5. 绘制样式：设置 lineCap 和 lineJoin 为 round 使线条更平滑。

使用组件

在父组件中引入并使用：

<template>
  <div>
    <DrawingBoard />
  </div>
</template>

<script>
import DrawingBoard from './DrawingBoard.vue'

export default {
  components: {
    DrawingBoard
  }
}
</script>

进阶功能

如需保存绘图结果，可以添加以下方法：

methods: {
  saveAsImage() {
    const canvas = this.$refs.canvas
    const dataURL = canvas.toDataURL('image/png')
    const link = document.createElement('a')
    link.download = 'drawing.png'
    link.href = dataURL
    link.click()
  }
}

然后在模板中添加保存按钮：

<button @click="saveAsImage">保存为图片</button>

这个实现提供了基础的画板功能，可以根据需要进一步扩展，如添加橡皮擦、撤销/重做等功能。