标题: 如何动态扭曲图像以适应您的平面设计 [打印本页]

---

作者: mukti574    时间: 2023-9-18 12:23     标题: 如何动态扭曲图像以适应您的平面设计

以图形方式设计以非常精确的形状和方向显示图像的网站或移动应用程序可能是一个相当大的挑战。产品定制可以采用扭曲 2D 图片以具有 3D 视角的形式，将图像放置在精确的形状中或将图像叠加在另一个图像内的特定位置，例如：将图像叠加在智能手机的屏幕上。

无论是希望以 3D 视角显示图像，还是将图像调整为不规则的形状，这种创造力通常都会伴随着调整需要显示的每个图像的巨大开销。如果一个网站托管大量图像，或者还想重塑用户上传的图片，那么挑战可能很快就会超过回报，甚至变得难以克服。

覆盖变形的智能手机

解决方案是使用可以根据预定义参数动态为您进行转换的工具。这篇博文将向您展示如何使用 Cloudinary 已添加到其大量图像转换功能中的两个新效果来实现此目的：distort和shear。

使用扭曲效果变换图像复制此标题的链接
为了轻松一致地塑造图像，Cloudinary 引入了对effect称为distort（e_distort在图像转换 URL 中）的转换的支持，该转换允许您动态自定义图像以适合任何四边形形状。四边形（也称为四边形或四边形）是具有四个边（或边）和四个顶点（或角）的任何多边形。该效果通过为图像的四个角中的每个角提供新坐标，然后将图像中的每个像素与四边形的新形状成比例映射来扭曲图像。

扭曲效果参数接受由 西班牙消费者手机号码列表 冒号分隔的 8 个值，因为 4 个角中的每一个都需要由 x 和 y 坐标表示。从左上角开始，按顺时针方向给出 4 个角中每一个角的新坐标，每个新坐标的值可以是以下值之一：

一个整数表示距左上角的像素数。
一个字符串（带有p附加符号的整数），表示距左上角（坐标：0p,0p）的百分比。
下图显示了将图像扭曲为新形状时计算图像新角点坐标的示例。该图像最初的宽度为 300 像素，高度为 180 像素，新的角坐标是根据这些值给出的：
电影时间 图像



3D 透视叠加复制此标题的链接
当与叠加功能一起使用来创建 3D 透视时，扭曲效果特别有用。您可以转换图像叠加层（或底层）以完全匹配图像中任何四边形形状的尺寸和透视。

以下示例演示了如何扭曲覆盖层以匹配 DVD 封面的 3D 视角：

图像的覆盖层movie_time可以扭曲以匹配 DVD 封面的 3D 视角，其中覆盖层的 4 个角均经过调整以与 DVD 封面的 4 个角一致：

使用剪切效果变换图像复制此标题的链接
Cloudinary 还添加了对另一种effect称为shear（e_shear在 URL 中）的转换的支持。剪切效果根据指定的角度值沿 x 轴和 y 轴倾斜图像。该参数接受两个由冒号 ( 分隔的值，第一个表示图像在 x 轴上倾斜的程度，第二个表示在 y 轴上应用的倾斜量。允许使用负值，并使图像向相反方向倾斜。

---

欢迎光临 Discuz! Board (http://556772.com/)

Powered by Discuz! 6.0.0