FabricJS: Hinzufügen von SVG zum Canvas aber unsichtbar beim Export

Question

Ich versuche, ein SVG zu einem Canvas - Objekt mit FabricJS hinzuzufügen und dann in ein Daten - URL - Bild zu exportieren, damit der Benutzer das Bild speichern kann, der Pfeil wird in der Canvas, aber wenn ich die ToDataURL-Methode aufrufen und das Bild überprüfen, ist es nur ein leeres Bild. Ich überprüfte auch die toSVG() Methode, um zu überprüfen, ob der Durchhang dort ist, aber es ist nicht im exportierten SVG.

Ich habe eine fiddle erstellt, um dies zu demonstrieren.

In dem Beispiel wird der Pfeil angezeigt, wenn die Schaltfläche geklickt wird, und ich rufe canvas.toDataURL() und überprüfte es in meinem Browser und das zeigt ein leeres Bild. Der Aufruf von canvas.toSVG() gibt auch ein SVG ohne den Pfeil svg zurück, wie in der Geige zu sehen ist.

Kann mir jemand in die richtige Richtung zeigen?

Vielen Dank im Voraus!

Answer 1

Sie müssen die Anrufe in den Rückruf stellen, andernfalls treten sie auf, bevor die Daten z.

fabric.loadSVGFromString(svgString, function(results, options) { 
    var arrow = results[0]; 
    canvas.add(arrow); 
    console.log(canvas.toDataURL()); 
    console.log(canvas.toSVG()); 
    }); 

Oder as a fiddle