基于CoreGraphics的常见图形的绘制方法

       
绘制图形并不复杂，但是项目中构建UI界面的时候，经常需要用到。为了方便，我写了一个类，里面定义了绘制常见图形的接口，最后得到一个小机器人。最初的设计是这样滴：唉，算了，本人的绘画功底实在惨不忍睹。


  然后上代码吧：

  

//  Created by Wu on 14-5-14.
//  Copyright (c) 2014年 Wu. All rights reserved.
//

#import "DrawRobbort.h"

//此接口主要定义一些绘制图形的
@interface DrawRobbortClass : NSObject

//绘制空心矩形
-(void) drawRectangleEmpty:(CGRect)rect withColor:(UIColor*)color;
//绘制实心矩形
-(void) drawRectangleFull:(CGRect)rect withColor:(UIColor*)color;
//绘制空心三角形
-(void) drawDeltaEmpty:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
lastPoint:(CGPoint)lastPoint
withColor:(UIColor*)color;
//绘制空心三角形
-(void) drawDeltaFull:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
lastPoint:(CGPoint)lastPoint
withColor:(UIColor*)color;
//绘制一条直线
-(void) drawLineEmpty:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
withColor:(UIColor*)color;
//绘制一个空心的圆形
-(void)drawRoundEmpty:(CGRect)rect withColor:(UIColor*)color;
//绘制一个实心的圆形
-(void)drawRoundFull:(CGRect)rect withColor:(UIColor*)color;

@end

    这个是写了一个私有类，接口都是私有的。嘿嘿！实现文件如下：

@implementation DrawRobbortClass

//绘制空心矩形
-(void) drawRectangleEmpty:(CGRect)rect withColor:(UIColor*)color;
{
CGContextRef  context = UIGraphicsGetCurrentContext();
CGContextStrokeRect(context, rect);
//CGContextSetRGBStrokeColor(context, 0.6, 0.9, 0, 1.0); //设置线条的颜色
//    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
//    CGContextSetRGBFillColor(context, 61/255.0f, 122/255.0f, 160/255.0f, 0.2f);
CGContextStrokePath(context);

}

//绘制实心矩形
-(void) drawRectangleFull:(CGRect)rect withColor:(UIColor*)color;
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, rect);
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillPath(context);
}

//绘制空心三角形
-(void) drawDeltaEmpty:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
lastPoint:(CGPoint)lastPoint
withColor:(UIColor*)color;
{
//画三角形
CGContextRef  context = UIGraphicsGetCurrentContext(); //获取当前上下文
CGMutablePathRef pathRef = CGPathCreateMutable();
// 初始化该path到一个初始点
CGPathMoveToPoint(pathRef, &CGAffineTransformIdentity, firstPoint.x, firstPoint.y);
// 添加一条直线，从初始点到该函数指定的坐标点
CGPathAddLineToPoint(pathRef, &CGAffineTransformIdentity, otherPoint.x, otherPoint.y);
CGPathAddLineToPoint(pathRef, &CGAffineTransformIdentity, lastPoint.x, lastPoint.y);
// 关闭该path
CGPathCloseSubpath(pathRef);
// 将此path添加到Quartz上下文中
CGContextAddPath(context, pathRef);
// 对上下文进行描边
CGContextStrokePath(context);
}

//绘制实心三角形
-(void) drawDeltaFull:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
lastPoint:(CGPoint)lastPoint
withColor:(UIColor*)color;
{
CGContextRef context = UIGraphicsGetCurrentContext(); //获取图形上下文
CGContextBeginPath(context); //创建一个新的空图形路径
CGContextMoveToPoint(context, firstPoint.x, firstPoint.y);
CGContextAddLineToPoint(context, otherPoint.x, otherPoint.y);
CGContextAddLineToPoint(context, lastPoint.x, lastPoint.y); //在当前点追加直线段
//关闭并终止当前路径的子路径，并在当前点和子路径的起点之间追加一条线
CGContextClosePath(context);
CGContextSetFillColorWithColor(context, color.CGColor); //设置填充色
//绘制当前路径
CGContextFillPath(context);
}

//绘制一条直线
-(void) drawLineEmpty:(CGPoint)firstPoint
otherPoint:(CGPoint)otherPoint
withColor:(UIColor*)color;
{
CGContextRef  context = UIGraphicsGetCurrentContext(); //获取当前上下文
CGContextMoveToPoint(context, firstPoint.x, firstPoint.y); //设置起点
CGContextAddLineToPoint(context, otherPoint.x, otherPoint.y); //设置终点
CGContextSetLineWidth(context, 2); //设置线宽度
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextSetRGBStrokeColor(context, 1.0,0.0,0.0,1.0);
CGContextStrokePath(context);
}

//绘制一个空心的圆形
-(void)drawRoundEmpty:(CGRect)rect withColor:(UIColor*)color;
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 0.6, 0.9, 0, 1.0); //设置线条的颜色
CGContextSetLineWidth(context, 1.0);  //设置宽度
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextAddEllipseInRect(context, rect);
CGContextStrokePath(context); //跟上句代码效果是一样的
}

//绘制一个实心的圆形
-(void)drawRoundFull:(CGRect)rect withColor:(UIColor*)color;
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(context,rect);
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillPath(context);
}

   好了，接口设计完毕了。开始调用吧！

   

@implementation DrawRobbort

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {

}
return self;
}

