iOS 基本的绘图

一、新建一个绘图类

新建一个绘图类，继承UIView，取名叫做MyView

1、MyView的头文件代码如下：

#import <UIKit/UIKit.h>

@interface MyView : UIView

@end

2、MyView的源文件代码如下：

#import "MyView.h"

@implementation MyView

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

        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

//绘制图形
- (void)drawRect:(CGRect)rect
{

}

3、在系统自动创建的UIViewController.m中添加如下代码：

#import "ViewController.h"
#import "MyView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    MyView *myView = [[MyView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width)];
    [self.view addSubview:myView];
}

二、绘制图形

1、绘制直线

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
    [self drawLine]; //绘制直线
}

//绘制直线
- (void)drawLine
{
    //获得图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //设置线段宽度
    CGContextSetLineWidth(ctx, 2);

    //设置线段头尾部的样式
    CGContextSetLineCap(ctx, kCGLineCapButt);

    //设置线段转折点的样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    //设置颜色
    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);

    //设置一个起点
    CGContextMoveToPoint(ctx, 10, 100);

    // 添加一条线段到(300, 100)
    CGContextAddLineToPoint(ctx, 300, 100);

    // 渲染一次
    CGContextStrokePath(ctx);
}

2、绘制圆弧

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
    //[self drawLine]; //绘制直线
    [self drawArc]; //画圆弧
}

//画圆弧
- (void)drawArc
{
    // 1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.画圆弧
    // x\y : 圆心
    // radius : 半径
    // startAngle : 开始角度
    // endAngle : 结束角度
    // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
    CGContextAddArc(ctx, 100, 100, 50, 0, M_PI/2, 0);

    // 3.显示所绘制的东西
    CGContextFillPath(ctx);
}

3、绘制四边形

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
// [self drawLine]; //绘制直线
// [self drawArc]; //画圆弧
    [self draw4Rect]; //绘制四边形
}

//画四边形
-(void)draw4Rect
{
    // 1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.画矩形
    CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));

    // set : 同时设置为实心和空心颜色
    // setStroke : 设置空心颜色
    // setFill : 设置实心颜色
    [[UIColor whiteColor] set];

    // CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);

    // 3.绘制图形
    CGContextFillPath(ctx);
}

4、绘制三角形

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
// [self drawLine]; //绘制直线
// [self drawArc]; //画圆弧
 // [self draw4Rect]; //绘制四边形
    [self drawTriangle]; //绘制三角形
}
}

//画三角形
-(void)drawTriangle
{
    // 1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.画三角形
    CGContextMoveToPoint(ctx, 0, 0);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 150, 80);
    // 关闭路径(连接起点和最后一个点)
    CGContextClosePath(ctx);

    //
    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);

    // 3.绘制图形
    CGContextStrokePath(ctx);
}

5、绘制文字

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
// [self drawLine]; //绘制直线
// [self drawArc]; //画圆弧
 // [self draw4Rect]; //绘制四边形
 // [self drawTriangle]; //绘制三角形
    [self drawText]; //绘制文字
}

//画文字

-(void)drawText
{
    // 1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.画矩形
    CGRect cubeRect = CGRectMake(50, 50, 100, 100);
    CGContextAddRect(ctx, cubeRect);
    // 3.显示所绘制的东西
    CGContextFillPath(ctx);

    // 4.画文字
    NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";
    // [str drawAtPoint:CGPointZero withAttributes:nil];

    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    // NSForegroundColorAttributeName : 文字颜色
    // NSFontAttributeName : 字体
    attrs[NSForegroundColorAttributeName] = [UIColor redColor];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    [str drawInRect:cubeRect withAttributes:attrs];
}

6、绘制图片

在MyView.m中添加如下代码：

- (void)drawRect:(CGRect)rect
{
// [self drawLine]; //绘制直线
// [self drawArc]; //画圆弧
 // [self draw4Rect]; //绘制四边形
 // [self drawTriangle]; //绘制三角形
  // [self drawText]; //绘制文字
    [self drawImage];
}

//画图片
-(void)drawImage
{
    // 1.取得图片
    UIImage *image = [UIImage imageNamed:@"me"];

    // 2.画
    // [image drawAtPoint:CGPointMake(50, 50)];
    // [image drawInRect:CGRectMake(0, 0, 150, 150)];
    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];

    // 3.画文字
    NSString *str = @"为xxx所画";
    [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];
}

Demo下载