如何调整背景图片以匹配画布？ 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

回答

相关问题