ファブリックのサークルのグループに選択できないのはなぜですか？

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

をIは、ループで実行され、ラインのIDによってグループにいくつかの円を挿入します。 （すべての行がIDを持つ）：

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は表示されません。

何が欲しいのは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