CoreText中坐标转换的一些理解

标签：

引言

学习CoreText，最初的想法是写一个杂志类的应用，因为对网易和zarca应用一些技术的疑问，所以，自己有了很强的兴趣欲和钻研欲，开始这段有点不顺的学习过程。

难题

1、对CGContextRef的CTM不理解，观念导致很多东西没有正确的理解。
2、对NS的了解不多，一些文字绘制方面的座标系问题让自己很迷惑。
3、对CoreText麻烦的API严重不适应。

关于CTM

CTM，Context Translate Matrix。 它是把要绘制的上下文以一个叫做Matrix的东西来表示，可以简单地想作，绘制的上下文的每一个点都映射在Matrix上，你在Matrix上的操作都会使得上下文上的点产生相应的变动。如放大、旋转、移动。

在一般的教程里面，为了达到旋转或放大缩小的目的，一般都会先改变这个上下文，如：

1
2
3
4
5

CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);

// some draw code
// ....

然后进行绘图操作。那么这个绘图操作是怎么做的呢？这个对Matrix的操作，为什么是放在前面而不是放在后面，为什么放在后面又没有效果呢？不是说改变Matrix就会改变上面的映射的所有点呢？这些常规的逻辑思维使得问题越发无法理解和解决。那么我们先从context来了解。

一般情况也，我们总是认为context就是画布，所有的matrix旋转都是针对画布的旋转，虽然这样的理解是错误的，但是得到的结果却是正确的，但是如果在一些稍复杂的坐标系转换时，或者更改matrix时在之前或之后的理解时，这样理解就会得到难得理解的结果。

其实context说的是绘画人所处的角度上下文。如下图，默认的情况下，绘画人的角度是正对着画布的：

画布是白色的，而我则是在左上角用一个黄色的三角形来标识它的左上角，使用left top来标识context的左上角，而绘画人是黄色的圆形。

要记着！！画布无论怎么样都是正对着屏幕的，它不会旋转，或者放大缩小，或者移动。

那么为什么又看起来我放大了或者移动了呢？其实移动的是你的context，也就是你所处的context视角，我举个例子，比方说我要旋转180度在左上角写一个“abcdefg”。

首先，我要先旋转180度：

然后，我在左上角写上“abcdefg”：

然后重置context：

可以看到，我们改变context只是改变了自己面对画布的角度，而画布仍然是正对着屏幕的，自己始终以context的左上角为自己角度的左上角，而不是以画布的左上角为左上角，也就是说，这时绘画时的座标（0,0）是你旋转后context的left top，而不是画布 的左上角，记着这一点很重要。

所以，在绘画的时候，其实是倒着画在了画布的右下角上。而重置context，则是把自己正对着画布而已。这也就说清了为什么是在使用matrix更改context之后进行绘图有效（把自己面对画布的角度先调整了），而不是在画了之后再调整（因为你都画完了，再调整自己的角度还有什么用？）。

正确理解使用matrix更改context的方式很重要，因为这涉及到坐标系的问题，之后的CoreText相当讨论会讲到一个例子。

关于NS座标系

NS坐标系是以左下角为(0,0)，与iOS的坐标系在Y上是相反的，所以，在iOS进行CoreText进行绘图或文字的时候，X方向是一致的，但是Y则是倒过来的。如下图：

那么怎么办呢？想想，仔细看上面这张图，貌似像是正常方向的倒影，但是水平线却在最上面。嗯，挪下来，然后再反过来，看一下效果。如下图：

效果：

效果果然如图所示，好！！

可是是不是就这样完了呢？不是，还有一个更为重要的问题，这个时候，进行了两次的转换matrix，context的left top在哪里呢？

根据之前的理论，那得让自己先把自己向下移，然后把头倒过来，OK，这下明白了，这下画布的左下角变成了context的左上角，别的都没变。这时，当你在(20, 20)画一个长方形，其实就是画布的(20, canvas.height - 20 + rect.size.height)的位置上画了个长方形，而且是倒过来的。

仔细想想这个，有趣的事情还有很多，因为按照自己看过本文之前的理论，可能会非常惊讶为什么得到的结果和自己想的不一样，一直以为是在(20, 20)处画一个长方形，结果却刚好相反，这就是没有理解context及matrix的正确含义所致。

CoreText中坐标转换的一些理解

标签：

原文地址：http://www.cnblogs.com/gatsbywang/p/4248977.html