Фабри c JS линия от точки к точке - PullRequest
Новая
       60

Фабри c JS линия от точки к точке

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

Теперь у меня есть фриравинг с несколькими разными цветами. Я хотел бы свободно рисовать линии линий вместо полностью свободного рисования. Мне нужно отметить линии воды и газа, например, 6. линиями, каждая из которых начинается в конце последней. 

function enableFreeDrawing() {
    removeEvents();
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.color = e.target.value;
}

document.getElementById('colorpicker').addEventListener('click', function (e) {
    canvas.freeDrawingBrush.color = e.target.value;
    canvas.freeDrawingBrush.width = 2;
});

Подскажите, пожалуйста, как рисовать линии от каждой точки к другой, например. 6 щелчков мышью, и Fini sh это с Enter или двойной щелчок

1 Ответ

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

На элементе холста я буду создавать ориентировочную точку окружности при каждом щелчке и соединять точки при каждом создании новой точки. 

var canvas = new fabric.Canvas("canvas");
var waterPipePoints = [];
var waterPipeLines = [];

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: "blue",
        left: positionX,
        top: positionY,
        selectable: false,
        originX: "center",
        originY: "center",
        hoverCursor: "auto"
    });

    canvas.add(circlePoint);

    // Store the points to draw the lines
    waterPipePoints.push(circlePoint);
    console.log(waterPipePoints);
    if (waterPipePoints.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 = waterPipePoints[waterPipePoints.length - 2];
        var endPoint = waterPipePoints[waterPipePoints.length - 1];

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

        waterPipeLines.push(waterLine);

        canvas.add(waterLine);
    }
});

canvas.renderAll();

Пожалуйста, проверьте этот пример SandBox: https://codesandbox.io/s/stackoverflow-60753858-fabric-js-1720-26twl

...