So fügen Sie Füllfarbe in Bild mit fabricjs

Question

Welche fabric.js Funktion ermöglicht es, Farben im Bild zu füllen?

Ich möchte Bild mit schwarzen Linien und weißem Hintergrund für das Malen laden.

Ich habe eine Eingabefarbe mit verschiedenen Farben für den Benutzer in den weißen Teilen

Ein weiterer Zweifel Farbe Bild hinzufügen: Wie kann ich die gleiche Größe wie die Leinwand das Bild automatisch die Größe?

https://jsfiddle.net/gislef/s3rvoon6/

fabric.Object.prototype.transparentCorners = false; 
    fabric.Object.prototype.padding = 5; 


    var $ = function(id){return document.getElementById(id)}; 


    var canvas = this.__canvas = new fabric.Canvas('c'); 
    canvas.setHeight(300); 
     canvas.setWidth(500); 

    fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) { 
    canvas.add(oImg); 
}); 

Answer 1

Um das Bild zu Höhe und Breite der Leinwand Größe ändern Sie tun können:

fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) { 
    oImg.scaleToWidth(canvas.getWidth()); 
    //oImg.scaleToHeight(canvas.getHeight()); 
    canvas.add(oImg); 
}); 

füllen In Bezug auf Farbe nichts da, wie das jetzt ab. Es gibt removeWhite Filter, der geändert werden kann, um das Weiß durch eine andere Farbe zu ersetzen, aber das würde das ganze Weiß anstelle einer Zone des Weiß entfernen.

Wenn Sie eine Anwendung anstreben, die wie ein Malbuch für Kinder aussieht, sollten Sie versuchen, SVG-Assets zu verwenden und sie nach Form zu färben. Dies bedeutet, dass Sie sorgfältig Ihre eigenen Assets erstellen müssen, bevor Sie sie mit der Anwendung verwenden.