FabricJS 2-图片未拉伸到给定宽度

Question

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

有人有阻止它执行此操作的想法吗？我的意思是，如果我在图像对象的选项中设置了宽度，我希望它尊重这些尺寸。它应该伸展以填充红色框所在的位置。

例如，当最初将图像加载为正方形并设置{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>