2013-08-19 1 views
3

В настоящее время я пытаюсь создать ткань. Группа, которая содержит несколько тканью. Каждый круг должен выбираться и перетаскиваться.Объекты в группах не подбираются

Объекты, которые добавляются непосредственно на холст, могут быть выбраны по умолчанию. Но когда я добавляю круги в группу, они не могут быть выбраны.

Я мог только сделать их доступными, когда добавляю круги в группу и дополнительно к холсту. Но это выглядит немного странным для меня. Я имею в виду ... Мне не нужно добавлять детей группы дополнительно к холсту, чтобы они были нарисованы, но мне нужно добавить их дополнительно к холсту, чтобы сделать выбор работы?

Является ли это поведение предназначенным, я делаю что-то неправильно или это ошибка?

jQuery(function() { 
    var canvas = new fabric.Canvas('playground'); 

    // First the selectable circle: 
    var singleCirlce = new fabric.Circle({top: 100, left: 100, radius: 30, fill : 'red'}); 
    canvas.add(singleCirlce); 

    //second the circle in a group that is not selectable: 
    var group = new fabric.Group(); 
    var groupedCircle = new fabric.Circle({top: 200, left: 200, radius: 30, fill : 'blue'}); 
    group.add(groupedCircle); 
    canvas.add(group); 
}); 
+0

Это по дизайну. Группа является самостоятельной организацией. Он действует так же, как и любой другой объект, поэтому его можно выбирать, масштабировать, перемещать, поворачивать и т. Д. Если вам нужно работать с объектами отдельно, вы должны просто добавить их отдельно к холсту. Зачем нужна группа? – kangax

+0

Я хотел бы создать граф сцены, где группы действуют как узел в графе, а объекты действуют как листы на графике. Или вы также можете сказать, я ожидал, что группа и объект будут частью составного шаблона. – treeno

+0

Например: Я хочу создать ButtonBar, который состоит из Rect в качестве фона и 3 кругов над фоном. Круги должны вести себя как кнопки и должны быть интерактивными. Круги и Backgroud являются дочерними элементами группы, так что полный ButtonBar можно перемещать, масштабировать или что-то еще. – treeno

ответ

0

Что вы можете сделать, это: создать не-сгруппированных версию сгруппированных элементов, таких как:

objects = {...}; 
canvas.add.apply(canvas, objects); 
canvas.renderAll(); 

имеют общую groupId для каждого объекта, слушать:

canvas.on('object:moving', function() {...}); 

Если какой-либо из объектов перемещен, переместите все объекты в этом groupId соответственно.

note: Это всего лишь теория, я еще не реализовал ее, и я не уверен, как она будет реагировать, если одновременно будут выбраны несколько объектов.