具有宽高比的FabricJS中心

Question

我不久前问过一个问题，关于所有项目的中心，但忘记提及每个图像的纵横比需要保留。

规则：

/**
* Each image needs to be exactly half width and size of container
* Each image needs to be positioned in the exact centre of the grid
* Each image needs to be displaying like CSS 'cover'
* Each image should maintain its aspect ratio
* There should be no overlapping on any of the images
**/

到目前为止，我已经达到了每个图像居中的程度，但是它的纵横比没有保持，使每个图像看起来都很拉伸（它应该放大宽度，居中并切断图像的其余部分）：< / p>

https://codepen.io/peteringram0/pen/ZxbmEZ?editors=0010

Answer 1

我使用cropY属性找到了解决方法。

https://codepen.io/peteringram0/pen/XEKXXJ

img.set({
   left: 0,
   top: 0,
   cropY: size.cropY,
   height: size.height,
   scaleY: size.ratio,
   scaleX: size.ratio,
 });