深入探索Quartz2D绘图：从基础到应用实践

### 深入探索Quartz 2D绘图：从基础到应用实践 #### 1. Quartz 2D图形上下文 在Quartz中，绘图操作是在图形上下文中进行的，每个视图都有与之关联的上下文。获取当前上下文的代码如下： ```objc CGContextRef context = UIGraphicsGetCurrentContext(); ``` 需要注意的是，这里使用的是Core Graphics的C函数进行绘图，因为Core Graphics和OpenGL都是基于C的API。 定义好图形上下文后，就可以将其传递给各种Core Graphics绘图函数进行绘图。例如，以下代码将在上下文中创建一条4像素宽的线并绘制出来： ```objc CGContextSetLineWidth(context, 4.0); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextMoveToPoint(context, 10.0f, 10.0f); CGContextAddLineToPoint(context, 20.0f, 20.0f); CGContextStrokePath(context); ``` 在Core Graphics中，有两种与绘图动作相关的颜色： - 描边颜色：用于绘制线条和形状的轮廓。 - 填充颜色：用于填充形状。 当调用`CGContextMoveToPoint()`时，只是将当前路径的终点移动到指定位置，并不会实际绘制任何内容。后续的操作将相对于该点进行。而`CGContextStrokePath()`方法则会使用之前设置的线宽和描边颜色将路径着色并使其可见。 #### 2. 坐标系 在Core Graphics中，位置由x和y坐标表示，通常写作`(x, y)`，上下文的左上角为`(0, 0)`，向下移动y值增加，向右移动x值增加。但Quartz的坐标系与许多图形库和传统笛卡尔坐标系是相反的。例如，在OpenGL ES中，`(0, 0)`位于左下角，y坐标增加时向上移动。 为了指定坐标系中的点，一些Quartz函数需要两个浮点数作为参数，而另一些则要求将点嵌入到`CGPoint`结构体中。描述视图或其他对象的大小时，Quartz使用`CGSize`结构体，定义矩形则使用`CGRect`结构体，它包含一个`CGPoint`类型的`origin`和一个`CGSize`类型的`size`。 #### 3. 指定颜色 颜色是绘图的重要组成部分，在iOS中，UIKit提供了`UIColor`类。虽然不能直接在Core Graphic调用中使用`UIColor`对象，但可以通过其`CGColor`属性获取`CGColor`引用。例如： ```objc CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); ``` 在现代计算机图形中，常用的颜色表示方法是使用红、绿、蓝和透明度四个分量，即RGBA颜色模型。每个分量的值范围在0.0到1.0之间。 除了RGB模型，还有其他颜色模型，如HSV、HSL、CMYK和灰度模型等。不过，对于大多数操作，我们可以直接传递`UIColor`对象的`CGColor`，Core Graphics会处理必要的转换。 `UIColor`有许多便利方法来初始化特定颜色，如`redColor`方法。如果需要更精确地控制颜色，可以通过指定四个分量来创建颜色： ```objc return [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f]; ``` #### 4. 在上下文中绘制图像 Quartz允许直接在上下文中绘制图像，可以使用`UIImage`类的方法将图像绘制到当前上下文。可以通过指定`CGPoint`来确定图像的左上角位置，或者指定`CGRect`来框定图像。示例代码如下： ```objc CGPoint drawPoint = CGPointMake(100.0f, 100.0f); [image drawAtPoint:drawPoint]; ``` #### 5. 绘制形状 Quartz提供了许多函数来简化复杂形状的创建。例如，绘制椭圆时，只需定义椭圆所在的矩形，Core Graphics会完成其余工作： ```objc CGRect theRect = CGMakeRect(0,0,100,100); CGContextAddEllipseInRect(context, theRect); CGContextDrawPath(context, kCGPathFillStroke); ``` Quartz还提供了创建更复杂形状的方法，如圆弧和贝塞尔路径。 #### 6. Quartz 2D工具示例 Quartz提供了丰富的工具，支持用渐变填充多边形，以及使用各种虚线模式。以下是一些Quartz 2D能实现的效果示例： | 功能 | 描述 | | ---- | ---- | | 渐变填充 | 可以用渐变填充多边形，而不只是纯色 | | 虚线模式 | 除了实线，还支持各种虚线模式 | #### 7. QuartzFun应用程序 接下来要构建一个简单的绘图应用程序，将分别使用Quartz和OpenGL ES来实现，以对比两种环境的差异。 ##### 7.1 设置QuartzFun应用程序 在Xcode中，使用Single View Application模板创建一个新的iPhone项目，命名为QuartzFun。由于要在自定义视图中执行自定义绘图，所以需要创建一个`UIView`的子类，并覆盖`drawRect:`方法。具体操作步骤如下： 1. 选择QuartzFun文件夹，按`⌘N`打开新文件助手，选择Cocoa Touch部分的Objective-C类，命名为`BIDQuartzFunView`，并使其成为`UIView`的子类。 2. 再次选择QuartzFun组，按`⌘N`打开新