javascript - 从其他地方开始下一行

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>