为什么在fabricjs中可选择的不适用于一组圆

Why the selectable not working to a group of circles in fabricjs?

本文关键字：一组 适用于 不适用 fabricjs 可选择 为什么      更新时间：2023-09-26

我有这个圆对象：

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

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

什么问题？

我不太确定你在追求什么。您希望圆成为可选择/交互式的，还是希望圆组是可选择/交互的？

看起来您的编辑功能正在使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();
}

请注意，当您单击其中一个圆时，它仍将在一个组中，因此与所选内容的任何交互（拖动、缩放、旋转等）都将应用于该组。

如果你想让每个圆圈都具有互动性，你需要先取消它们的分组。尝试以下操作：对Fabric.js对象进行分组和取消分组

相关文章：