美文网首页iOS专题初见
IOS transform,frame,bounds,旋转,缩放

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

作者: 青山脚下花盛开 | 来源:发表于2019-06-21 13:40 被阅读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

    欢迎交流指正。

    相关文章

      网友评论

        本文标题:IOS transform,frame,bounds,旋转,缩放

        本文链接:https://www.haomeiwen.com/subject/xesyqctx.html