Я пытаюсь нарисовать n прямоугольников на экране и соединить их линиями друг с другом.Я могу нарисовать прямоугольники и линии, соединяющие их, но рамки можно перетаскивать.Моя проблема в том, что когда ящик перемещается, линии, соединяющие его с другими ящиками, не перемещаются вместе с ним.
Я уже пробовал другой пост здесь, но он работал только с 2 ящиками и одной строкой.
let box2 = {x:500, y:20, width:150, height:100, color:'green', children:[]}
let box3 = {x:300, y:300, width:150, height:100, color:'blue', children:[]}
let box_1 = {x:20, y:20, width:150, height:100, color:'red', children:[box2, box3]};
let boxes = [box_1, box2, box3];
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: 600,
height: 800
});
var layer = new Konva.Layer();
function drawline(box1, box2){
let startX = box1.getX();
let startY = box1.getY();
let endX = box2.getX()
let endY = box2.getY();
var line = new Konva.Line({
points: [startX, startY, endX, endY],
stroke: 'black',
strokeWidth: 5,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
layer.add(line);
}
function drawBoxes(listOfBoxes){
for (var i = 0; i < listOfBoxes.length; i++) {
let rect = listOfBoxes[i];
var box1 = new Konva.Rect({
x: rect['x'],
y: rect['y'],
width: rect['width'],
height: rect['height'],
fill: rect['color'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box1);
for (var child = 0; child < rect['children'].length; child++) {
var box2 = new Konva.Rect({
x: rect['children'][child]['x'],
y: rect['children'][child]['y'],
width: rect['children'][child]['width'],
height: rect['children'][child]['height'],
fill: rect['children'][child]['color'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
drawline(box1, box2);
}
}
}
drawBoxes(boxes);
stage.add(layer);