javascript - HTML Canvas 绘制形状

Question

我正在尝试在 Vue 项目中创建一个小的绘画组件。实际上我可以徒手绘制线条和实时矩形。我的问题是如何以及在何处正确保存当前形状并使用所有形状重绘整个 Canvas 。

HTML Canvas

<div id="app">
  <canvas id="editCanvas" width="400px" height="400px" style="border: 1px solid black;"></canvas>
</div>

View 应用

clearCanvas() {
  // clear canvas
  this.canvas.editCanvasContext.clearRect(
    0,
    0,
    this.canvas.editCanvas.width,
    this.canvas.editCanvas.height
  );
},
handleMouseEvent(e) {
  if (e.type === "mousedown") {
    this.canvas.prevX = this.canvas.currX;
    this.canvas.prevY = this.canvas.currY;
    this.canvas.currX = e.offsetX;
    this.canvas.currY = e.offsetY;
    this.canvas.mouseClicked = true;
    this.draw(true);
  }
  if (e.type === "mouseup") {
    this.canvas.mouseClicked = false;
  }
  if (e.type === "mouseout") {
    this.canvas.mouseClicked = false;
  }
  if (e.type === "mousemove") {
    if (this.canvas.mouseClicked) {
      this.canvas.prevX = this.canvas.currX;
      this.canvas.prevY = this.canvas.currY;
      this.canvas.currX = e.offsetX;
      this.canvas.currY = e.offsetY;
      this.draw();
    }
  }
},
draw(dot) {
  this.canvas.editCanvasContext.beginPath();
  this.canvas.editCanvasContext.globalCompositeOperation = this.canvas.globalCompositeOperation;
  if (dot) {
    this.start = {
      x: this.canvas.currX,
      y: this.canvas.currY
    };
    this.canvas.editCanvasContext.fillStyle = this.canvas.fillStyle;
    this.canvas.editCanvasContext.fillRect(
      this.canvas.currX,
      this.canvas.currY,
      2,
      2
    );
  } else {
    this.canvas.editCanvasContext.beginPath();
    switch (this.canvas.currentShape) {
      case "line":
        this.drawLine(
          this.canvas.prevX,
          this.canvas.prevY,
          this.canvas.currX,
          this.canvas.currY
        );
        break;
      case "rectangle":
        this.drawRectangle(
          this.start.x,
          this.start.y,
          this.canvas.currX - this.start.x,
          this.canvas.currY - this.start.y
        );
        break;
      case "fillrectangle":
        this.drawFillRectangle(
          this.start.x,
          this.start.y,
          this.canvas.currX - this.start.x,
          this.canvas.currY - this.start.y
        );
        break;
    }
    this.canvas.editCanvasContext.strokeStyle = this.canvas.fillStyle;
    this.canvas.editCanvasContext.lineWidth = this.canvas.lineWidth;
    this.canvas.editCanvasContext.stroke();
  }
  this.canvas.editCanvasContext.closePath();
},
drawLine(startX, startY, endX, endY) {
  this.canvas.editCanvasContext.moveTo(startX, startY);
  this.canvas.editCanvasContext.lineTo(endX, endY);
},
drawRectangle(startX, startY, endX, endY) {
  this.clearCanvas();
  this.canvas.editCanvasContext.rect(startX, startY, endX, endY);
},
drawFillRectangle(startX, startY, endX, endY) {
  this.clearCanvas();
  this.canvas.editCanvasContext.fillRect(startX, startY, endX, endY);
}

The entire code

感谢您的帮助:-)

最好的问候，阿梅伦

Answer 1

查看您的代码，您在各种用户事件上直接绘制到 Canvas 上，直接绘制到 Canvas 上。这类似于在真正的 Canvas 上添加颜料，“一旦开始”。真正需要发生的是您的用户操作应该创建描述这些操作应该做什么的对象，例如创建一个包含所有坐标和颜色的矩形对象然后将其绘制到 Canvas 上..您需要在概念上管理代码中的所有这些对象并且在需要时绘制所有对象，如果您想保存您的工作，则需要保存这些对象以便稍后重新绘制。

您最好的选择是重新使用执行此操作的库，例如:fabric.js http://fabricjs.com

这将使您能够专注于您的 vue.js 组件/应用程序，而不是花费大量时间的基本绘图工具和对象模型概念？