javascript - 如何选择并拖动与在 Fabricjs 中单击的对象不同的对象？

Question

我在 Canvas 上绘制了多个对象，但顶部的对象具有透明度。所以你可以看到它后面的图像。是无法选择的。我希望能够单击该图像，然后以编程方式选择其后面的图像，当我拖动鼠标时，移动该图像(不是前面的透明图像)。

我尝试了这段代码，但它不起作用:

function onSelect(event)
{
    var activeObject = canvas.getActiveObject();
    var newActive = canvas.getObjects()[ 0 ];

    //Do nothing
    if ( activeObject === newActive ) return;

    //Switch
    canvas.setActiveObject( newActive );
}

//Add listener
canvas.on( "object:selected", onSelect );

这似乎选择了正确的对象，但不会拖动它。

Answer 1

您是否尝试过将 selectable 和 evented 属性设置为 false？这是一个在其他两个方 block 上有一个蓝色方 block 的示例。您只能与蓝色方 block 下方的 2 个物体交互，而根本不能与蓝色方 block 交互。

var canvas = new fabric.Canvas("c", { preserveObjectStacking: true });

canvas
  .add(new fabric.Rect({
    top: 0,
    left: 0,
    width: 100,
    height: 100,
    fill: "green"
  }))
  .add(new fabric.Rect({
    top: 50,
    left: 50,
    width: 100,
    height: 100,
    fill: "red"
  }))
  .add(new fabric.Rect({
    top: 0,
    left: 0,
    width: 400,
    height: 300,
    opacity: 0.5,
    fill: "blue",
    selectable: false,
    evented: false,
  }))
  .renderAll();

canvas { border: 1px solid black; }

<canvas id="c" width="400" height="300"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>