ClipTo mit Bild und Hintergrundbild

Question

Ich versuche, ein Bild mit einem anderen Bild in einem Stoff Leinwand mit Hintergrund zu befestigen, ich versuche, dem Beispiel here zu folgen.

Aber wenn ich backgroundColor in den ersten Zeilen hinzufügen, der Clipping funktioniert nicht mehr:

var canvas = new fabric.Canvas('divPad', { 
    width: $("#divPad").width(), 
    height: $("#divPad").height(), 
    backgroundColor:'yellow', 
}); 

Kann mir jemand helfen?

Answer 1

Es kann nicht funktionieren. Sie schneiden nicht, sondern spielen mit der globalen Composite-Operation im "soruce-atop" -Modus. Dies bedeutet, dass Ihr Bild nur auf einem Teil der Leinwand gezeichnet wird, wo es etwas anderes als transparent ist.

Wenn Sie eine Hintergrundfarbe als Hintergrund verwenden, kann dies nicht mehr funktionieren.

Eine Lösung könnte ein div unter der Leinwand haben und das div gelb machen und nicht die Leinwand selbst.

Oder Sie könnten versuchen, eine Form Ihres Bildes zu erhalten und ein echtes Clipping statt globales Compositing zu machen.