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