iOS Drawing Concepts (iOS 绘图概念)

iOS Drawing Concepts

High-quality graphics are an important part of your app’s user interface. Providing high-quality graphics not only makes your app look good, but it also makes your app look like a natural extension to the rest of the system. iOS provides two primary paths for creating high-quality graphics in your system: OpenGL or native rendering using Quartz, Core Animation, and UIKit. This document describes native rendering. (To learn about OpenGL drawing, see OpenGL ES Programming Guide.)

Quartz is the main drawing interface, providing support for path-based drawing, anti-aliased rendering, gradient fill patterns, images, colors, coordinate-space transformations, and PDF document creation, display, and parsing. UIKit provides Objective-C wrappers for line art, Quartz images, and color manipulations. Core Animation provides the underlying support for animating changes in many UIKit view properties and can also be used to implement custom animations.

This chapter provides an overview of the drawing process for iOS apps, along with specific drawing techniques for each of the supported drawing technologies. You will also find tips and guidance on how to optimize your drawing code for the iOS platform.

Important: Not all UIKit classes are thread safe. Be sure to check the documentation before performing drawing-related operations on threads other than your app’s main thread.

高质量的图形(graphics)是应用程序用户界面的重要组成部分。 提供高质量的图形不仅使您的应用程序看起来很好，而且还使您的应用程序看起来像是系统其余部分的自然扩展。 iOS提供了两种在系统中创建高质量图形的主要途径：①OpenGL, ②使用Quartz，Core Animation和UIKit的自然渲染(native rendering)。 本文档描述了自然渲染。 （要了解OpenGL绘图，请参阅OpenGL ES Programming Guide。）

Quartz是主要的绘图接口，支持基于路径的绘制，消除锯齿渲染，渐变填充图案，图像，颜色，坐标空间转换以及PDF文档创建，显示和解析。 UIKit为线条艺术，石英图像和颜色处理提供Objective-C包装。 Core Animation为许多UIKit视图属性中的动画更改提供了底层支持，也可用于实现自定义动画。

本章概述了iOS应用程序的绘图过程，以及每种支持的绘图技术的特定绘图技术。 您还可以找到有关如何针对iOS平台优化绘图代码的提示和指导。

重要提示：并非所有UIKit类都是线程安全的。 在对应用程序主线程以外的线程执行与绘图相关的操作之前，请务必检查文档。

The UIKit Graphics System (UIKit 图形系统)

In iOS, all drawing to the screen—regardless of whether it involves OpenGL, Quartz, UIKit, or Core Animation—occurs within the confines of an instance of the UIView class or a subclass thereof. Views define the portion of the screen in which drawing occurs. If you use system-provided views, this drawing is handled for you automatically. If you define custom views, however, you must provide the drawing code yourself. If you use Quartz, Core Animation, and UIKit to draw, you use the drawing concepts described in the following sections.

In addition to drawing directly to the screen, UIKit also allows you to draw into offscreen bitmap and PDF graphics contexts. When you draw in an offscreen context, you are not drawing in a view, which means that concepts such as the view drawing cycle do not apply (unless you then obtain that image and draw it in an image view or similar).

在iOS中，所有对于屏幕的绘制 - 无论是涉及OpenGL，Quartz，UIKit还是Core Animation - 都发生在UIView类的实例或其子类的范围内。 视图定义了发生绘图的屏幕部分。 如果使用系统提供的视图，则会自动为您处理此图形。 但是，如果定义自定义视图，则必须自己提供绘图代码。 如果使用Quartz，Core Animation和UIKit进行绘制，则可以使用以下各节中描述的绘图概念。

除了直接绘制到屏幕，UIKit还允许您绘制到屏幕外位图和PDF图形上下文。 当你在离屏上下文中绘制时，您并不是在一个视图中绘制，这意味着视图绘制周期等概念不适用（除非您获取该图像并在图像视图中绘制它或类似图像）。

The View Drawing Cycle (视图绘制周期)

The basic drawing model for subclasses of the UIView class involves updating content on demand. The UIView class makes the update process easier and more efficient; however, by gathering the update requests you make and delivering them to your drawing code at the most appropriate time.

When a view is first shown or when a portion of the view needs to be redrawn, iOS asks the view to draw its content by calling the view’s drawRect: method.

