具有纵横比的 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
**/

到目前为止，我已经达到了每个图像居中但其纵横比没有保持的地步，使每个图像看起来都被拉伸了（它应该扩大宽度，将其居中并切断图像的其余部分）：

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,
 });