Wie wähle und ziehe ich ein anderes Objekt als das, auf das in fabricjs geklickt wurde?

Question

Ich zeichne mehrere Objekte auf einer Leinwand, aber die oberste hat Transparenz. So können Sie Bilder dahinter sehen. Es ist nicht wählbar. Ich möchte in der Lage sein, auf das Bild zu klicken und dann programmatisch ein Bild dahinter auszuwählen, und wenn ich die Maus ziehe, verschiebe das (nicht das vordere, trasnparent Bild).

habe ich versucht, diesen Code, aber es funktioniert nicht:

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

Dies scheint das richtige Objekt zu wählen, aber es wird nicht ziehen.

Answer 1

haben Sie versucht, nur die selectable und evented Eigenschaft auf false setzen? Hier ist ein Beispiel mit einem blauen Quadrat über zwei anderen Quadraten. Sie können nur mit den 2 Objekten unter dem blauen Quadrat und nicht mit dem blauen Quadrat interagieren.

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>