Größe ändern Hintergrundbild von Leinwand - Fabricjs

Question

Ich benutze Fabricjs, um mit Leinwand zu spielen, und ein Bild über Javascript laden.

Ich habe eine Funktion, die Größe des Canvas ändert, um es ansprechend zu machen und als solches die Größe des Hintergrundbilds, das geladen wurde, anzupassen, aber das Seitenverhältnis beizubehalten.

Ich habe derzeit keine Beispiele gefunden, die meine Kriterien erfüllen und hoffe, dass jemand helfen kann.

Javascript

var canvas = new fabric.Canvas('drawing_layer'); 
var img = new Image(); 
      img.onload = function() { 
       canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), { 
        originX: 'left', 
        originY: 'top', 
        left: 0, 
        top: 0 
       }); 

// initially sets width of canvas to fit the image 
       canvas.setDimensions({ 
        width: img.width, 
        height: img.height 
       }); 
      }; 
// below is a call to function that resizes the canvas 
resizeCanvas(); 

//sets listener to resize event 
      window.addEventListener('resize', resizeCanvas); 

Answer 1

Ihre resizeCanvas() sollte wie folgt aussehen:

resizeCanvas(width, height) { 
    canvas.backgroundImage.scaleToWidth(width); 
    canvas.backgroundImage.scaleToHeight(height); 
    canvas.setDimensions({width: width, height: height}); 
    canvas.renderAll(); 
} 

Und Sie sollten in Ordnung sein.