如何在cloudinary中的重叠图像上定位？

Question

以下面的url（image）为例 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_220,y_140/yellow_tulip.jpg

据我了解，第一张图片yellow_tulip绘制在(0, 0)上，它是左上角。第二个图像brown_sheep来自(220, 140)，它是yellow_tulip的右下角，因为(0, 0)从画布的左上角开始。

从我所理解的到第三个图像出现，一切都是有意义的。horses也从(220, 140)开始，但是它如何从第二个图像brown_sheep的中心开始呢？我真的很困惑

Answer 1

当您应用叠加层更改时，图像的尺寸也会更改，因此在应用x和y坐标时应予以考虑。

坐标是从图像的中心计算出来的，但是由于第一个图像中画布的大小是220 x 140，因此将棕色羊皮叠加层的坐标设置为220 x 140会使画布的尺寸增加一倍，达到440 x 280

现在，以下网址的含义是440 x 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill/yellow_tulip.jpg

要现在将马匹覆盖在棕色绵羊上，您需要将尺寸重新计算为以下内容：{https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg

或 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_330,y_210/yellow_tulip.jpg