Question

所以我目前遇到了问题。我正在使用Meteor.js和Fabric.js，我试图找出如何重新缩放图像以适应画布。目前这是我的代码：

 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);

这样做的结果是我得到的图片片段没有缩放到正确的大小。想知道我错过了什么？

（已经检查了其他答案，但无法将其应用于Meteor，我是JS初学者）

Answer 1

当.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);
});

Answer 2

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/

如何调整背景图像的大小以匹配画布？ FabricJS

2 个答案: