Fabric JS 多对象选择忽略移动 isDisabled

Question

我已将以下属性设置为 Fabric JS 画布上的所有对象。

lockMovementX: isDisabled,
lockMovementY: isDisabled,
lockScalingX: isDisabled,
lockScalingY: isDisabled,
lockUniScaling: isDisabled,
lockRotation: isDisabled,

但是，当我按住 Shift 键选择多个对象时，这些对象会再次移动，但作为一个组，知道如何禁用这种可能性吗？

Answer 1

canvas.selection = false

这样，您可以禁用组选择，但对象仍然可以选择。

Answer 2

您是否尝试将 selectable 属性设置为 false？这将阻止选择对象，但事件仍会在它们上触发

http://fabricjs.com/docs/fabric.Object.html#selectable

可选：布尔值 当设置为

false

时，无法选择对象进行修改（使用基于点击或基于组的选择）。但事件仍在继续。

Answer 3

想知道有多少人不明白一个简单的问题。

是的，这是可能的。您必须监听选择：更新并检查选择中是否有某些内容被锁定，然后锁定目标。

这对我的 Fabric 4.4.0 有用。我从我的项目中删除了它，并希望这个代码示例能够工作。至少它应该展示“如何”。

var canvas = window._canvas = new fabric.Canvas('c');

isLockedInSelection()
{
    let activeObjects = canvas.getActiveObjects();
    for (let i in activeObjects)
    {
        if (activeObjects[i].lockMovementX)
            return true;
    }
    return false;
}

canvas.on('selection:updated', ({selected, target}) =>
{
    if (isLockedInSelection())
    {
        target.lockMovementX = true;
        target.lockMovementY = true;
        target.lockSkewingX  = true;
        target.lockSkewingY  = true;
        target.lockRotation  = true;
        target.lockScalingX  = true;
        target.lockScalingY  = true;
    }
});

Answer 4

是的，这是可能的。您必须监听选择：更新并检查选择中是否有某些内容被锁定，然后锁定目标。

欣赏这种方法，我可能在以后的某个时候需要它。对于我自己当前的实现，我选择简单地取消选择任何锁定的对象

function objectIsLocked(object) {
  return (
    object.lockMovementX &&
    object.lockMovementY &&
    object.lockRotation &&
    object.lockScalingFlip &&
    object.lockScalingX &&
    object.lockScalingY &&
    object.lockSkewingX &&
    object.lockSkewingY
  )
}

canvas.on('selection:created', (e) => {
    let dirty = false
    e.selected.forEach((obj) => {
      if (objectIsLocked(obj)) {
        canvas.getActiveObject().removeWithUpdate(obj)
        dirty = true
      }
    })

    if (dirty) this.canvas.requestRenderAll()
})