iOS 中的二维平面变换一般使用CGAffineTransform，又称为仿射变换。下面我们来介绍一下仿射变换的基本原理和基本用法。
1. 变换矩阵形式
仿射变换矩阵用于旋转，缩放，平移或倾斜在图形上下文中绘制的对象。该类型提供用于创建，连接和应用仿射变换的功能。
public struct CGAffineTransform {
public var a: CGFloat
public var b: CGFloat
public var c: CGFloat
public var d: CGFloat
public var tx: CGFloat
public var ty: CGFloat
public init()
public init(a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat, tx: CGFloat, ty: CGFloat)
}
仿射变换由3 x 3矩阵表示：
由于第三列始终为(0,0,1)，因此数据结构仅包含前两列的值。
从概念上讲，仿射变换将代表图形中每个点（x，y）的行向量与此矩阵相乘，从而产生一个代表相应点（x'，y'）的向量：
给定3 x 3矩阵，可使用以下方程式将一个坐标系中的点（x，y）转换为另一坐标系中的结果点（x'，y'）。
矩阵由此“链接”两个坐标系-它指定一个坐标系中的点如何映射到另一个坐标系。
请注意，通常不需要直接创建仿射变换。例如，如果只想绘制缩放或旋转的对象，则无需构造仿射变换。最直接的方法来操作你的图纸-无论是通过移动，缩放或旋转是调用函数，或分别。通常，只有在以后要重用时才应创建仿射变换。
CGAffineTransform的（a，b，c，d，tx，ty）默认参数是[ 1 0 0 1 0 0 ]，
这几个的参数的作用：
a: 对应sx就是视图宽放大或缩小的比例，初始值1，一倍大小。
b: 旋转会用到，初始值0。
c: 旋转会用到，初始值0。
d: 对应sy就是视图高放大或缩小的比例，初始值1，一倍大小。
tx: 视图x轴平移，初始值0，没有平移。
ty: 视图y轴平移，初始值0，没有平移。
2. iOS中的平面变换CGAffineTransform
import UIKit
class AffineTransfromView: UIView {
var buttonTitleArr: NSMutableArray = NSMutableArray.init()
var imgView: UIImageView?
open var hostCon: UIViewController?
override init(frame: CGRect) {
super.init(frame: frame)
self.initViews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func initViews() {
let size = self.frame.size
self.buttonTitleArr.addObjects(from: ["平移", "旋转", "缩放", "旋转平移缩放", "验证标准矩阵", "平移之后再转换", "倒置", "矩阵相乘", "点矩阵转换", "size矩阵转换", "rect 矩阵转换", "复位"])
for i in 0 ..< buttonTitleArr.count {
let title: String = buttonTitleArr.object(at: i) as! String
let button: UIButton = UIButton.init(type: UIButton.ButtonType.system)
button.setTitle(title, for: UIControl.State.normal)
button.frame = CGRect.init(x: (size.width / 3.0) * CGFloat(i%3), y: 50.0 * CGFloat(i/3), width: size.width / 3.0, height: 50.0)
button.addTarget(self, action: #selector(buttonClicked(button:)), for: UIControl.Event.touchUpInside)
button.layer.borderColor = UIColor.lightGray.cgColor
button.layer.borderWidth = 0.5
self.addSubview(button)
button.tag = i
}
let backView: UIView = UIView.init(frame: CGRect.init(x: 0.0, y: 0.0, width: 150.0, height: 150.0))
backView.backgroundColor = UIColor.cyan
backView.center = self.center;
self.addSubview(backView)
self.imgView = UIImageView.init(frame: backView.bounds)
self.imgView?.image = UIImage.init(named: "affinetransform.jpeg")
self.imgView?.center = self.center
self.addSubview(self.imgView!)
}
@objc func buttonClicked(button: UIButton) {
switch button.tag {
case 0:
self.translation()
case 1:
self.rotation()
case 2:
self.scale()
case 3:
self.allTransform()
case 4:
self.isIdentity()
case 5:
self.rotationAfterTranslation()
case 6:
self.invert()
case 7:
self.matrixMultiplication()
case 8:
self.pointTransform()
case 9:
self.sizeTransform()
case 10:
self.rectTransform()
case 11:
self.reset()
default:
break;
}
}
func showAlert(alertMsg: String) {
let alertController = UIAlertController(title: nil, message: alertMsg, preferredStyle: UIAlertController.Style.alert)
let cancelAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.cancel, handler: nil)
alertController.addAction(cancelAction)
self.hostCon?.present(alertController, animated: true, completion: nil)
}
func reset() {
UIView.animate(withDuration: 0.3) {
self.imgView?.transform = CGAffineTransform.identity
}
}
func animate(transform: CGAffineTransform) {
UIView.animate(withDuration: 0.3) {
self.imgView?.transform = transform
}
}
func translation() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(translationX: 50, y: 50)
self.animate(transform: transform)
}
func rotation() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 4.0))
self.animate(transform: transform)
}
func scale() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(scaleX: 0.5, y: 0.5)
self.animate(transform: transform)
}
func allTransform() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(a: 0.5, b: 0.3, c: 0.5, d: 1.5, tx: 25, ty: 25)
self.animate(transform: transform)
}
func isIdentity() {
let isIdentity = self.imgView?.transform.isIdentity
let alertMsg: String = isIdentity == true ? "是标准矩阵" : "不是标准矩阵"
self.showAlert(alertMsg: alertMsg)
}
func rotationAfterTranslation() {
self.reset()
var translation = CGAffineTransform(translationX: 40, y: 40)
translation = translation.rotated(by: CGFloat(Double.pi / 4.0))
self.animate(transform: translation)
}
func invert() {
self.reset()
let translation = CGAffineTransform(translationX: 50, y: 50)
let translationInverted = translation.inverted()
self.animate(transform: translationInverted)
}
func matrixMultiplication() {
self.reset()
let translation = CGAffineTransform(translationX: 40, y: 40)
let rotation = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 4.0))
let transform: CGAffineTransform = translation.concatenating(rotation)
self.animate(transform: transform)
}
func pointTransform() {
let point = CGPoint.init(x: 100, y: 100)
let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transformedPoint = point.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", point.debugDescription, transformedPoint.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
func sizeTransform() {
let size = CGSize.init(width: 200, height: 200)
//let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2.0))
let transformedSize = size.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", size.debugDescription, transformedSize.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
func rectTransform() {
let rect = CGRect.init(x: 0, y: 0, width: 300, height: 300)
let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transformedRect = rect.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", rect.debugDescription, transformedRect.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
}
示例
3. 仿射变换及其变换矩阵的理解
原文地址
仿射变换：平移、旋转、放缩、剪切、反射。仿射变换包括如下所有变换，以及这些变换任意次序次数的组合：
affine transformations
平移（translation）和旋转（rotation）顾名思义，两者的组合称之为欧式变换（Euclidean transformation）或刚体变换（rigid transformation）；
放缩（scaling）可进一步分为uniform scaling和non-uniform scaling，前者每个坐标轴放缩系数相同（各向同性），后者不同；如果放缩系数为负，则会叠加上反射（reflection）——reflection可以看成是特殊的scaling；
刚体变换+uniform scaling 称之为，相似变换（similarity transformation），即平移+旋转+各向同性的放缩；
剪切变换（shear mapping）将所有点沿某一指定方向成比例地平移，语言描述不如上面图示直观。
各种变换间的关系如下面的venn图所示：
transformations venn diagram
通过变换矩阵可以更清晰地看出这些变换间的关系和区别。
3.1 变换矩阵形式
没有平移或者平移量为0的所有仿射变换可以用如下变换矩阵描述：
不同变换对应的a,b,c,d约束不同，排除了平移变换的所有仿射变换为线性变换（linear transformation），其涵盖的变换如上面的venn图所示，其特点是原点位置不变，多次线性变换的结果仍是线性变换。
为了涵盖平移，引入齐次坐标，在原有2维坐标的基础上，增广1个维度，如下所示：
所以，仿射变换的变换矩阵统一用
来描述，不同基础变换的a,b,c,d,e,f约束不同，如下所示：
此外，旋转和平移相乘得到刚体变换的变换矩阵，如下，有3个自由度（θ,tx,ty），这里旋转方向为逆时针方向，因此与上图中的正负号不同，
再乘上uniform scaling得到相似变换，有4个自由度（s,θ,tx,ty），如下：
自然，仿射变换的变换矩阵有6个自由度（a,b,c,d,e,f）。
3.2 变换矩阵的理解与记忆
坐标系由坐标原点和基向量决定，坐标原点和基向量确定了，坐标系也就确定了。
对于坐标系中的位置(x,y)，其相对坐标原点在[1,0]方向上的投影为x，在[0,1]方向上的投影为y —— 这里投影的意思是过(x,y)做坐标轴的平行线与坐标轴的交点到原点的距离，即(x,y)实际为：
当坐标系变化，坐标系中的点也跟着变化，但点相对新坐标系（x′−y′坐标系）的位置不变仍为(x,y)，以旋转变换为例，新坐标轴的基向量则变为[cos(θ),sin(θ)]和[−sin(θ),cos(θ)]，所以点变化到新位置为：
新位置和新基向量是相对绝对坐标系(x−y坐标系）而言的。其他变换矩阵同理。
总结一下：
- 所有变换矩阵只需关注一点：坐标系的变化，即基向量和原点的变化；
- 坐标系变化到哪里，坐标系中的所有点也跟着做同样的变化；
- 坐标系的变换分为 基向量的变化 以及 坐标原点的变化，在仿射变换矩阵
为新的基向量，
为新的坐标原点，先变化基向量，再变化坐标原点；
image.png
3.3 变换矩阵的参数估计
如果给定两个对应点集，如何估计指定变换矩阵的参数？
一对对应点可以列两个线性方程，多个对应点可以列出线性方程组，为了求解参数，需要的对应点数至少为自由度的一半，多个点时构成超定方程组，可以基于最小二乘或者SVD分解等方法进行求解，这里不再展开。
网友评论