Вот в примере. Я устанавливаю левый сдвиг для второй линии каждый раз, когда пользователь перемещает любую из нарисованных точек. Я удаляю другие строки и просто оставляю две из них для этого конкретного случая. Цель состоит в том, чтобы пересчитать позицию при перетаскивании любой из точек. Пример скопирован с fabri cJs demos "stickman".
var canvas = this.__canvas = new fabric.Canvas("c", {
selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = "center";
function makeCircle(left, top, line1, line2, line3, line4) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 5,
radius: 12,
fill: "#fff",
stroke: "#666"
});
c.hasControls = c.hasBorders = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
c.line4 = line4;
return c;
}
function makeLine(coords) {
return new fabric.Line(coords, {
fill: "red",
stroke: "red",
strokeWidth: 5,
selectable: false,
evented: false,
});
}
var line = makeLine([250, 125, 250, 175])
var line2 = makeLine([260, 125, 260, 175])
canvas.add(line, line2);
canvas.add(
makeCircle(line.get("x1"), line.get("y1"), null, line, null, line2),
makeCircle(line.get("x2"), line.get("y2"), line, null, line2, null)
);
canvas.on("object:moving", function(e) {
var p = e.target;
console.log(p)
p.line1 && p.line1.set({
x2: p.left,
y2: p.top
});
p.line2 && p.line2.set({
x1: p.left,
y1: p.top
});
p.line3 && p.line3.set({
x2: p.left + 40,
y2: p.top + -5,
});
p.line4 && p.line4.set({
x1: p.left + 40,
y1: p.top + -5,
});
canvas.renderAll();
});
})();
Пересеченная версия
Требуемая версия
Вот пример выше
Математический пример
Для меня проблема в том, что они на самом деле не имеют одинаковую ось, но я не знаю, как этого добиться.