深入CATransform3D

Yeolar   2015-03-26 14:44  

前一篇转载了一份网上流传较广的 CALayertransform 属性的实践效果介绍。本篇再做一些补充。

在iOS中使用 CATransform3D 这个结构体来表示三维的齐次坐标变换矩阵。齐次坐标是一种坐标的表示方法,n维空间的坐标需要用n+1个元素的坐标元组来表示,在Quartz 2D Transform中就有关于齐次坐标的应用,那边是关于二维空间的变换,其某点的齐次坐标的最后一个元素始终设置为1。使用齐次坐标而不是简单的数学坐标是为了方便图形进行仿射变换,仿射变换可以通过仿射变换矩阵来实现,3D的仿射变换可以实现诸如:平移(translation),旋转(rotation),缩放(scaling),切变(shear)等变换。如果不用齐次坐标那么进行坐标变换可能就涉及到两种运算了,加法(平移)和乘法(旋转,缩放),而使用齐次坐标以及齐次坐标变换矩阵后只需要矩阵乘法就可以完成一切了。上面的这些如果需要深入了解就需要去学习一下图形变换的相关知识,自己对矩阵的乘法进行演算。

关于透视投影和灭点

目光投向正前方所触及的图象上的点称为视点,通过视点的水平线为视平线。灭点在视平线上,可能与视点重合。平行伸向远方的直线的延长线会聚在灭点上。

iOS中的 CALayer 的3D本质上并不能算真正的3D(其视点即观察点或者所谓的照相机的位置是无法变换的),而只是3D在二维平面上的投影,投影平面就是手机屏幕也就是xy轴组成的平面(注意iOS中为左手坐标系),那么视点的位置是如何确定的呢?可以通过 CATransform3D 中的 m34 来间接指定,m34 = -1/z,其中z为观察点在z轴上的值,而 CALayer 的z轴的位置则是通过 anchorPoint 来指定的,所谓的 anchorPoint (锚点)就是在变换中保持不变的点,也就是某个 CALayer 在变换中的原点,xyz三轴相交于此点。在iOS中, CALayeranchorPoint 使用unit coordinate space来描述,unit coordinate space无需指定具体真实的坐标点,而是使用layer bounds中的相对位置,下图展示了一个 CALayer 中的几个特殊的锚点。

/media/note/2015/03/26/ios-catransform3d/fig1.jpg

m34 = -1/z中,当z为正的时候,是我们人眼观察现实世界的效果,即在投影平面上表现出近大远小的效果,z越靠近原点则这种效果越明显,越远离原点则越来越不明显,当z为正无穷大的时候,则失去了近大远小的效果,此时投影线垂直于投影平面,也就是视点在无穷远处, CATransform3Dm34 的默认值为0,即视点在无穷远处。

还有一个需要说明一下的就是齐次坐标到数学坐标的转换。通用的齐次坐标为 (a, b, c, h),其转换成数学坐标则为 (a/h, b/h, c/h)。

代数解释

假设一个 CALayer anchorPoint 为默认的 (0.5, 0.5), 其三维空间中一个A点 (6, 0, 0),m34 = -1/1000.0, 则此点往z轴负方向移动10个单位之后,则在投影平面上看到的点的坐标是多少呢?

A点使用齐次坐标表示为 (6, 0, 0, 1)

QuartzCore框架为我们提供了函数来算出所需要的矩阵,

CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1/1000.0;
transform = CATransform3DTranslate(transform, 0, 0, -10);

计算出来的矩阵为

{ 1,     0,     0,     0;
  0,     1,     0,     0;
  0,     0,     1,-0.001;
  0,     0,   -10,  1.01; }

其实上面的变换矩阵本质上是两个矩阵相乘得到的 变换矩阵 * 投影矩阵 变换矩阵为

{ 1,     0,     0,     0;
  0,     1,     0,     0;
  0,     0,     1,     0;
  0,     0,    -10,    1; }

投影矩阵为

