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

Question

我刚刚从 fabric 1.7 升级到 2，现在图像对象表现得像 differently.See 屏幕截图，箭头所在的图像完全忽略了我在其上设置宽度的事实，它看起来就像它实际上是根据给定的高度缩放它以保持图像比例。我不希望发生这种情况，图像需要拉伸到我指定的大小。

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

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

Answer 1

您需要设置 scaleX 宽度和 scaleY 高度。这是 v2.

的突破 change

演示版

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>

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

FabricJS 2 - Image isn't stretching to the given width

fabricjs

fabricjs2