- (void)drawRect:(CGRect)rect;
{
DrawRobbortClass * drawRobbortClass = [[DrawRobbortClass alloc] init];
//绘制天线
CGPoint  point_1 = CGPointMake(100, 60);
CGPoint  point_2 = CGPointMake(130, 80);
CGPoint  point_3 = CGPointMake(190, 60);
CGPoint  point_4 = CGPointMake(160, 80);
//绘制两条眉毛
CGPoint  point_5 = CGPointMake(110, 100);
CGPoint  point_6 = CGPointMake(130, 120);
CGPoint  point_7 = CGPointMake(180, 100);
CGPoint  point_8 = CGPointMake(160, 120);
//鼻子的坐标
CGPoint  point_9 = CGPointMake(145, 122);
CGPoint  point_10 = CGPointMake(130, 140);
CGPoint  point_11 = CGPointMake(160, 140);
//绘制两条手臂
CGPoint  point_12 = CGPointMake(80, 220);
CGPoint  point_13 = CGPointMake(30, 250);
CGPoint  point_14 = CGPointMake(220, 220);
CGPoint  point_15 = CGPointMake(270, 250);

//绘制两条大腿
CGRect rectleftLeg = CGRectMake(100, 360, 20, 250);
CGRect rectRightLeg = CGRectMake(180, 360, 20, 250);
//绘制两双脚
CGRect rectleftFoot = CGRectMake(60, 390, 60, 30);
CGRect rectRightFoot = CGRectMake(180, 390, 60, 30);

//脑袋的坐标
CGRect rectHead = CGRectMake(100, 80, 100, 100);
//肚子坐标
CGRect rectBelly = CGRectMake(80, 220, 140, 140);
//脖子的坐标
CGRect rectNeck = CGRectMake(135, 180, 30, 40);
//嘴巴的坐标
CGRect rectMouth = CGRectMake(130, 145, 30, 30);
//眼睛的坐标
CGRect rectleftEye  = CGRectMake(110, 115, 10, 10);
CGRect rectRightEye = CGRectMake(170, 115, 10, 10);
//手的坐标
CGRect rectleftHand  = CGRectMake(20, 240, 30, 30);
CGRect rectRightHand = CGRectMake(260, 240, 30, 30);
//可爱的机器人有话说
CGRect rectText = CGRectMake(230, 80, 70, 20);

UIColor * color = [UIColor redColor];
//先绘制两根天线
[drawRobbortClass drawLineEmpty:point_1 otherPoint:point_2 withColor:color];
[drawRobbortClass drawLineEmpty:point_3 otherPoint:point_4 withColor:color];
//然后绘制正方形大脑袋
[drawRobbortClass drawRectangleEmpty:rectHead withColor:color];
//开始绘制两条眉毛
[drawRobbortClass drawLineEmpty:point_5 otherPoint:point_6 withColor:color];
[drawRobbortClass drawLineEmpty:point_7 otherPoint:point_8 withColor:color];
//开始绘制两个眼睛
[drawRobbortClass drawRectangleEmpty:rectleftEye withColor:color];
[drawRobbortClass drawRectangleEmpty:rectRightEye withColor:color];
//开始绘制鼻子
[drawRobbortClass drawDeltaFull:point_9 otherPoint:point_10 lastPoint:point_11 withColor:color];
//开始绘制嘴巴
[drawRobbortClass drawRectangl
4000
eEmpty:rectMouth withColor:color];
//开始绘制脖子
[drawRobbortClass drawRectangleFull:rectNeck withColor:color];
//开始绘制肚子
[drawRobbortClass drawRectangleEmpty:rectBelly withColor:color];
//再画两条手臂
[drawRobbortClass drawLineEmpty:point_12 otherPoint:point_13 withColor:color];
[drawRobbortClass drawLineEmpty:point_14 otherPoint:point_15 withColor:color];
//开始画手
[drawRobbortClass drawRoundFull:rectleftHand withColor:color];
[drawRobbortClass drawRoundFull:rectRightHand withColor:color];
//开始画腿
[drawRobbortClass drawRectangleFull:rectleftLeg withColor:color];
[drawRobbortClass drawRectangleFull:rectRightLeg withColor:color];
//开始画脚
[drawRobbortClass drawRectangleFull:rectleftFoot withColor:color];
[drawRobbortClass drawRectangleFull:rectRightFoot withColor:color];
//尼玛大功告成了
//开始画对话框
[drawRobbortClass drawRectangleEmpty:rectText withColor:color];
UILabel * textLabel = [[UILabel alloc] initWithFrame:CGRectMake(230, 40, 100, 100)];
[textLabel setTextColor:[UIColor redColor]];
[textLabel setText:@"渣渣们"];
[self addSubview:textLabel];
//
}

@end

    然后，实例化这个View，添加到FirstViewcontroller的view上：

- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationItem.title = @"首页";
UIBarButtonItem * leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(leftBarButtonItemClicked:)];
self.navigationItem.rightBarButtonItem = leftBarButtonItem;
self.drawRobbort = [[DrawRobbort alloc] initWithFrame:CGRectMake(0, 65, 320, 400)];
_drawRobbort.backgroundColor = [UIColor clearColor];
[self.view addSubview:_drawRobbort];

}

   运行，一切正常，可爱的小机器人就粗来啦！哈哈哈哈！



   吐槽吧大婶们！！