iOS专题初见

IOS transform,frame,bounds,旋转,缩放

2019-06-21  本文已影响0人  青山脚下花盛开

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

欢迎交流指正。

上一篇下一篇

猜你喜欢

热点阅读