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

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
  }));

当我点击名为的按钮时，我有两个按钮

1. 选择矩形
2. 选择第二个对象

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

这是解决方法的Jsfiddle。

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

编辑

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

Answer 1

是的，您可以通过在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 2

你想用：

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

在按钮单击事件中

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

看这里：

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

Answer 3

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

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

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

如果您按照Dan Brown的回复以编程方式设置对象，则var id是相同的数字：

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);