Question

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

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

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？这是一个蓝色正方形在另外两个正方形上的例子。你只能与蓝色方块下面的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>

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

1 个答案: