如何选择和拖动与在 fabricjs 中单击的对象不同的对象？

【问题标题】：How do I select and drag a different object than the one clicked in fabricjs?如何选择和拖动与在 fabricjs 中单击的对象不同的对象？
【发布时间】：2017-01-29 01:49:09
【问题描述】：

我在画布上绘制了多个对象，但最上面的对象具有透明度。所以你可以看到它背后的图像。它是不可选择的。我希望能够单击该图像，然后以编程方式选择它后面的图像，当我拖动鼠标时，移动那个 （不是前面的透明图像）。

我试过这段代码，但它不起作用：

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

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

【问题讨论】：

标签： javascript canvas html5-canvas fabricjs

【解决方案1】：

您是否尝试将 selectable 和 evented 属性设置为 false？这是一个蓝色方块覆盖其他两个方块的示例。您只能与蓝色方块下方的 2 个对象进行交互，而根本不能与蓝色方块交互。

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>

【讨论】：

事件是关键