UIView类的子类的基本绘图模型涉及按需更新内容。 UIView类使更新过程更容易，更有效; 但是，通过收集更新请求，您可以在最合适的时间将它们交付给您的绘图代码。

首次显示视图或需要重绘视图的一部分时，iOS会要求视图通过调用视图的drawRect:方法来绘制其内容。

There are several actions that can trigger a view update:

• Moving or removing another view that was partially obscuring your view
• Making a previously hidden view visible again by setting its hidden property to NO
• Scrolling a view off of the screen and then back onto the screen
• Explicitly calling the setNeedsDisplay or setNeedsDisplayInRect: method of your view

有几个操作可以触发视图更新:

• 移动或删除部分遮挡视图的其他视图
• 通过将其隐藏属性设置为NO，可以再次显示先前隐藏的视图
• 滚动屏幕上的视图，然后返回到屏幕上
• 显式调用视图的setNeedsDisplay或setNeedsDisplayInRect:方法

System views are redrawn automatically. For custom views, you must override the drawRect: method and perform all your drawing inside it. Inside your drawRect: method, use the native drawing technologies to draw shapes, text, images, gradients, or any other visual content you want. The first time your view becomes visible, iOS passes a rectangle to the view’s drawRect: method that contains your view’s entire visible area. During subsequent calls, the rectangle includes only the portion of the view that actually needs to be redrawn. For maximum performance, you should redraw only affected content.

After calling your drawRect: method, the view marks itself as updated and waits for new actions to arrive and trigger another update cycle. If your view displays static content, then all you need to do is respond to changes in your view’s visibility caused by scrolling and the presence of other views.

If you want to change the contents of the view, however, you must tell your view to redraw its contents. To do this, call the setNeedsDisplay or setNeedsDisplayInRect: method to trigger an update. For example, if you were updating content several times a second, you might want to set up a timer to update your view. You might also update your view in response to user interactions or the creation of new content in your view.

Important: Do not call your view’s drawRect: method yourself. That method should be called only by code built into iOS during a screen repaint. At other times, no graphics context exists, so drawing is not possible. (Graphics contexts are explained in the next section.)

系统视图会自动重绘。对于自定义视图，您必须覆盖drawRect：方法并在其中执行所有绘图。在drawRect：方法中，使用本机绘图技术绘制所需的形状，文本，图像，渐变或任何其他可视内容。第一次看到您的视图时，iOS会将一个矩形传递给视图的drawRect：方法，该方法包含视图的整个可见区域。在后续调用期间，矩形仅包括实际需要重绘的视图部分。为获得最佳性能，您应仅重绘受影响的内容。

在调用drawRect：方法之后，视图将自身标记为已更新，并等待新操作到达并触发另一个更新周期。如果您的视图显示静态内容，那么您需要做的就是响应视图因滚动和其他视图的存在而导致的可见性变化。

但是，如果要更改视图的内容，则必须告诉视图重绘其内容。为此，请调用setNeedsDisplay或setNeedsDisplayInRect:方法以触发更新。例如，如果您每秒多次更新内容，则可能需要设置计时器以更新视图。您还可以更新视图以响应用户交互或在视图中创建新内容。

重要提示：请勿自行调用视图的drawRect：方法。 只有在屏幕重绘期间内置于iOS中的代码才能调用该方法。 在其他时候，不存在图形上下文，因此无法绘图。 （图形上下文将在下一节中介绍。）

Coordinate Systems and Drawing in iOS

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. Apps in iOS sometimes have to deal with different coordinate systems when drawing.

当应用程序在iOS中绘制内容时，它必须在由二维空间定义的坐标系中定位绘制的内容。乍一看，这个概念似乎很简单，但事实并非如此。 iOS中的应用有时必须在绘图时处理不同的坐标系。

In iOS, all drawing occurs in a graphics context. Conceptually, a graphics context is an object that describes where and how drawing should occur, including basic drawing attributes such as the colors to use when drawing, the clipping area, line width and style information, font information, compositing options, and so on.

在iOS中，所有绘图都在图形上下文中进行。从概念上讲，图形上下文是描述绘图应在何处以及如何发生的对象，包括基本绘图属性，例如绘制时使用的颜色，剪切区域，线宽和样式信息，字体信息，合成选项等。

In addition, as shown in Figure 1-1, each graphics context has a coordinate system. More precisely, each graphics context has three coordinate systems:

另外，如图1-1所示，每个图形上下文都有一个坐标系。更确切地说，每个图形上下文都有三个坐标系：

