使用fabric js连接两个对象
使用fabric js连接两个对象
提问于 2015-08-29 23:54:28
我目前有一个画布应用程序，可以在其中添加对象(形状)。这是我的小提琴。你基本上点击新的模拟，这将初始化画布，然后你可以添加一个圆或矩形。
我正在尝试添加一个名为"Add“的功能，您可以单击某个对象(形状)，然后单击add并添加另一个对象(shape)，它们都与一行链接在一起。类似于这个演示。
我认为这个特性的pesudo代码如下所示：
function addChild(){
get getActiveObject
draw a line/arrow connect it with getActiveObject
draw object connected with line
should be able to move it / strecth it around
}我想知道这是否可能，以及如何开始。请指点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-30 08:43:51
您需要侦听object:selected事件以添加连接线，并侦听object:moving事件以更新线路坐标。
// function for drawing a line
function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'red',
stroke: 'red',
strokeWidth: 5,
selectable: false
});
}
var canvas;
window.newAnimation = function(){
canvas = new fabric.Canvas('canvas');
var selectedElement = null;
canvas.on('object:selected', function(options) {
// we are doing t oadd a connection
if (canvas.connect) {
canvas.connect = false;
var from = selectedElement.getCenterPoint();
var to = options.target.getCenterPoint();
var line = makeLine([from.x, from.y, to.x, to.y]);
canvas.add(line);
// these take care of moving the line ends when the object moves
selectedElement.moveLine = function() {
var from = selectedElement.getCenterPoint();
line.set({ 'x1': from.x, 'y1': from.y });
};
options.target.moveLine = function() {
var to = options.target.getCenterPoint();
line.set({ 'x2': to.x, 'y2': to.y });
};
}
selectedElement = options.target;
});
canvas.on('object:moving', function(e) {
e.target.moveLine();
canvas.renderAll();
});
}
window.addChild = function() {
canvas.connect = true;
}window.addChild跟踪是否单击Add子键(并应添加到按钮的onclick中)，以便下一个object:selected可以画线(否则它只会跟踪当前选定的元素)。
<button onClick="addChild()">Add Child</button>请注意，对于完整的解决方案，您需要能够取消Add子方案，并且您可能希望处理对象大小调整(当前，当您移动对象时，行会更新，但是当您调整对象的大小时不会更新)。
Stack Overflow用户
发布于 2015-09-01 11:46:34
下面是您要寻找的新版本，包括对多个连接和删除的支持
添加子功能
function addChildLine(options) {
canvas.off('object:selected', addChildLine);
// add the line
var fromObject = canvas.addChild.start;
var toObject = options.target;
var from = fromObject.getCenterPoint();
var to = toObject.getCenterPoint();
var line = new fabric.Line([from.x, from.y, to.x, to.y], {
fill: 'red',
stroke: 'red',
strokeWidth: 5,
selectable: false
});
canvas.add(line);
// so that the line is behind the connected shapes
line.sendToBack();
// add a reference to the line to each object
fromObject.addChild = {
// this retains the existing arrays (if there were any)
from: (fromObject.addChild && fromObject.addChild.from) || [],
to: (fromObject.addChild && fromObject.addChild.to)
}
fromObject.addChild.from.push(line);
toObject.addChild = {
from: (toObject.addChild && toObject.addChild.from),
to: (toObject.addChild && toObject.addChild.to) || []
}
toObject.addChild.to.push(line);
// to remove line references when the line gets removed
line.addChildRemove = function () {
fromObject.addChild.from.forEach(function(e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
toObject.addChild.to.forEach(function (e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
}
// undefined instead of delete since we are anyway going to do this many times
canvas.addChild = undefined;
}
function addChildMoveLine(event) {
canvas.on(event, function (options) {
var object = options.target;
var objectCenter = object.getCenterPoint();
// udpate lines (if any)
if (object.addChild) {
if (object.addChild.from)
object.addChild.from.forEach(function (line) {
line.set({ 'x1': objectCenter.x, 'y1': objectCenter.y });
})
if (object.addChild.to)
object.addChild.to.forEach(function (line) {
line.set({ 'x2': objectCenter.x, 'y2': objectCenter.y });
})
}
canvas.renderAll();
});
}
window.addChild = function () {
canvas.addChild = {
start: canvas.getActiveObject()
}
// for when addChild is clicked twice
canvas.off('object:selected', addChildLine);
canvas.on('object:selected', addChildLine);
}因为我们没有画布引用，除非单击Add动画，所以处理程序必须附加在Add动画处理程序中
window.newAnimation = function () {
canvas = new fabric.Canvas('canvas');
// we need this here because this is when the canvas gets initialized
['object:moving', 'object:scaling'].forEach(addChildMoveLine)
}删除对象时删除行
window.deleteObject = function () {
var object = canvas.getActiveObject();
// remove lines (if any)
if (object.addChild) {
if (object.addChild.from)
// step backwards since we are deleting
for (var i = object.addChild.from.length - 1; i >= 0; i--) {
var line = object.addChild.from[i];
line.addChildRemove();
line.remove();
}
if (object.addChild.to)
for (var i = object.addChild.to.length - 1; i >= 0; i--) {
var line = object.addChild.to[i];
line.addChildRemove();
line.remove();
}
}
// from original code
object.remove();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32291834
复制相关文章
相似问题
腾讯云开发者
