Vue と Canvas を使用して編集可能なベクター グラフィックス アプリケーションを開発する方法

<template>
  <div>
    <canvas ref="canvas" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
  },
  methods: {
    onMouseDown(event) {
      // 按下鼠标事件
    },
    onMouseMove(event) {
      // 移动鼠标事件
    },
    onMouseUp(event) {
      // 松开鼠标事件
    },
  },
};
</script>

onMouseDown(event) {
  this.isDrawing = true;
  this.startX = event.offsetX;
  this.startY = event.offsetY;
},

onMouseMove(event) {
  if (!this.isDrawing) return;
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  this.ctx.fillStyle = 'red';
  this.ctx.fillRect(this.startX, this.startY, event.offsetX - this.startX, event.offsetY - this.startY);
},

onMouseUp(event) {
  this.isDrawing = false;
},

data() {
  return {
    shapes: [],
  };
},

onMouseDown(event) {
  this.isDrawing = true;
  this.startX = event.offsetX;
  this.startY = event.offsetY;
  this.selectedShape = new Shape(this.startX, this.startY, 0, 0, 'red');
  this.shapes.push(this.selectedShape);
},

onMouseMove(event) {
  if (!this.isDrawing) return;
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  this.shapes.forEach((shape) => {
    shape.draw(this.ctx);
  });
  this.selectedShape.width = event.offsetX - this.selectedShape.x;
  this.selectedShape.height = event.offsetY - this.selectedShape.y;
  this.selectedShape.draw(this.ctx);
},

created() {
  window.addEventListener('keydown', this.onKeyDown);
},
beforeDestroy() {
  window.removeEventListener('keydown', this.onKeyDown);
},
methods: {
  onKeyDown(event) {
    if (!this.selectedShape) return;
    switch (event.keyCode) {
      case 37: // 左箭头
        this.selectedShape.x -= 5;
        break;
      case 38: // 上箭头
        this.selectedShape.y -= 5;
        break;
      case 39: // 右箭头
        this.selectedShape.x += 5;
        break;
      case 40: // 下箭头
        this.selectedShape.y += 5;
        break;
      case 67: // C键
        this.selectedShape.color = 'blue';
        break;
      case 68: // D键
        this.selectedShape.color = 'green';
        break;
      case 46: // 删除键
        this.shapes.splice(this.shapes.indexOf(this.selectedShape), 1);
        this.selectedShape = null;
        break;
    }
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.shapes.forEach((shape) => {
      shape.draw(this.ctx);
    });
  },
},