透视变换

透视变换用于计算视图 3D 投影到 2D 的齐次变换矩阵。它可以用来使用 Core Animation 的 CATransform3D 和 CALayer.transform 在给定图像的视觉透视中放置视图。投影是在由四个角定义的源和目标透视之间计算的，假设这四个角形成一个 四边形。

CATransform3D

要在一个具有匹配透视的容器图像上放置一个覆盖图像，我们可以使用 Core Animation 变换矩阵。`CATransform3D` 是一个变换矩阵，用于旋转、缩放、平移、倾斜和投影层内容。它还可以用来描述 2D 形状在 3D 空间的透视投影。

容器	覆盖	组合

Core Animation 允许通过 `transform` 属性将 `CATransform3D` 应用到 `CALayer`。

let layer = UIView().layer
layer.transform = CATransform3D(m11: sX,  m12: r12, m13: r13, m14: 0,
                                m21: r21, m22: sY,  m23: r23, m24: 0,
                                m31: r31, m32: r32, m33: 0,   m34: 0,
                                m41: tX,  m42: tY,  m43: 0,   m44: 1)

详细来说，`CATransform3D` 是一个 4x4 矩阵，需要 16 个参数来构建。

平移和缩放由它们的轴分量表示：(tX, tY) 和 (sX, sY) 在矩阵内。而 3D 旋转由多个值表示：r12、r21、r13、r31、r32、r23。

基于四个角的透视变换

我们可以很容易地看到在容器图像中四个点，其中覆盖图像的角应该位于这些点。通常情况下，它是一个四点多边形。使用 SVG 编辑器，我们可以在容器图像作为背景的情况下绘制这个多边形。以下是描述 iPad 屏幕角落位置的 SVG 文件的预览。

点击图片查看定义了 points 的原始 SVG 文件中的 polygon。从这 4 个点我们可以使用这个 PerspectiveTransform 库计算必要的 CATransform3D 矩阵。

可视化示例

我们可以看到 4 点多边形如何适配到背景图像上

SVG 点

我们甚至可以从中提取 SVG 文件的 4 点坐标

<polygon points="377.282671 41.4352201 459.781253 251.836131 193.321418 330.023027 108.315837 80.1687782 "></polygon>

这些都是 X 和 Y 坐标的 4 对组合

377.282671 41.4352201
459.781253 251.836131
193.321418 330.023027
108.315837 80.1687782

Swift 代码示例

以下是使用这些坐标放置覆盖视图的完整示例

import PerspectiveTransform

// note order: top left, top right, bottom left, bottom right
let destination = Perspective(
    CGPoint(x: 108.315837, y: 80.1687782),
    CGPoint(x: 377.282671, y: 41.4352201),
    CGPoint(x: 193.321418, y: 330.023027),
    CGPoint(x: 459.781253, y: 251.836131)
)

// Starting perspective is the current overlay frame
let start = Perspective(overlayView.frame)

// Caclulate CATransform3D from start to destination
overlayView.layer.transform = start.projectiveTransform(destination: destination)

CALayer 转换

由于 CALayer 转换是可动画属性，我们可以轻松定义平滑过渡

示例项目

请参阅 示例 iOS 项目，其中展示了视图控制器中的动画和交互式转换。要在示例文件夹中构建示例项目，请运行 pod install。

示例项目还包括 Swift Playground，其中包含几个动态示例。

安装

通过CocoaPods可以引入PerspectiveTransform。要安装，只需将以下行添加到您的Podfile中

pod 'PerspectiveTransform'

有用链接

• 解释齐次坐标与射影几何

作者

Paul Zabelin, http://github.com/paulz

许可证

PerspectiveTransform受MIT许可证约束。查看LICENSE文件获取更多信息。