代码之家 › 专栏 › 技术社区 › Glen Elkins

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

fabricjs2 fabricjs

0

Glen Elkins · 技术社区 · 6 年前

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

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

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

.

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

当最初将图像加载为正方形并设置宽度:1000,高度:400时,就会发生这种情况,但相反,它看起来像是在取高度并缩小宽度以保持其正方形。

1 回复 | 直到 6 年前

1

Durga 6 年前

你需要设置 scaleX 宽度和 scaleY 高度。这是一个突破 change 对于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>