Kann Bild nicht nach vorne bringen in FabricJS

Question

Ich habe einige Probleme, ein FarbicJS-Element an die Vorderseite der Leinwand zu bringen.

Nach ein paar Web-Browsing habe ich diesen Beitrag gefunden: Control z-index in Fabric.js Hoverver scheint es absolut keine Wirkung in meinem Code.

EDIT: this topic bringen auch einige andere Lösungen, aber keine Wirkung.

Ich habe vielleicht einen dummen Fehler gemacht, aber ich kann nicht herausfinden, wo. Hier ist mein Code (zumindest der betreffende Teil):

//first image, well displayed and functionnal 
fabric.Image.fromURL(sourceImg, function(img){ 
    //don't pay attention to following properties 
    img.left = YYY 
    img.top = XXX 
    img.width = whatever 
    img.height = whatever 
    img.rega = something 

    //big animation part 
    img.on('mouseover', function(){ 
     //blabla 
    }); 
    that.canvas.add(img); 
}); 

//second image (text), not displayed 
var myText = new fabric.Text("SI REGA2", { 
    //some properties... 
    left: YYY // Here coordonnates of the text are the same 
    top: XXX // than first image's coordonnates. 
    selectable: false, 
    hasControls: false, 
    hasBorders: false, 
    fontSize: 20 
}); 
this.canvas.add(myText); //adding text to the canvas... 
this.canvas.bringToFront(myText); //... and bringing back to the front in order to place it over the first image 

Es gibt keine Fehler in der Konsole, so glaube ich, alles gut geht, aber der Text nicht angezeigt wird. Oder zumindest unter dem ersten Bild.

Was soll ich tun?

Answer 1

Ich weiß nicht warum, aber Ausführung canvas.sendToBack(img);, wird den Text vor dem Bild setzen. canvas.sendToFront(myText); wird nicht obwohl. So unter dem Code den Text vor dem Bild setzen:

var canvas = new fabric.Canvas('fabric'); 
canvas.backgroundColor = '#ffffff'; 
canvas.renderAll(); 

fabric.Image.fromURL("https://placehold.it/200x200", function(img){ 
    img.left = 0; 
    img.top = 0; 
    img.width = 200; 
    img.height = 200; 

    canvas.add(img); 
    //Where the magic happens 
    canvas.sendToBack(img); 
}); 

var myText = new fabric.Text("SI REGA2", { 
    left: 0, 
    top: 0, 
    selectable: false, 
    hasControls: false, 
    hasBorders: false, 
    fontSize: 20 
}); 
canvas.add(myText); 

JSFiddle

Answer 2

Diese Frage lange beantwortet wurde, aber ich dachte, ich könnte ein paar mehr Informationen hinzufügen, wie ich gerade angefangen habe mit Bastelei GewebeJS.

Das Verhalten hier gesehen ist aufgrund der Tatsache, dass fabric.Image.fromURL() funktioniert asynchron (die Callback-Funktion Hinweise dazu). So wird das myText Objekt zuerst der Leinwand hinzugefügt, dann das Bild zweite.

FabricJS bestimmt den Z-Index anhand der Reihenfolge, die der Zeichenfläche hinzugefügt wurde. Daher ist es sinnvoll, dass das Bild den Text überlappt.

Überprüfen Sie die Konsole in this Fiddle, um zu sehen, dass der Text vor dem Bild hinzugefügt wird und dass das Objekt myText innerhalb des Rückrufs fabric.Image.fromURL verfügbar ist.