Question

我正在尝试在Vue项目中创建一个小的绘画组件。实际上，我可以画自由线和矩形。我的问题是如何以及在何处正确保存当前形状并重新绘制具有所有形状的整个画布。

HTML画布

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

Vue申请

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

查看您的代码，您将在各种用户事件上直接绘制到画布上，直接绘制到画布上。这类似于将油漆“一旦打开”添加到真实的画布中。真正需要发生的是您的用户操作应创建描述这些操作应执行的操作的对象，例如，创建一个具有所有坐标和颜色的矩形对象，然后将其绘制到画布上。您需要在代码中概念上管理所有这些对象，在需要时绘制所有对象，如果要保存所做的工作，则需要保存这些对象以供以后重新绘制。

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

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

HTML Canvas绘制形状

1 个答案: