iOS图形绘制全攻略

### iOS图形绘制全攻略 #### 1. 代码重构 在图形绘制应用中，为了提高代码的复用性和可维护性，我们可以对代码进行重构。将矩形和圆形的绘制分别封装到独立的函数中，这样在`drawRect:`方法中调用这些函数，代码会更加清晰。以下是重构后的代码： ```objc - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); //Call function to draw rectangle [self drawRectangleAtTopOfScreen:context]; //Call function to draw circle [self drawEllipse:context]; } -(void)drawRectangleAtTopOfScreen:(CGContextRef)context { CGContextSaveGState(context); //Set color of current context [[UIColor lightGrayColor] set]; //Draw rectangle CGRect drawingRect = CGRectMake(0.0, 0.0f, 320.0f, 60.0f); CGContextFillRect(context, drawingRect); CGContextRestoreGState(context); } -(void)drawEllipse:(CGContextRef)context { CGContextSaveGState(context); //Set color of current context [[UIColor whiteColor] set]; //Draw ellipse <- I know we’re drawing a circle, but a circle is just a special ellipse. CGRect ellipseRect = CGRectMake(60.0f, 150.0f, 200.0f, 200.0f); CGContextFillEllipseInRect(context, ellipseRect); CGContextRestoreGState(context); } ``` 在上述代码中，我们创建了两个新函数`drawRectangleAtTopOfScreen:`和`drawEllipse:`，并传入`CGContextRef`类型的参数，这样可以传递当前的绘图上下文。同时，添加了`CGContextSaveGState`和`CGContextRestoreGState`函数调用，确保在这些函数内部的设置（如颜色、阴影）只影响当前函数，而不会影响其他绘图操作。 #### 2. 绘制路径 除了矩形和圆形，我们还可以绘制自定义形状，通过创建由点和线或曲线连接而成的“路径”来实现。下面以绘制一个类似播放按钮的半透明三角形为例： ```objc - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); //Call function to draw rectangle [self drawRectangleAtTopOfScreen:context]; //Call function to draw circle [self drawEllipse:context]; //Call function to draw triangle [self drawTriangle:context]; } -(void)drawTriangle:(CGContextRef)context { CGContextSaveGState(context); //Set color of current context [[UIColor colorWithRed:0.80f green:0.85f blue:0.95f alpha:1.0f] set]; // Draw Triangle CGContextBeginPath(context); CGContextMoveToPoint(context, 140.0f, 380.0f); CGContextAddLineToPoint(context, 190.0f, 400.0f); CGContextAddLineToPoint(context, 140.0f, 420.0f); CGContextClosePath(context); CGContextSetGrayFillColor(context, 0.1f, 0.85f); CGContextSetGrayStrokeColor(context, 0.0, 0.0); CGContextFillPath(context); CGContextRestoreGState(context); } ``` 绘制路径的步骤如下： 1. 在上下文中声明一个新路径。 2. 指定路径的起始点。 3. 指定路径上的所有点。 4. 关闭路径。 5. 设置填充颜色和描边颜色。 6. 填充路径。 #### 3. 绘制弧线 绘制弧线稍微复杂一些，需要一些数学计算。使用`CGContextAddArc`函数绘制弧线时，需要确定以下几个参数： 1. 弧线中心的X和Y坐标。 2. 弧线的半径。 3. 弧线的起始和结束角度（从3点钟位置开始）。 4. 弧线是顺时针还是逆时针绘制。 以下是绘制弧线的代码： ```objc - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); //Call function to draw rectangle [self drawRectangleAtTopOfScreen:context]; //Call function to draw circle [self drawEllipse:context]; //Call function to draw triangle [self drawTriangle:context]; //Call function to draw arc [self drawArc:context]; } -(void)drawArc:(CGContextRef)context { CGContextSaveGState(context); //Set color of current context [[UIColor colorWithRed:0.30f green:0.30f blue:0.30f alpha:1.0f] set]; //Draw Arc CGContextAddArc(context, 160.0f, 250.0f, 70.0f, 0.0f, 3.14, 0); CGContextSetLineWidth(context, 50.0f); CGContextDrawPath(context, kCGPathStroke); CGContextRestoreGState(context); } ``` 在这个例子中，弧线的中心坐标为(160, 250)，半径为70，从0弧度开始，到3.14弧度结束，顺时针绘制。将弧线的线宽设置为50，使其看起来像状态栏。 #### 4. 添加字体和绘制文本 在设计趋势中，排版越来越受到重视，使用iOS系统字体和导入自定义字体对于创建视觉上吸引人的应用程序非常重要。 ##### 4.1 使用可用字体 iOS 7系统安装了大量的系统字体，要创建字体对象，可以使用`UIFont`类。声明`UIFont`对象时，需要知道字体家族的名称和字体样式，格式如下： ```objc UIFont *fontObjectName = [UIFont fontWithName:@"fontFamily-fontFace" size:<#(CGFloat)#> ]; ``` 例如，使用Helvetica粗体字体，大小为12点： ```objc UIFont *fontObjectName = [UIFont fontWithName: @"Helvetica-Bold" size: 12.0f]; ``` ##### 4.2 导入自定义字体 步骤如下： 1. 从[Google字体网站](http://www.google.com/fonts)下载自定义字体，这里以Oleo Script Swash Caps粗体字体为例。 2. 将字体文件从Finder拖放到Xcode的项目导航器中。 3. 在弹出的对话框中，选中“Copy items into destination group’s folder (if needed)”和添加到目标的复选框。 4. 展开项目导航器中的“Supporting Files”文件夹，打开`GraphicsRecipes-Info.plist`文件。 5. 在“Information Property List”旁边点击“+”，添加一个新的键“Fonts provided by application”，类型设置为“Array”。 6. 在“Font provided by application”下创建一个新项，将其值设置为字体文件名，类型选择“String”。 以下是绘制文本的代码： ```objc -(void)drawTextAtTopOfScreen:(CGContextRef)context{ CGContextSaveGState(context); //Create UIColor to pass into text attributes UIColor *textColor = [UIColor colorWithRed:0.80f green:0.85f blue:0.95f alpha:1.0f]; //Set font UIFont *customFont = [UIF ```