[英]Fabric JS parent-child objects
I'm trying to use fabric JS for a seating chart application. 我正在尝试将Fabric JS用于座位表应用程序。 I have individual objects for the floor plan and for each of the users.
我为平面图和每个用户都有单独的对象。 I can move them all independently of each other.
我可以彼此独立地移动它们。 I'd like the users to be parented to the floor plan so that when I move the floor plan object all the users will move with it.
我希望用户成为平面图的父母,以便在移动平面图对象时,所有用户都将随之移动。 Is there any way to do this with fabric?
有什么办法可以用面料做到这一点?
Found a way to do it; 找到了一种方法 though I still wonder whether the fabric framework has a way to automatically handle this rather than creating it myself for all the parent-child relationships.
尽管我仍然想知道结构框架是否有一种方法可以自动处理此问题,而不是为所有父子关系自己创建它。
// Create canvas
canvas = new fabric.Canvas('c');
img = document.getElementById("cur_image");
// Create parent object
background = new fabric.Image(img, {
left: 0,
top: 0,
angle: 0,
opacity: 1.0
});
canvas.add(background);
// Connect move handler that will move the children
background.on('moving', backgroundMoveHandler);
children = [];
function addItem() {
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 50,
height: 50
});
canvas.add(rect);
children.push(rect);
}
// Add some children
addItem();
addItem();
// Whenever the parent is moved, move the children as well.
function backgroundMoveHandler(options) {
var x = options.e.movementX;
var y = options.e.movementY;
$.each(children, function(i, obj) {
obj.set('left', obj.left + x);
obj.set('top', obj.top + y);
obj.setCoords();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.