我在 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 );
这似乎选择了正确的对象,但不会拖动它。
最佳答案
您是否尝试过将 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>
关于javascript - 如何选择并拖动与在 Fabricjs 中单击的对象不同的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39605910/