• The drawing (user) coordinate system. This coordinate system is used when you issue drawing commands.

• The view coordinate system (base space). This coordinate system is a fixed coordinate system relative to the view.

• The (physical) device coordinate system. This coordinate system represents pixels on the physical screen.

• 绘图（用户）坐标系。发出绘图命令时使用此坐标系。

• 视图坐标系（基本空间）。该坐标系是相对于视图的固定坐标系。

• （物理）设备坐标系。该坐标系表示物理屏幕上的像素。

Figure 1-1 The relationship between drawing coordinates, view coordinates, and hardware coordinates
图1-1 绘图坐标，视图坐标和硬件坐标之间的关系

The drawing frameworks of iOS create graphics contexts for drawing to specific destinations—the screen, bitmaps, PDF content, and so on—and these graphics contexts establish the initial drawing coordinate system for that destination. This initial drawing coordinate system is known as the default coordinate system, and is a 1:1 mapping onto the view’s underlying coordinate system.

iOS的绘图框架创建用于绘制到特定目的地的图形上下文 - 屏幕，位图，PDF内容等 - 并且这些图形上下文为该目标建立初始绘图坐标系。此初始绘图坐标系称为默认坐标系，是视图底层坐标系上的1：1映射。

Each view also has a current transformation matrix (CTM), a mathematical matrix that maps the points in the current drawing coordinate system to the (fixed) view coordinate system. The app can modify this matrix (as described later) to change the behavior of future drawing operations.

每个视图还具有当前变换矩阵（CTM），该数学矩阵将当前绘图坐标系中的点映射到（固定）视图坐标系。应用程序可以修改此矩阵（如稍后所述）以更改将来绘制操作的行为。

Each of the drawing frameworks of iOS establishes a default coordinate system based on the current graphics context. In iOS, there are two main types of coordinate systems:

An upper-left-origin coordinate system (ULO), in which the origin of drawing operations is at the upper-left corner of the drawing area, with positive values extending downward and to the right. The default coordinate system used by the UIKit and Core Animation frameworks is ULO-based.
A lower-left-origin coordinate system (LLO), in which the origin of drawing operations is at the lower-left corner of the drawing area, with positive values extending upward and to the right. The default coordinate system used by Core Graphics framework is LLO-based.

iOS的每个绘图框架都基于当前图形上下文建立默认坐标系。在iOS中，有两种主要类型的坐标系：

左上原点坐标系（ULO），其中绘图操作的原点位于绘图区域的左上角，正值向下和向右延伸。 UIKit和Core Animation框架使用的默认坐标系是基于ULO的。
左下原点坐标系（LLO），其中绘图操作的原点位于绘图区域的左下角，正值向上和向右延伸。 Core Graphics框架使用的默认坐标系是基于LLO的。

These coordinate systems are shown in Figure 1-2.
这些坐标系如图1-2所示。

Note: The default coordinate system in OS X is LLO-based. Although the drawing functions and methods of the Core Graphics and AppKit frameworks are perfectly suited to this default coordinate system, AppKit provides programmatic support for flipping the drawing coordinate system to have an upper-left origin.

**注意：**OS X中的默认坐标系是基于LLO的。 虽然Core Graphics和AppKit框架的绘图功能和方法非常适合此默认坐标系，但AppKit提供了编程支持，可以将绘图坐标系翻转为左上角。

Before calling your view’s drawRect: method, UIKit establishes the default coordinate system for drawing to the screen by making a graphics context available for drawing operations. Within a view’s drawRect: method, an app can set graphics-state parameters (such as fill color) and draw to the current graphics context without needing to refer to the graphics context explicitly. This implicit graphics context establishes a ULO default coordinate system.

在调用视图的drawRect方法之前，UIKit通过为绘图操作提供图形上下文来建立绘制到屏幕的默认坐标系。 在视图的drawRect：方法中，应用程序可以设置图形状态参数（例如填充颜色）并绘制到当前图形上下文，而无需显式引用图形上下文。 此隐式图形上下文建立ULO默认坐标系。

Points Versus Pixels

In iOS there is a distinction between the coordinates you specify in your drawing code and the pixels of the underlying device. When using native drawing technologies such as Quartz, UIKit, and Core Animation, the drawing coordinate space and the view’s coordinate space are both logical coordinate spaces, with distances measured in points. These logical coordinate systems are decoupled from the device coordinate space used by the system frameworks to manage the pixels onscreen.

