从其他地方开始下一行

Question

Now i have choice of different colors, but when selecting other color, line is still drawn from last point of latest line.选择其他颜色后如何在新的地方画画？

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相关的问题不多。它更多地是关于应用程序的实现和需求。它可能因需求和程序员的经验而异。无论如何，这里有一个示例宽度演示如何绘制多行并返回到前面的行并继续编辑它们。您可以查看内联 Whosebug snipper 或在 CodeSandbox 上查看：

https://codesandbox.io/s/Whosebug-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>

从其他地方开始下一行

Start next line from somewhere else

javascript

canvas

draw

fabricjs