Fabric JS父子对象

布伦丹·亚伯

我正在尝试将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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Fabric JS 对象缩放

来自分类Dev

Fabric.js计数对象

来自分类Dev

缩放fabric.js画布对象

来自分类Dev

对象数据随机更改Fabric.js

来自分类Dev

使用mouse:Fabric JS:覆盖动画对象

来自分类Dev

Fabric.js:按名称获取对象

来自分类Dev

在Fabric.js中调整对象大小

来自分类Dev

Fabric.js动画对象/图像

来自分类Dev

在Fabric JS中取消选择对象

来自分类Dev

Fabric.js:按名称获取对象

来自分类Dev

Fabric JS右键单击选择对象

来自分类Dev

fabric.js:通过boundingbox移动对象

来自分类Dev

Fabric.js 从 toDataURL 中删除对象

来自分类Dev

fabric js:对象分组无法正常工作

来自分类Dev

Fabric js禁用对象取消选择

来自分类Dev

Fabric JS中的BringForward

来自分类Dev

画布旋转 - Fabric js

来自分类Dev

Fabric.js对象:已选中,未选中对象

来自分类Dev

Fabric.js-在选定对象下移动对象

来自分类Dev

无论如何,是否可以使Fabric对象自动对齐在Fabric.js上

来自分类Dev

使用Fabric.js选择画布上的所有对象

来自分类Dev

如何以编程方式选择Fabric.js对象

来自分类Dev

Fabric.js-居中后对象无法拖动/移动

来自分类Dev

图像滤镜在Fabric.js中的克隆对象之间共享

来自分类Dev

fabric.js获取IText对象的“编辑”状态

来自分类Dev

在Fabric.js中反序列化JSON对象

来自分类Dev

Fabric.js中同时绘制两个对象

来自分类Dev

如何以编程方式选择Fabric.js对象

来自分类Dev

在fabric.js中修改了哪个对象