在iOS中，您在绘图代码中指定的坐标与底层设备的像素之间存在区别。 使用Quartz，UIKit和Core Animation等原生绘图技术时，绘图坐标空间和视图的坐标空间都是逻辑坐标空间，以点为单位测量距离。 这些逻辑坐标系与系统框架用于管理屏幕上像素的设备坐标空间分离。

The system automatically maps points in the view’s coordinate space to pixels in the device coordinate space, but this mapping is not always one-to-one. This behavior leads to an important fact that you should always remember:

系统会自动将视图坐标空间中的点映射到设备坐标空间中的像素，但此映射并不总是一对一的。 这种行为导致了一个重要的事实，你应该永远记住：

One point does not necessarily correspond to one physical pixel.

一点不一定对应于一个物理像素。

The purpose of using points (and the logical coordinate system) is to provide a consistent size of output that is device independent. For most purposes, the actual size of a point is irrelevant. The goal of points is to provide a relatively consistent scale that you can use in your code to specify the size and position of views and rendered content. How points are actually mapped to pixels is a detail that is handled by the system frameworks. For example, on a device with a high-resolution screen, a line that is one point wide may actually result in a line that is two physical pixels wide. The result is that if you draw the same content on two similar devices, with only one of them having a high-resolution screen, the content appears to be about the same size on both devices.

使用点（和逻辑坐标系）的目的是提供与设备无关的一致输出大小。 在大多数情况下，点的实际大小是无关紧要的。 点的目标是提供相对一致的比例，您可以在代码中使用该比例来指定视图和呈现内容的大小和位置。 实际如何将点映射到像素是由系统框架处理的细节。 例如，在具有高分辨率屏幕的设备上，一点宽的线实际上可能产生两个物理像素宽的线。 结果是，如果您在两个类似的设备上绘制相同的内容，其中只有一个具有高分辨率屏幕，则两个设备上的内容大小大致相同。

Note: In the context of PDF rendering and printing, Core Graphics defines “point” using the industry standard mapping of one point to 1/72 of an inch.

注意：在PDF渲染和打印的上下文中，Core Graphics使用一个点到1/72英寸的行业标准映射来定义“点”。

In iOS, the UIScreen, UIView, UIImage, and CALayer classes provide properties to obtain (and, in some cases, set) a scale factor that describes the relationship between points and pixels for that particular object. For example, every UIKit view has a contentScaleFactor property. On a standard-resolution screen, the scale factor is typically 1.0. On a high-resolution screen, the scale factor is typically 2.0. In the future, other scale factors may also be possible. (In iOS prior to version 4, you should assume a scale factor of 1.0.)

在iOS中，UIScreen，UIView，UIImage和CALayer类提供了获取（并且在某些情况下，设置）比例因子的属性，该比例因子描述了该特定对象的点和像素之间的关系。 例如，每个UIKit视图都有一个contentScaleFactor属性。 在标准分辨率屏幕上，比例因子通常为1.0。 在高分辨率屏幕上，比例因子通常为2.0。 将来，其他比例因子也是可能的。 （在版本4之前的iOS中，您应该假设比例因子为1.0。）

Native drawing technologies, such as Core Graphics, take the current scale factor into account for you. For example, if one of your views implements a drawRect: method, UIKit automatically sets the scale factor for that view to the screen’s scale factor. In addition, UIKit automatically modifies the current transformation matrix of any graphics contexts used during drawing to take into account the view’s scale factor. Thus, any content you draw in your drawRect: method is scaled appropriately for the underlying device’s screen.

原生绘图技术（如Core Graphics）会将当前比例因子考虑在内。 例如，如果您的一个视图实现了drawRect：方法，UIKit会自动将该视图的比例因子设置为屏幕的比例因子。 此外，UIKit会自动修改绘图期间使用的任何图形上下文的当前变换矩阵，以考虑视图的比例因子。 因此，您在drawRect：方法中绘制的任何内容都会针对底层设备的屏幕进行适当缩放。

Because of this automatic mapping, when writing drawing code, pixels usually don’t matter. However, there are times when you might need to change your app’s drawing behavior depending on how points are mapped to pixels—to download higher-resolution images on devices with high-resolution screens or to avoid scaling artifacts when drawing on a low-resolution screen, for example.

