ios 图像坐标系_iOS开发必会的坐标系探究

---恢复内容开始---**欢迎大家前往[腾讯云+社区](https://cloud.tencent.com/developer/?fromSource=waitui)，获取更多腾讯海量技术实践干货哦~**

> 本文由[落影](https://cloud.tencent.com/developer/user/1024461?fromSource=waitui)发表于[云+社区专栏](https://cloud.tencent.com/developer/column/2672?fromSource=waitui)

# 前言

app在渲染视图时，需要在坐标系中指定绘制区域。 这个概念看似乎简单，事实并非如此。

> When an app draws something in iOS, it has to locate the drawn content in a two-dimensional space defined by a coordinate system. **This notion might seem straightforward at first glance, but it isn’t**.

### 正文

我们先从一段最简单的代码入手，在drawRect中显示一个普通的UILabel； 为了方便判断，我把整个view的背景设置成黑色：

```javascript

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

CGContextRef context = UIGraphicsGetCurrentContext();

NSLog(@"CGContext default CTM matrix %@", NSStringFromCGAffineTransform(CGContextGetCTM(context)));

UILabel *testLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 28)];

testLabel.text = @"测试文本";

testLabel.font = [UIFont systemFontOfSize:14];

testLabel.textColor = [UIColor whiteColor];

[testLabel.layer renderInContext:context];

}

```

这段代码首先创建一个UILabel，然后设置文本，显示到屏幕上，没有修改坐标。 所以按照UILabel.layer默认的坐标(0, 0)，在左上角进行了绘制。

UILabel绘制

接着，我们尝试使用CoreText来渲染一段文本。

```javascript

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

CGContextRef context = UIGraphicsGetCurrentContext();

NSLog(@"CGContext default matrix %@", NSStringFromCGAffineTransform(CGContextGetCTM(context)));

NSAttributedString *attrStr = [[NSAttributedString alloc] initWithString:@"测试文本" attributes:@{

NSForegroundColorAttributeName:[UIColor whiteColor],

NSFontAttributeName:[UIFont systemFontOfSize:14],

}];

CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef) attrStr); // 根据富文本创建排版类CTFramesetterRef

UIBezierPath * bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 20)];

CTFrameRef frameRef = CTFramesetterCreateFrame(frameSetter, CFRangeMake(0, 0), bezierPath.CGPath, NULL); // 创建排版数据

CTFrameDraw(frameRef, context);

}

```

首先用NSString创建一个富文本，然后根据富文本创建CTFramesetterRef，结合CGRect生成的UIBezierPath，我们得到CTFrameRef，最终渲染到屏幕上。 但是结果与上文不一致：文字是上下颠倒。

CoreText的文本绘制

从这个不同的现象开始，我们来理解iOS的坐标系。

### 坐标系概念

在iOS中绘制图形必须在一个二维的坐标系中进行，但在iOS系统中存在多个坐标系，常需要处理一些坐标系的转换。 先介绍一个图形上下文(graphics context)的概念，比如说我们常用的CGContext就是Quartz 2D的上下文。图形上下文包含绘制所需的信息，比如颜色、线宽、字体等。用我们在Windows常用的画图来参考，当我们使用画笔

分类：

技术点：

By © 2017 likecs 版权所有.

粤ICP备12038626号-2

Powered By WordPress . Theme by Luju