为什么可选择的不适用于fabricjs中的一组圈子？答案

【问题标题】：Why the selectable not working to a group of circles in fabricjs?为什么可选择的不适用于fabricjs中的一组圈子？
【发布时间】：2016-08-26 03:44:17
【问题描述】：

我有这个圆形对象：

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

我在一个循环中运行，并通过一行的 id 将一些圆圈插入到一个组中。（每一行都有 id ）：

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


circleGroup[lineId].add(circle);

我希望当点击 edit() 函数时，circleGroup[lineId] 中的圆圈（例如 lineId = 10120）可以选择。

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

}

但不是什么都没发生。当我点击它们并尝试移动时，圆圈没有移动。

什么问题？

【问题讨论】：

标签： javascript jquery frontend fabricjs web-frontend

【解决方案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

【讨论】：