我正在尝试将Fabric JS用于座位表应用程序。我为平面图和每个用户都有单独的对象。我可以彼此独立地移动它们。我希望用户成为平面图的父项,以便当我移动平面图对象时,所有用户都将随之移动。有什么办法可以用织物做到这一点?
找到了一种方法 尽管我仍然想知道Fabric框架是否有一种方法可以自动处理此问题,而不是为所有父子关系自己创建它。
// 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();
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句