如何選擇和拖動不同於fabricjs中單擊的對象？

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>