使用.transform旋转带来的坑

发表于   |   分类于

这礼拜都在玩树莓派，Xcode都几乎没打开过，该收收心了。OmniFocus里攒了一堆已过期的待办，feedly也有好多未读，都又到周末了，先把上个礼拜留下来的几个准备写的Topic写了吧。
关于UIView的旋转，踩了一个小坑，看了看也没人说过。大家都知道使用.transform可以做旋转，用起来也很简单。在我的UIView Demo中（见上周BlogUIController中Slider监听回调具体实现的分离），我也添加了旋转的功能，开始是在handler中这么写的(back是一个UIView)：

let x = (Float(ctl.show.frame.width) - conf[0] )/2
let y = (Float(ctl.show.frame.height) - conf[1] )/2
back.frame.size = CGSize(width: CGFloat(conf[0], height: CGFloat(conf[1])
back.frame.origin = CGPoint(x: Int(x), y: Int(y))
back.transform = CGAffineTransformMakeRotation( CGFloat(Double(conf[7] * M_PI  / 180.0))

前面几句修改大小和位置，最后一句做旋转。没添加旋转之前缩放和位移都是对的，添加了旋转之后效果却不是我想象的那样以图形中心为圆心转动，而是这样有时候会自己拉扁的：


你看到的是非授权版本！爬虫凶猛，请尊重知识产权！

转载请注明出处：http://conanwhf.github.io/2016/01/16/Transform/

访问原文「使用.transform旋转带来的坑」获取最佳阅读体验并参与讨论
添加了打印信息以后发现，经过旋转的View.frame，不管是size还是position都变掉了，并且完全不是按照希望的样子变化的。不论我把旋转放在整个片段的哪里，都不对，frame的size总是不受控制。后来只好把scaling的部分改成了CGAffineTransformScale()。去看了看transform系列的文档，它其实是一类矩阵变换方式，旋转、缩放、平移只是其中的一些常用算法，系统给出了这些功能的API。如果你数学够好，其实也是可以自己设置这种变换的映射方式，最后转换后的View，其frame size是包含目标图形的一个最小矩形。而我猜，我碰到的问题，是因为系统对于旋转的处理有点特殊，因为scaling时拿到的参数不正确（当时的frame还没有画成缩放后的样子）导致。
于是我将UIView的变化都改为用CGAffineTransform系列函数进行，又发现对transform的操作先后顺序会影响最终的效果。出于兴趣我在playground里面做了点测试，先申请了一个100*300的矩形，然后做了两个transform的参数分别表示旋转90度和缩放至200*200（长宽缩放比例为1:2和1:0.667）：

let demo = UIView(frame:CGRectMake(0.0, 0.0, 100.0,  300.0))
//缩放参数
let sx =  200 / demo.frame.width
let sy =  200 / demo.frame.height
let transf_scale = CGAffineTransformMakeScale(sx, sy)
//旋转参数
let transf_rotate = CGAffineTransformMakeRotation(CGFloat(Double(90) * M_PI  / 180.0))

对这个View分别进行缩放和旋转操作，理想的情况是变成一个200*200的正方形。四个测试Case分别如下：两个先缩放再旋转，两个先旋转再缩放，后两个用的是CGAffineTransformConcat()函数直接跑。

//case 1, rotate(scale, x)
demo.transform = CGAffineTransformRotate(transf_scale, CGFloat(Double(90) * M_PI  / 180.0))
demo.frame.size     //600*67

//case 2, scale(rotate, x)
demo.transform = CGAffineTransformScale(transf_rotate, sx, sy)
demo.frame.size     //200*200

//case 3, scale+rotate
demo.transform = CGAffineTransformConcat(transf_scale, transf_rotate)
demo.frame.size     //200*200

//case 4, rotate+scale
demo.transform = CGAffineTransformConcat(transf_rotate, transf_scale)
demo.frame.size     //600*67

有兴趣的可以把这一段code放到playground里面自己跑跑，看看会是什么结果。case2 & case3，结果如我们所想象的那样，是个200*200的正方形；而case1 & case4，却变成了600*66.7的长条矩形。看起来正如下图的几种情况：

图中，暗红色部分是先做缩放再做旋转，有了正确的结果，对应scale(rotate, x) & scale+rotate；银色部分则是先旋转再缩放，成了错误的样子，对应rotate+scale & rotate(scale, x)。原来这是有顺序要求的。那么问题又来了：CGAffineTransformXXX(t, args)系列的函数，感觉上应该是对t用新的参数做叠加，为什么结果却是反的呢？于是我去查了它们的头文件，看到是这么定义的：

/* Scale t’ by (sx, sy)’ and return the result:
t’ = [ sx 0 0 sy 0 0 ] * t */
@available(iOS 2.0, *)
public func CGAffineTransformScale(t: CGAffineTransform, _ sx: CGFloat, _ sy: CGFloat) -> CGAffineTransform

/* Rotate t’ by angle’ radians and return the result:
t’ = [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ] * t */
@available(iOS 2.0, *)
public func CGAffineTransformRotate(t: CGAffineTransform, _ angle: CGFloat) -> CGAffineTransform

/* Concatenate t2’ to t1’ and return the result:
t’ = t1 * t2 */
@available(iOS 2.0, *)
public func CGAffineTransformConcat(t1: CGAffineTransform, _ t2: CGAffineTransform) -> CGAffineTransform

于是真相大白：原来，CGAffineTransformScale(t1, args)= t-scale*t1，而CGAffineTransformConcat(t1, t2)= t1 *t2，它们的顺序是反的。这个坑有点绕得人人晕晕的😳
最后，综上所述，对于transform的使用，我总结了以下几点：

  1. transform参数，事实上是一些形变映射矩阵的叠加。
  2. Scale的时候设置的参数，代表的是缩放的系数，不是目标size，所以如果有其他transform参数在此之前做，要重新计算系数
  3. CGAffineTansform系列本质是矩阵运算，顺序很重要
  4. CGAffineTransformConcat(t1,t2)的顺序是t1->t2, 而CGAffineTransformXXX(t1, (args to t2))的顺序是t2->t1，不要搞错