如何調整背景圖片以匹配畫布？ FabricJS

所以我目前有一個問題。我正在使用Meteor.js和Fabric.js，我試圖找出如何重新調整圖像以適合畫布。目前這是我的代碼：如何調整背景圖片以匹配畫布？ FabricJS

var canvas = new fabric.Canvas('c1'); 
canvas.setWidth(800); 
canvas.setHeight(800); 
var canvasHeight = canvas.height; 
var canvasWidth = canvas.width; 

//Just a debug statement console.log(canvasWidth, canvasHeight); 

var bgImg = new fabric.Image(); 
bgImg.setSrc('http://www.aamcocolorado.com/images/Highway- 
Traffic.jpg'); 
bgImg.set({ 
    top: canvasHeight/2, 
    left: canvasWidth/2, 
    scaleX: canvasWidth/bgImg.width, 
    scaleY: canvasHeight/bgImg.height, 
}); 

canvas.setBackgroundImage(bgImg);

這樣做的結果是我得到的圖片的片段，沒有縮放到正確的大小。想知道我錯過了什麼？

（已簽出其他的答案，但沒能如何將它應用到流星，是一個JS初學者）

來源

2017-08-14 Shishir Jakati

我想象'bgImg.setSrc'是異步的，所以也許你需要等待爲圖像加載，以便知道它的寬度和高度 - 請參閱[文檔]（http://fabricjs.com/docs/fabric.Image.html#setSrc） - 可選回調函數（第二個參數）在圖像時調用已經完成加載 –

setSrc是異步的。你可以提供一個函數作爲回調加載圖像後運行：

VAR

canvas = new fabric.Canvas('c1'); 
canvas.setWidth(800); 
canvas.setHeight(800); 
var canvasHeight = canvas.height; 
var canvasWidth = canvas.width; 

//Just a debug statement console.log(canvasWidth, canvasHeight); 

var bgImg = new fabric.Image(); 
bgImg.setSrc('http://www.aamcocolorado.com/images/Highway-Traffic.jpg', function() { 
    bgImg.set({ 
    top: 0, 
    left: 0, 
    scaleX: canvasWidth/bgImg.width, 
    scaleY: canvasHeight/bgImg.height, 
    }); 
}); 

canvas.setBackgroundImage(bgImg);

https://jsfiddle.net/upg0tyvz/1/

來源

2017-08-15 00:05:49 Ivan

噢，非常感謝你，一小時後我一直在嘲笑我的頭腦。如果你有時間，你可以從概念上解釋什麼是異步回調。或者指向一些參考資料的方向？ –

當然，簡單地說，設置src需要網絡調用，所以它不會立即發生（它是異步的）。回調允許您在加載圖像後運行代碼。 MDN有一個更詳盡的解釋：https：//developer.mozilla.org/en-US/docs/Glossary/Asynchronous – Ivan

由於.setSrc加載圖像異步，則需要等待圖像之前完成加載它的尺寸是已知的

.setSrc有一個可選的回調參數在圖像完成加載時調用，所以也許你可以做

var bgImg = new fabric.Image(); 
bgImg.setSrc('http://www.aamcocolorado.com/images/Highway-Traffic.jpg', function() { 
    bgImg.set({ 
     top: canvasHeight/2, 
     left: canvasWidth/2, 
     scaleX: canvasWidth/bgImg.width, 
     scaleY: canvasHeight/bgImg.height, 
    }); 
    canvas.setBackgroundImage(bgImg); 
});

來源

2017-08-15 00:05:35

如何調整背景圖片以匹配畫布？ FabricJS

回答

相關問題