I have a canvas where I can click to place icons and link those icons with a line, but I can't manage to get the lines to follow when moving the icon objects. I tried the following, but I can't manage to lock the ends of the lines to the icon objects.
My effort so far: JSFIDDLE
canvas.on('mouse:move', function (obj) {
var line = canvas.getItemByName('line');
var objEl = canvas.getActiveObject();
var type = objEl.get('type');
var leftEl = objEl.left;
var topEl = objEl.top;
canvas.getObjects().forEach((obj) => {
var lineX1 = line.get('x1');
var lineY1 = line.get('y1');
var lineX2 = line.get('x2');
var lineY2 = line.get('y2');
if (lineX1 == leftEl && lineY1 == topEl) {
line.set({
x1: leftEl,
y1: topEl
});
canvas.renderAll();
};
});
line.set('opacity', 1);
});
from Fabricjs function to join 2 objects with line
No comments:
Post a Comment