{ 1,     0,     0,     0;
  0,     1,     0,     0;
  0,     0,     1,-0.001;
  0,     0,     0,     1; }

上面的两个矩阵相乘则会得到最终的变换矩阵(如果忘记矩阵乘法的可以去看下线性代数复习下),所以一个矩阵就可以完成变换和投影。

将A点坐标乘上最终的变换矩阵,则得到 {6, 0 , -10, 1.01}, 转换成数学坐标点为 {6/1.01, 0, 10/1.01}, 则可以知道其在投影平面上的投影点为 {6/1.01, 0, 0} 也就是我们看到的变换后的点。其比之前较靠近原点。越往z轴负方向移动,则在投影平面上越靠近原点。

几何解释

将上面的例子使用几何的方式来进行解释分析,当我们沿着y轴的正方向向下看时候,可以得到如下的景象

/media/note/2015/03/26/ios-catransform3d/fig2.jpg

虚线为投影线,其和x轴的交点即为A点的投影点。由相似三角形的定理我们很容易算出投影的点,

1000/(1000 + 10) = x/6, 则 x = 6*1000/1010 = 6/1.01

直接修改数据结构实现变换

CATransform3D 的数据结构定义如下,为4x4矩阵:

struct CATransform3D
{
    CGFloat m11, m12, m13, m14
    CGFloat m21, m22, m23, m24
    CGFloat m31, m32, m33, m34
    CGFloat m41, m42, m43, m44
};

在实现变换时,既可以使用封装好的变换函数,也可以直接通过修改该数据结构来达到目的。一般在做直接修改时,会采用键值设置的方式实现。如:

[layer setValue:[NSNumber numberWithInt:0] forKeyPath:@"transform.rotation.x"];

特定的键包括:

说明
rotation.x x轴旋转
rotation.y y轴旋转
rotation.z z轴旋转
rotation z轴旋转,和 rotation.z 等价
scale.x x轴缩放
scale.y y轴缩放
scale.z z轴缩放
scale 三个缩放的均值
translation.x x轴偏移
translation.y y轴偏移
translation.z z轴偏移
translation x和y轴的偏移,值为 NSSizeCGSize 类型

四边形变换

如果需要对图形做梯形等非仿射变换的话,会发现前面讨论的方式都无法解决。iOS中只对一些常规的变换做了封装,梯形变换之类的四边形变换就需要自行计算变换矩阵了。

在 StackOverflow 上有一些讨论 [1] [2] ,也有相关的 开源解决方案 可以参考。

一份整理后的四边形变换的代码:

UIView+Quadrilateral.h:

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface UIView (Quadrilateral)

//Sets frame to bounding box of quad and applies transform
- (void)transformToFitQuadTopLeft:(CGPoint)tl topRight:(CGPoint)tr bottomLeft:(CGPoint)bl bottomRight:(CGPoint)br;

@end

UIView+Quadrilateral.m:

#import "UIView+Quadrilateral.h"

@implementation UIView (Quadrilateral)

- (void)transformToFitQuadTopLeft:(CGPoint)tl topRight:(CGPoint)tr bottomLeft:(CGPoint)bl bottomRight:(CGPoint)br
{
    CGRect boundingBox = [[self class] boundingBoxForQuadTR:tr tl:tl bl:bl br:br];
    self.layer.transform = CATransform3DIdentity; // keeps current transform from interfering
    self.frame = boundingBox;

    CGPoint frameTopLeft = boundingBox.origin;
    CATransform3D transform = [[self class] rectToQuad:self.bounds
                                                quadTL:CGPointMake(tl.x-frameTopLeft.x, tl.y-frameTopLeft.y)
                                                quadTR:CGPointMake(tr.x-frameTopLeft.x, tr.y-frameTopLeft.y)
                                                quadBL:CGPointMake(bl.x-frameTopLeft.x, bl.y-frameTopLeft.y)
                                                quadBR:CGPointMake(br.x-frameTopLeft.x, br.y-frameTopLeft.y)];

    //  To account for anchor point, we must translate, transform, translate
    CGPoint anchorPoint = self.layer.position;
    CGPoint anchorOffset = CGPointMake(anchorPoint.x - boundingBox.origin.x, anchorPoint.y - boundingBox.origin.y);
    CATransform3D transPos = CATransform3DMakeTranslation(anchorOffset.x, anchorOffset.y, 0.);
    CATransform3D transNeg = CATransform3DMakeTranslation(-anchorOffset.x, -anchorOffset.y, 0.);
    CATransform3D fullTransform = CATransform3DConcat(CATransform3DConcat(transPos, transform), transNeg);

    //  Now we set our transform
    self.layer.transform = fullTransform;
}

+ (CGRect)boundingBoxForQuadTR:(CGPoint)tr tl:(CGPoint)tl bl:(CGPoint)bl br:(CGPoint)br
{
    CGRect boundingBox = CGRectZero;

    CGFloat xmin = MIN(MIN(MIN(tr.x, tl.x), bl.x),br.x);
    CGFloat ymin = MIN(MIN(MIN(tr.y, tl.y), bl.y),br.y);
    CGFloat xmax = MAX(MAX(MAX(tr.x, tl.x), bl.x),br.x);
    CGFloat ymax = MAX(MAX(MAX(tr.y, tl.y), bl.y),br.y);

    boundingBox.origin.x = xmin;
    boundingBox.origin.y = ymin;
    boundingBox.size.width = xmax - xmin;
    boundingBox.size.height = ymax - ymin;

    return boundingBox;
}

+ (CATransform3D)rectToQuad:(CGRect)rect
                     quadTL:(CGPoint)topLeft
                     quadTR:(CGPoint)topRight
                     quadBL:(CGPoint)bottomLeft
                     quadBR:(CGPoint)bottomRight
{
    return [self rectToQuad:rect quadTLX:topLeft.x quadTLY:topLeft.y quadTRX:topRight.x quadTRY:topRight.y quadBLX:bottomLeft.x quadBLY:bottomLeft.y quadBRX:bottomRight.x quadBRY:bottomRight.y];
}

+ (CATransform3D)rectToQuad:(CGRect)rect
                    quadTLX:(CGFloat)x1a
                    quadTLY:(CGFloat)y1a
                    quadTRX:(CGFloat)x2a
                    quadTRY:(CGFloat)y2a
                    quadBLX:(CGFloat)x3a
                    quadBLY:(CGFloat)y3a
                    quadBRX:(CGFloat)x4a
                    quadBRY:(CGFloat)y4a
{
    CGFloat X = rect.origin.x;
    CGFloat Y = rect.origin.y;
    CGFloat W = rect.size.width;
    CGFloat H = rect.size.height;

    CGFloat y21 = y2a - y1a;
    CGFloat y32 = y3a - y2a;
    CGFloat y43 = y4a - y3a;
    CGFloat y14 = y1a - y4a;
    CGFloat y31 = y3a - y1a;
    CGFloat y42 = y4a - y2a;

    CGFloat a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    CGFloat b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    CGFloat c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);

    CGFloat d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    CGFloat e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    CGFloat f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));

    CGFloat g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    CGFloat h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    CGFloat i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));

    const double kEpsilon = 0.0001;

    if(fabs(i) < kEpsilon)
    {
        i = kEpsilon* (i > 0 ? 1.0 : -1.0);
    }

    CATransform3D transform = {a/i, d/i, 0, g/i, b/i, e/i, 0, h/i, 0, 0, 1, 0, c/i, f/i, 0, 1.0};

    return transform;
}

@end

参考文章:

[1]Transforming a rectangle image into a quadrilateral using a CATransform3D
[2]iPhone image stretching (skew)

http://www.yeolar.com/note/2015/03/26/ios-catransform3d/

http://www.yeolar.com/note/2015/03/26/ios-catransform3d/