由于这种自动映射，在编写绘图代码时，像素通常无关紧要。 但是，有时您可能需要根据点映射到像素的方式更改应用程序的绘图行为 - 在具有高分辨率屏幕的设备上下载更高分辨率的图像，或者在低分辨率屏幕上绘图时避免缩放瑕疵 ， 例如。

In iOS, when you draw things onscreen, the graphics subsystem uses a technique called antialiasing to approximate a higher-resolution image on a lower-resolution screen. The best way to explain this technique is by example. When you draw a black vertical line on a solid white background, if that line falls exactly on a pixel, it appears as a series of black pixels in a field of white. If it appears exactly between two pixels, however, it appears as two grey pixels side-by-side, as shown in Figure 1-3.

在iOS中，当您在屏幕上绘制内容时，图形子系统使用称为抗锯齿的技术来在较低分辨率的屏幕上逼近较高分辨率的图像。 解释这种技术的最好方法是举例。 当您在纯白色背景上绘制黑色垂直线时，如果该线恰好落在像素上，则它在白色区域中显示为一系列黑色像素。 但是，如果它恰好出现在两个像素之间，它会并排显示为两个灰色像素，如图1-3所示。

Figure 1-3 A one-point line centered at a whole-numbered point value

图1-3 以整数点值为中心的单点线

Positions defined by whole-numbered points fall at the midpoint between pixels. For example, if you draw a one-pixel-wide vertical line from (1.0, 1.0) to (1.0, 10.0), you get a fuzzy grey line. If you draw a two-pixel-wide line, you get a solid black line because it fully covers two pixels (one on either side of the specified point). As a rule, lines that are an odd number of physical pixels wide appear softer than lines with widths measured in even numbers of physical pixels unless you adjust their position to make them cover pixels fully.

由整数点定义的位置落在像素之间的中点。 例如，如果从（1.0,1.0）到（1.0,10.0）绘制一个像素宽的垂直线，则会得到模糊的灰线。 如果绘制一条两像素宽的线，则会得到一条纯黑线，因为它完全覆盖两个像素（指定点两侧各一个）。 通常，奇数个物理像素宽的线条比使用偶数个物理像素测量宽度的线条更柔和，除非您调整它们的位置以使它们完全覆盖像素。

Where the scale factor comes into play is when determining how many pixels are covered by a one-point-wide line.

比例因子起作用的地方是确定一点宽线覆盖多少像素。

On a low-resolution display (with a scale factor of 1.0), a one-point-wide line is one pixel wide. To avoid antialiasing when you draw a one-point-wide horizontal or vertical line, if the line is an odd number of pixels in width, you must offset the position by 0.5 points to either side of a whole-numbered position. If the line is an even number of points in width, to avoid a fuzzy line, you must not do so.

在低分辨率显示器（比例因子为1.0）上，一点宽线是一个像素宽。 要在绘制一个点宽的水平或垂直线时避免抗锯齿，如果线宽为奇数个像素，则必须将位置偏移0.5个点到整个编号位置的任意一侧。 如果线宽为偶数个点，为避免模糊线，则不得这样做。

Figure 1-4 Appearance of one-point-wide lines on standard and retina displays

图1-4 标准和视网膜显示屏上一点宽线的外观

On a high-resolution display (with a scale factor of 2.0), a line that is one point wide is not antialiased at all because it occupies two full pixels (from -0.5 to +0.5). To draw a line that covers only a single physical pixel, you would need to make it 0.5 points in thickness and offset its position by 0.25 points. A comparison between the two types of screens is shown in Figure 1-4.

在高分辨率显示器（比例因子为2.0）上，一点宽的线根本没有抗锯齿，因为它占据两个完整像素（从-0.5到+0.5）。 要绘制仅覆盖单个物理像素的线，您需要将其设置为0.5个点，并将其位置偏移0.25个点。 两种屏幕的比较如图1-4所示。

Of course, changing drawing characteristics based on scale factor may have unexpected consequences. A 1-pixel-wide line might look nice on some devices but on a high-resolution device might be so thin that it is difficult to see clearly. It is up to you to determine whether to make such a change.

当然，基于比例因子改变绘图特性可能会产生意想不到的后果。 1像素宽的线在某些设备上可能看起来不错，但在高分辨率设备上可能很薄，很难看清楚。 由您决定是否进行此类更改。