免费开源的iOS开发学习平台

CALayer介绍:2-iOS开发中的坐标系

iOS开发中有两大类型的坐标系,分别为点坐标系(point-based coordinate systems)以及单元坐标系(unit coordinate systems)。另外,当我们对视图进行旋转操作时,还会涉及到iOS中的立体坐标系。

点坐标系与单元坐标系

当我们设置一个视图的frame或者bounds属性时,使用的是点坐标系,即屏幕的左上角为点坐标系的原点。

当我们学习iOS动画相关的知识之前,还需要了解单元坐标系(unit coordinate systems)。与点坐标系不同,单元坐标系的x轴和y轴的取值都是0~1,其中心位置的坐标是(0.5,0.5)。

position与anchorPoint

之所以需要提前介绍iOS中的坐标系,主要是因为在CALayer类中的两个关键属性--位置(positon)与锚点(anchorPoint),分别使用了点坐标系以及单元坐标系。

  • 位置(positon)。在一个CALayer对象中,位置position是点坐标系中的一个点,该点与锚点anchorPoint是同一个点,或者可以理解为与锚点重合。
@property CGPoint position;
  • 锚点(anchorPoint),是单元坐标系中的一个点,默认情况下,它是单元坐标系中的中心点,坐标为(0.5,0.5)。锚点可以形象的理解为一个大头针,把大头针插在一个便签的中心位置,然后再定在墙(点坐标系)上的一个固定位置(position),这样便签的位置就确定了。
@property CGPoint anchorPoint;

如下图左侧的两个坐标所示(右侧的是MAC开发的坐标系,与iOS不同),由于位置position与锚点anchorPoint是重合的,所以,通过这两个点就可以确定一个CALayer对象在屏幕上显示的具体位置。锚点的位置默认情况是CALayer对象的中心点,当锚点变成(0,0)时,为了保证CALayer对象的显示位置不变,那必须要修改位置(position)的值。

之所以设置锚点,是因为CALayer对象或视图对象,可以围绕锚点进行旋转。锚点是一个固定的点,所以,改变锚点的位置会影响旋转的效果。默认情况下,是围绕中心点来旋转的,假如我们希望围绕左上角旋转,那就需要修改锚点的值。

立体坐标系

iOS开发中还存在三维立体坐标系,除了我们熟知的x轴和y轴之外,还有z轴,z轴以屏幕的左上角为0点,向屏幕外延伸。在CALayer类中,也可以定义与z轴相关的位置属性。

@property CGFloat zPosition;
@property CGFloat anchorPointZ;

另外,当我们对视图进行旋转操作时,可以围绕x轴、y轴和z轴进行旋转,旋转的效果会不同。

当需要对视图旋转时,我们可以使用CATransform3DMakeRotation()函数对CALayer或UIView的transform属性进行修改。该函数中,我们可以指定所围绕的轴。

CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,
    CGFloat y, CGFloat z)

例如,通过围绕不同的坐标轴旋转视图,我们可以得到不同的效果。

  • 围绕z轴旋转:
subLayer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);

  • 围绕y轴旋转
subLayer.transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);

  • 围绕x轴旋转
subLayer.transform = CATransform3DMakeRotation(M_PI_4, 1, 0, 0);

  • 围绕原点与(1,1,1)连线轴旋转
subLayer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 1);