Dynamisch neue Stoffleinwände hinzufügen

Question

Ich arbeite an einem Projekt, das das Erstellen mehrerer Canvas-Elemente erfordert (einzeln Balken, die jeweils eine unterschiedliche Farbübergang darstellen). Ich möchte dies dynamisch mit fabric.js tun, z. B .:

 function add_gradient(color_stops){
     // Füge ein neues rechteckiges Canvas mit der angegebenen Farbübergangsfüllung hinzu
     var grad_box = document.getElementById("divWithCanvases");

     var newCanvas = document.createElement("canvas");
     grad_box.appendChild(newCanvas);

     var gradCanvas = fabric.Canvas(newCanvas, {width: 500, height:50});
     var ctx = gradCanvas.getContext('2d');
     // Mach etwas mit dem Canvas...
 }

Der Aufruf von fabric.Canvas schlägt jedoch mit dem Fehler "this.initialize ist undefiniert" fehl. (fabric.js Zeile 1627, Version 1.4.13)

Wie kann ich entweder:

1. Eine neue Fabric-Leinwand basierend auf einem HTML-Element generieren (anstelle der Zeichenfolgen-ID), oder,
2. Ein automatisch generiertes neues Canvas-Element an das DOM anhängen? (das Formfabric.Canvas() ohne Argumente wird... etwas machen... aber es kann nicht mit appendChild verwendet werden)

Laut der fabric.js-Dokumentation akzeptiert der Fabric.Canvas-Konstruktor entweder ein HTMLElement oder eine Zeichenfolgen-Element-ID. Ich kann es nur mit der Zeichenfolge zum Laufen bringen.

Answer 1

Die Funktion fabric.Canvas ist ein Konstruktor, den Sie mit dem new Operator aufrufen müssen:

var gradCanvas = new fabric.Canvas(newCanvas, {width: 500, height:50});

Answer 2

Ich habe obigen Fehler bekommen, wegen

Stellen Sie sicher, dass Ihr HTML-Element canvas sein sollte

Answer 3

Wenn wir dynamisch eine Leinwand hinzufügen und die Leinwand-Fabric-API aufrufen möchten, müssen wir einen anderen Namen wie diesen angeben.

var html_canvas = document.createElement('canvas');

html_canvas.id = "CursorLayer";

var canvas = new fabric.Canvas(html_canvas, canvasConfigOptions);
// canvasConfigOptions ist optional

Jetzt können wir alle Stoffoperationen auf diese canvas durchführen

Answer 4

Sie können das Canvas-Element direkt aus dem Fabric-Dienstprogramm erstellen über createCanvasElement und dann dieses neu erstellte Element als ersten Parameter der Canvas-Konstruktorfunktion zuweisen, um ein virtuelles Canvas zu erstellen und dennoch die Möglichkeit zu haben, Operationen auszuführen.

let tempCanvasEl =  fabric.util.createCanvasElement(),
tempCanvasCtx = tempCanvasEl.getContext('2d',{ willReadFrequently: true }),
tempCanvas = new fabric.Canvas(tempCanvasEl)

oder verwenden Sie sogar den staticCanvas-Konstruktor, falls das neue Canvas nur für Leseoperationen verwendet wird, wie zum Beispiel getPixelColor, da willReadFrequently hier auf true gesetzt ist.

tempCanvas = new fabric.StaticCanvas(tempCanvasEl)

Hoffentlich hilft das.