IOS transform,frame,bounds,旋转，缩放，平移手势这一篇就够啦

家人住院过来陪护才有时间整理点东西，真的是一言难尽，诸位大牛疯狂撸码时也要注意身体呦。
整理一个最近给运维端做的需求，自己感觉还是有难度的。
直接看图，运维端不要太在意UI了。

project.gif

这里的旋转，缩放其实都是小菜，难点的东西是自己盖在地图上的控件View和地图层级数据间的转换和传递，也就是屏幕上的view的四角坐标像素点位置与地图经纬度的转换，最核心的东西是view旋转出角度后，view的frame属性已经物是人非了。frame是一个复合属性，由center、bounds和transform共同计算而来。看下代码：

NSLog(@"beforeConversionFrame - x - %f y -%f w -%f d -%f",_conversionView.frame.origin.x,_conversionView.frame.origin.y,_conversionView.frame.size.width,_conversionView.frame.size.height);
NSLog(@"beforeConversionBounds - x - %f y -%f w -%f d -%f",_conversionView.bounds.origin.x,_conversionView.bounds.origin.y,_conversionView.bounds.size.width,_conversionView.bounds.size.height);
    
_conversionView.transform = CGAffineTransformRotate(_conversionView.transform, M_PI / 6);

NSLog(@"afterConversionFrame - x - %f y -%f w -%f d -%f",_conversionView.frame.origin.x,_conversionView.frame.origin.y,_conversionView.frame.size.width,_conversionView.frame.size.height);
NSLog(@"afterConversionBounds - x - %f y -%f w -%f d -%f",_conversionView.bounds.origin.x,_conversionView.bounds.origin.y,_conversionView.bounds.size.width,_conversionView.bounds.size.height);

打印结果：

2019-06-20 15:05:21.848295+0800 conversionViewDemo[4043:176140] beforeConversionFrame - x - 157.000000 y -398.000000 w -100.000000 d -100.000000
2019-06-20 15:05:21.848493+0800 conversionViewDemo[4043:176140] beforeConversionBounds - x - 0.000000 y -0.000000 w -100.000000 d -100.000000
2019-06-20 15:05:21.848616+0800 conversionViewDemo[4043:176140] afterConversionFrame - x - 138.698730 y -379.698730 w -136.602540 d -136.602540
2019-06-20 15:05:21.848699+0800 conversionViewDemo[4043:176140] afterConversionBounds - x - 0.000000 y -0.000000 w -100.000000 d -100.000000

transform改变，frame会受到影响，但是center和bounds不会受到影响。也就是你使用transform来缩放，bounds是不会变的。但是frame这个属性总是描述一个“摆正的”view，而旋转后的view是没法描述的。需求中我们要拿到旋转后的view的四角坐标，然后转换成经纬传给后台，一种思路两个解决方法。
方案一：备份一个相同的view,按照相反的旋转角度将view转正，计算出四角坐标，或者通过center,和bounds的宽高直接算出（旋转角度为零的四角坐标拿取方案的另外一种思路是view底部盖一个覆盖全屏的透明中间层大view,重写hitTest方法做好透传，中间层做view的父视图随view以前旋转，直接可以计算四角坐标不用在旋转了，两个方法各有利弊，性能测试都是很流畅的，用户无感）然后拿取transform的a,b,c,d,tx,ty组成二维矩阵最终求出经过transform之后的四角坐标。(也可以尝试苹果提供的CGPointApplyAffineTransform)
ps:记得将中心点为原点的坐标系转回来。

 /**
 矩阵运算

 @param beforeTransformPoints 没有角度旋转的view二维四角坐标(即transform为identity) - 坐标系以中心点为原点建立
 @param transFormArr 使用transform（属性组成的二维数组）
 @return 旋转后的四角坐标
 */
- (NSMutableArray *)calculateTransformArrWithBeforeTransformPoints:(NSMutableArray *)beforeTransformPoints transformArr:(NSMutableArray *)transFormArr {
    @try {
        [self printMatrix:transFormArr];
        NSMutableArray *returnArr = [NSMutableArray new];
        // 取出第一个矩阵array1的元素（行） rowArr1
        for(int i = 0; i < beforeTransformPoints.count ; i++) {
            NSMutableArray *rowArr1 = beforeTransformPoints[i];
            // 将要返回的数组的行
            NSMutableArray *newArray1 = [NSMutableArray new];
            // 计算： 第一个矩阵的行*第二个矩阵的列   得到newArray1
            // 遍历array2的每一列
            for(int k = 0; k < rowArr1.count ; k++ ) {
                float ele = 0;
                // 取出第二个矩阵array2的元素（行）
                for(int j = 0; j < transFormArr.count ; j++) {
                    NSMutableArray *subArr2 = transFormArr[j];
                    // 取出第二个矩阵的每行的第k个元素（列）  把他们放在新数组newArr中
                    ele += [rowArr1[j] floatValue] * [subArr2[k] floatValue];
                }
                [newArray1 addObject:@(ele)];
            }
            [returnArr addObject:newArray1];
            
        }
        return returnArr;
    } @catch (NSException *exception) {
        NSLog(@"请输入正确的矩阵");
    } @finally {
    }
}

方案二：旋转角度为零的四角坐标拿取方法同上。
花了一下午时间推算的计算公式奉上：

//x=(x1-centerX)*cosA+(y1-centerY)*sinA+centerX
//y=(y1-centerY)*cosA-(x1-centerX)*sinA+centerY

PS:A代表旋转角度

这里在提及transform的另一个妙用，transform的改变只是影响了view的渲染，并不会调用layoutSubviews方法。当你设置父视图的transform时子视图会做相应改变而不必重新布局，这在做特定动画的时候简直厉害炸了。
无角度情况下frame到transform直接的转换非常简单：

/**
 没有旋转角度的前后两个frame之间的对应transform计算

 @param fromRect 初始frame
 @param toRect 终止frame
 @return CGAffineTransform
 */
- (CGAffineTransform)calculateTransformWithFromRect:(CGRect)fromRect toRect:(CGRect)toRect{
    // 平移transfrom
    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(CGRectGetMidX(toRect) - CGRectGetMidX(fromRect), CGRectGetMidY(toRect) - CGRectGetMidY(fromRect));
    // 缩放transform
    CGAffineTransform scaleTransform = CGAffineTransformMakeScale(toRect.size.width / fromRect.size.width, toRect.size.height / fromRect.size.height);
    
    return CGAffineTransformConcat(scaleTransform, moveTransform);
}

单当你考虑到角度就要经过我们开篇过程的思考。

这里说下思路项目代码不便公开，送上一份做需求前写的一个小demo，各种手势交互都集成了，提供了通过transform和bounds两种进行手势响应的方式。

demo.gif

gitHub地址：https://github.com/earnestLin/conversionViewDemo

欢迎交流指正。