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

我在一个循环中运行，并通过一行的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();

}

但不会发生任何事。当我点击它们并尝试移动时，圆圈不会移动。

问题是什么？

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

为什么selectable不能在fabricjs中使用一组圆圈？

1 个答案: