定位如何在云中叠加图像上工作?

Posted

技术标签:

【中文标题】定位如何在云中叠加图像上工作?【英文标题】:How does positioning work on overlay image in cloudinary? 【发布时间】:2019-04-20 07:31:57 【问题描述】:

以下面的 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 开始?我真的很困惑。

【问题讨论】:

【参考方案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

【讨论】:

以上是关于定位如何在云中叠加图像上工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何将分割结果叠加在其他图像上

如何使用 swift 在 IOS 地图上叠加图像

如何在 Gatsby 静态图像组件上添加叠加层?

如何在背景图像上添加叠加不透明度? [复制]

如何在 PHP 中(使用 GD)已经重新采样的图像上叠加水印?

在一个网页上的多个图像上使用叠加层