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？我真的很困惑。

标签： cloudinary

Answer 1

当您应用覆盖更改时，图像的尺寸会发生变化，因此在应用 x 和 y 坐标时应考虑到这一点。

坐标是从图像的中心计算的，但由于第一张图像中画布的大小是 220 x 140，因此将棕羊叠加层的坐标设置为 220 x 140 将使画布的大小翻倍，达到 440 x 280。

意味着以下 URL 现在是 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