Вопрос:

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

javascript canvas fabricjs

47315 просмотра

4 ответа

3716 Репутация автора

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

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

РЕДАКТИРОВАТЬ

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

Автор: Thirumalai murugan Источник Размещён: 20.11.2013 01:11

Ответы (4)


70 плюса

1305 Репутация автора

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

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

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

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

Глянь сюда:

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

Автор: Dan Brown Размещён: 20.11.2013 05:18

21 плюса

1245 Репутация автора

Решение

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

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

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

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

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

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

Myid= canvas.getActiveObject().get('id');
Автор: John Размещён: 22.11.2013 03:25

8 плюса

126 Репутация автора

Чтобы найти номер объекта ткани (номер изделия) выбранного объекта, используйте:

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

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

var id- это то же число, если вы программно устанавливаете объект, как в ответе Дана Брауна:

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.
Автор: Dradge Размещён: 23.04.2015 03:19

0 плюса

5682 Репутация автора

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

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);
Автор: Brad Размещён: 19.04.2019 03:56
Вопросы из категории :
32x32