HTML Canvas рисует фигуры

Question

Я пытаюсь создать небольшой компонент рисования в проекте Vue.На самом деле я могу рисовать линии свободной руки и живые прямоугольники.Моя проблема в том, как и где правильно сохранить текущую форму и перерисовать весь холст со всеми формами.

HTML Canvas

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

Vue Application

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);
}

}

Весь код

Спасибо за помощь: -)

С наилучшими пожеланиями, AMehlen

Answer 1

Глядя на свой код, вы рисуете непосредственно на холст в различных пользовательских событиях, прямо на холст.Это похоже на добавление краски к реальному холсту, где он "включен".Что действительно должно произойти, так это то, что ваши пользовательские действия должны создавать объекты, которые описывают, что должны делать эти действия, например, создавать прямоугольный объект со всеми координатами и цветами, а затем рисовать его на холсте. Вам необходимо было бы концептуально управлять всеми этими объектами в коде изакрасьте все объекты, когда это необходимо, и если вы хотите сохранить свою работу, вам потребуется сохранить этот объект для повторного рисования позже.

Лучше всего было бы повторно использовать библиотеку, которая делает это, например:fabric.js http://fabricjs.com

Это позволит вам сконцентрироваться на компоненте / приложении vue.js, а не на основных инструментах рисования и концепциях объектной модели, которые займут много времени?