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

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

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

I want when click on edit () function, The circlegroup[lineId] (lineId = 10120 for exemple) can be selectable.

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

}

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

в чем проблема?

1 ответ

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

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

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