从其他地方开始下一行

Question

现在我有选择不同的颜色，但在选择其他颜色时，仍然从最新行的最后一点绘制行。选择其他颜色后如何在新鲜的地方画画？

function drawLine() {
    canvas.on("mouse:down", function(event) {
        var pointer = canvas.getPointer(event.e);
        var positionX = pointer.x;
        var positionY = pointer.y;

        var circlePoint = new fabric.Circle({
            radius: 1,
            fill: pipeColor,
            left: positionX,
            top: positionY,
            selectable: false,
            originX: "center",
            originY: "center",
            hoverCursor: "auto"
        });

        canvas.add(circlePoint);

        // Store the points to draw the lines
        pipePoints.push(circlePoint);
        // console.log(pipePoints);
        if (pipePoints.length > 1) {
            var startPoint = pipePoints[pipePoints.length - 2];
            var endPoint = pipePoints[pipePoints.length - 1];

            var pipeLine = new fabric.Line(
                [
                    startPoint.get("left"),
                    startPoint.get("top"),
                    endPoint.get("left"),
                    endPoint.get("top")
                ],
                {
                    stroke: pipeColor,
                    strokeWidth: 2,
                    hasControls: false,
                    hasBorders: false,
                    selectable: false,
                    lockMovementX: true,
                    lockMovementY: true,
                    hoverCursor: "default",
                    originX: "center",
                    originY: "center"
                }
            );

            pipeLines.push(pipeLine);

            canvas.add(pipeLine);
        }
    });

$('#colorpicker').change(function () {
    canvas.item(0).selectable = false;
    pipeColor = $(this).val();
    drawLine();
});
}

现在我可以画任何我想从 X 点开始到 Y 点结束的线，但是当我改变线的颜色时，我想从 Z 点开始而不是 Y 点

Answer 1

与 FabricJS 相关的问题并不多。它更多地是关于应用程序的实施和需求。它可以改变需求的原因和程序员的经验。无论如何，这是一个示例宽度演示如何绘制多条线并返回到前几行并继续编辑它们。您可以检查内联 StackOverflow 剪辑器或在 CodeSandbox 上检查：

https://codesandbox.io/s/stackoverflow-60753858-fabric-js-1720-6ke80

var canvas = new fabric.Canvas("canvas");
var currentLine = "water";
document
  .getElementsByClassName("options")[0]
  .addEventListener("click", function(e) {
    if (e.target.classList.contains("line-type")) {
      // Remove active class from previous element
      document
        .querySelector(".line-type.is-active")
        .classList.remove("is-active");

      e.target.classList.add("is-active");
      currentLine = e.target.dataset.lineType;
      console.warn("Current line: " + currentLine);
    }
  });

var linesData = {
  water: {
    linePoints: [],
    lineLines: [],
    color: "blue"
  },
  electricity: {
    linePoints: [],
    lineLines: [],
    color: "yellow"
  },
  internet: {
    linePoints: [],
    lineLines: [],
    color: "gray"
  }
};

canvas.on("mouse:down", function(event) {
  var pointer = canvas.getPointer(event.e);
  var positionX = pointer.x;
  var positionY = pointer.y;

  // Add small circle as an indicative point
  var circlePoint = new fabric.Circle({
    radius: 5,
    fill: linesData[currentLine].color,
    left: positionX,
    top: positionY,
    selectable: false,
    originX: "center",
    originY: "center",
    hoverCursor: "auto"
  });

  canvas.add(circlePoint);

  // Store the points to draw the lines
  linesData[currentLine].linePoints.push(circlePoint);
  if (linesData[currentLine].linePoints.length > 1) {
    // Just draw a line using the last two points, so we don't need to clear
    // and re-render all the lines
    var startPoint =
      linesData[currentLine].linePoints[
        linesData[currentLine].linePoints.length - 2
      ];
    var endPoint =
      linesData[currentLine].linePoints[
        linesData[currentLine].linePoints.length - 1
      ];

    var waterLine = new fabric.Line(
      [
        startPoint.get("left"),
        startPoint.get("top"),
        endPoint.get("left"),
        endPoint.get("top")
      ],
      {
        stroke: linesData[currentLine].color,
        strokeWidth: 4,
        hasControls: false,
        hasBorders: false,
        selectable: false,
        lockMovementX: true,
        lockMovementY: true,
        hoverCursor: "default",
        originX: "center",
        originY: "center"
      }
    );

    linesData[currentLine].lineLines.push(waterLine);

    canvas.add(waterLine);
  }
});

canvas.renderAll();

document
  .getElementById("clear-water-pipe")
  .addEventListener("click", function(e) {
    linesData[currentLine].linePoints.forEach(function(point) {
      canvas.remove(point);
    });
    linesData[currentLine].linePoints = [];

    linesData[currentLine].lineLines.forEach(function(line) {
      canvas.remove(line);
    });
    linesData[currentLine].lineLines = [];
  });

body {
  font-family: sans-serif;
}
canvas {
  border: 2px solid #333;
}
button {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #555;
  cursor: pointer;
}
.options {
  padding-top: 10px;
}
.lines {
  display: flex;
  align-items: center;
}
.lines > div {
  border: 2px solid #333;
  color: white;
  margin-right: 10px;
  padding: 10px;
}
.lines > div.is-active {
  border: 5px solid red;
}
.water-pipe {
  background-color: blue;
}
.lines .electricity-line {
  background-color: yellow;
  color: #555;
}
.internet-line {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>

<div id="app">
  <canvas id="canvas" width="500" height="350"></canvas>

  <div class="options">
    <div class="lines" id="lines">
      <div class="line-type water-pipe is-active" data-line-type="water">
        Water pipe
      </div>
      <div class="line-type electricity-line" data-line-type="electricity">
        Electricity line
      </div>
      <div class="line-type internet-line" data-line-type="internet">
        Internet line
      </div>
    </div>
    <button id="clear-water-pipe">Clear active line</button>
  </div>
</div>