Начните следующую строку откуда-то еще - PullRequest
Новая
       37

Начните следующую строку откуда-то еще

0 голосов
/ 20 марта 2020

Теперь у меня есть выбор разных цветов, но при выборе другого цвета линия все еще рисуется от последней точки последней линии. Как я могу нарисовать новое место fre sh после выбора другого цвета? 

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

1 Ответ

1 голос
/ 21 марта 2020

Это не так много вопросов, связанных с Фабри cJS. Это больше о реализации и потребностях приложения. Это может варьироваться в зависимости от требований и опыта программиста. В любом случае, вот пример ширины демонстрации, как вы можете нарисовать несколько линий и go вернуться к предыдущим линиям и продолжить их редактирование. Вы можете проверить встроенный сниппер 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>
...