調整畫布的背景圖像 - 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(); 
} 

而且你應該沒問題。