Question

我想以编程方式选择Fabrics.js对象。我需要做什么？例如，我正在添加两个这样的对象：

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  }));

 canvas.add(new fabric.Circle({
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  }));

我点击了名为

的按钮时有两个按钮

选择矩形
选择第二个对象

单击选择矩形按钮时，应选择矩形形状，单击选择第二个对象按钮时，应选择第二个对象圆。

以下是Jsfiddle的解决方法。

我瞪着眼睛，厌倦了，在这里，我正在寻找一些如何开始。

编辑

我喜欢为每个对象提供ID，应该可以使用该ID选择对象，为什么我要问这是，在使用协作的东西时我们无法确定所有连接的节点都将具有同一索引中的项目，因此唯一ID将很有用。

Answer 1

您想使用：

 canvas.setActiveObject(canvas.item(0));

在按钮单击事件

中

该数字对应于将对象添加到画布的顺序。

见这里：

http://jsfiddle.net/ThzXM/1/

Answer 2

是的，您可以通过在all.js中添加以下代码来为每个项目设置ID

在fabric.js构建版本1.3.0中：在Object声明中添加

 var object = {
   id:   this.id,
   remaining properties in all.js
  }

现在您可以使用以下命令设置对象ID：

canvas.getActiveObject().id=your id value;

您可以使用以下方法检索对象ID：

Myid= canvas.getActiveObject().get('id');

Answer 3

要查找所选对象的结构对象编号（项目编号），请使用：

canvas.on({
    'object:selected': selectedObject
});

function selectedObject(e) {
    var id = canvas.getObjects().indexOf(e.target);
}

如果您以编程方式设置对象，那么

var id是相同的数字，如Dan Brown的回复：

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.

Answer 4

向您的对象添加ID。

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Rect({
    id: 123,
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
}));

canvas.add(new fabric.Circle({
    id: 456,
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
}));

function removeSpot(canvas, id) {
    canvas.forEachObject(function(obj) {
        if (obj.id && obj.id === id) canvas.remove(obj);
    });
}

// remove rect
removeSpot(canvas, 123);

// remove circle
removeSpot(canvas, 456);

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

4 个答案: