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
欢迎交流指正。