画布功能用vue实现

使用 Vue 实现画布功能

在 Vue 中实现画布功能可以通过结合 HTML5 的 <canvas> 元素和 Vue 的响应式特性来完成。以下是具体实现方法。

创建 Vue 组件

创建一个 Vue 组件，包含 <canvas> 元素，并通过 ref 获取画布上下文。

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null,
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth * 0.8;
      this.canvas.height = window.innerHeight * 0.8;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

<style>
canvas {
  border: 1px solid #000;
  background-color: #fff;
}
</style>

实现画布交互功能

通过鼠标事件实现画布的绘制功能，包括开始绘制、绘制中、结束绘制三个阶段。

startDrawing(e) {
  this.isDrawing = true;
  this.ctx.beginPath();
  this.ctx.moveTo(e.offsetX, e.offsetY);
},
draw(e) {
  if (!this.isDrawing) return;
  this.ctx.lineTo(e.offsetX, e.offsetY);
  this.ctx.stroke();
},
stopDrawing() {
  this.isDrawing = false;
},

添加画布样式和配置

通过 ctx 对象可以配置画笔的颜色、粗细等属性。

this.ctx.strokeStyle = '#000000';
this.ctx.lineWidth = 5;
this.ctx.lineCap = 'round';

实现画布清除功能

添加一个方法用于清除画布内容。

clearCanvas() {
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}

响应式调整画布大小

监听窗口大小变化，动态调整画布尺寸。

resizeCanvas() {
  this.canvas.width = window.innerWidth * 0.8;
  this.canvas.height = window.innerHeight * 0.8;
},
mounted() {
  window.addEventListener('resize', this.resizeCanvas);
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeCanvas);
},

完整示例代码

以下是一个完整的 Vue 画布组件示例。

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
    <button @click="clearCanvas">Clear</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null,
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.ctx.strokeStyle = '#000000';
    this.ctx.lineWidth = 5;
    this.ctx.lineCap = 'round';
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth * 0.8;
      this.canvas.height = window.innerHeight * 0.8;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
  },
};
</script>

<style>
canvas {
  border: 1px solid #000;
  background-color: #fff;
}
button {
  margin-top: 10px;
}
</style>

通过以上步骤，可以在 Vue 中实现一个基础的画布功能，支持绘制、清除和响应式调整大小。