fabricjs - FabricJS 2 - 图像没有拉伸到给定的宽度

Question

我刚刚从fabric 1.7升级到2，现在图像对象的行为有所不同。查看屏幕截图，箭头所在的图像完全忽略了我在其上设置宽度的事实，看起来它实际上是基于缩放它给定高度以保持图像比例。我不希望这种情况发生，图像需要拉伸到我告诉它的大小。

有人有任何想法阻止它这样做吗？我的意思是，如果我在图像对象的选项中设置宽度，我希望它尊重这些尺寸。它应该被拉伸以填充红色框所在的位置。

例如，最初将图像加载为正方形并设置 {width:1000,height:400} 时会发生这种情况，但看起来它正在获取高度并缩小宽度以使其保持正方形。

Answer 1

您需要设置scaleX宽度和scaleY高度。这是 v2 的重大变化。

演示

var canvas = new fabric.Canvas('c');
var index = 0,
  json;
var url = '//fabricjs.com/assets/pug.jpg';

fabric.Image.fromURL(url, function(img) {
  var elWidth = img.naturalWidth || img.width;
  var elHeight = img.naturalHeight || img.height;
  img.set({
    scaleX:200/elWidth,
    scaleY:200/elHeight
  })
  canvas.add(img);
})

canvas{
 border:2px solid #000;
}

<script type="text/javascript" src="
https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>