Почему выбор не работает с группой кругов в fabricjs?

Question

У меня есть этот круг объект:

function makeCircle(left, top, line1, line2, lineId, stationIndex, stationID) { 
    var c = new fabric.Circle({ 
     left: left, 
     top: top, 
     strokeWidth: 0.2, 
     radius: 1.5, 
     fill: '#ffffff', 
     stroke: '#666', 
     // isMoving: false, 
     selectable: true, 
    }); 
    c.hasControls = c.hasBorders = true; 
    c.stationID = stationID; 
    c.stationIndex = stationIndex; 

    c.line1 = line1; 
    c.line2 = line2; 

    return c; 
} 

я бег в цикле, и вставить несколько кругов в группу с идентификатором строки. (каждая строка имеет идентификатор):

circleGroup[lineId] = new fabric.Group([],{selectable: false,}); 
var circle = makeCircle(x, y, null, line, lineId, 0, circle1Id); 


circleGroup[lineId].add(circle); 

Я хочу, когда нажмите на редактирование() функция, круги в circleGroup [lineId] (lineId = 10120 для Exemple) можно выбрать.

function edit(lineId) { 
    circleGroup[lineId].selectable = true; 
    canvas.renderAll(); 

} 

Но ничего не произойдет. круги не двигаются, когда я нажимаю на них и пытаюсь двигаться.

какая проблема?

Answer 1

Я не совсем уверен, что вы после. Вы хотите, чтобы круги стали выбираемыми/интерактивными, или вы хотите, чтобы группы кругов были выбраны/интерактивны?

Похоже, ваша функция редактирования делает возможным выбор circleGroup[lineID]. Приведенный выше код не показывает, что группа круга не выбрана.

Если вы хотите сделать каждый из объектов в circleGroup по выбору. Попробуйте:

function edit(lineId) { 
    var group = circleGroup[lineId] 
    for (var i=0; i<group._objects.length; i++){ 
     group._objects[i].selectable = true; 
    } 
    canvas.renderAll(); 
} 

Обратите внимание, что при нажатии на одну из ваших кругов, она по-прежнему будет находиться внутри группы, так что любое взаимодействие с выбором (перетаскивание, масштабирование, поворот и т.д.) будет применяться к группе.

Если вы хотите сделать каждый круг интерактивным, сначала вам нужно разгруппировать его. Попробуйте следующее: Grouping and Ungrouping Fabric.js objects