Как программно выбрать объект Fabric.js

Я хочу программно выбрать объект 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.

Я очнулся и накормил, здесь я ищу какой-то момент, как начать.

EDIT

Мне нравится иметь идентификатор для каждого объекта, он должен быть доступен для выбора объекта с использованием этого идентификатора, поэтому я прошу об этом, используя совлокальные вещи, которые мы не можем точно сказать, что все подключенные узлы будут иметь элемент в том же индексе, поэтому будет полезен уникальный идентификатор.

Ответы

Ответ 1

Да, вы можете установить id для каждого элемента, добавив ниже код в all.js

В build.js build версии 1.3.0: в объявлении объекта добавьте

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

Теперь вы можете установить идентификатор объекта:

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

Вы можете получить идентификатор объекта с помощью:

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

Ответ 2

Вы хотите использовать:

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

В кнопках нажмите событие

Число соответствует порядку, в котором объект был добавлен в холст.

Смотрите здесь:

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

Ответ 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.

Ответ 4

добавить идентификатор для ваших объектов.

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