キャンバスの背景イメージのサイズを変更する - Fabricjs

Question

私はfabricjsを使ってキャンバスを再生し、javascript経由でイメージを読み込みます。

キャンバスのサイズを変更して反応させる機能があり、キャンバスに合わせて読み込まれた背景画像のサイズを変更したいが、アスペクト比を維持したい。

私の基準を満たし、誰かが助けてくれることを期待している例は現在見つかりませんでした。

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

あなたresizeCanvasは（）のようになります。

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

そして、あなたは大丈夫でなければなりません。