iOS開發UI-利用Quartz2D 實現基本繪圖（畫三角形、矩形、圓、圓弧）

1.畫三角形  運行結果如下

1.1具體實現步驟

1.1.1首先新建一個project，然后自定義一個view

1.2代碼

#import "htingShapeView.h"

@implementation htingShapeView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
//    draw4Rect();
    drawTriangle();
}

/**
 *  畫四邊形
 */
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);
}

/**
 *  畫三角形
 */
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);
}

@end

2.畫矩形運行效果如下

2.1具體實現步驟

2.1.1搭建界面同上

2.1.2代碼

#import "htingShapeView.h"

@implementation htingShapeView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    draw4Rect();
//    drawTriangle();
}

/**
 *  畫四邊形
 */
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);
}

/**
 *  畫三角形
 */
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);
}

@end

3.畫圓  圓弧  等 運行效果如下

3.1代碼實現

#import "htingCircleView.h"

@implementation htingCircleView


- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

/**
 *  在view第一次顯示到屏幕上的時候會調用一次
 */
- (void)drawRect:(CGRect)rect
{
//    drawCircle2();
      drawCircle();
}

void drawCircle2()
{
    // 1.獲得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.畫1/4圓
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
    CGContextClosePath(ctx); //合並路徑  把起點和終點連起來

    [[UIColor redColor] set];//設置顏色  紅色

    // 3.顯示所繪制的東西   FillPath實心
    CGContextFillPath(ctx);

}


/**
 *  畫圓弧
 */
void drawArc()
{
    // 1.獲得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.畫圓弧
    // x\y : 圓心
    // radius : 半徑
    // startAngle : 開始角度
    // endAngle : 結束角度
    // clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針)
    //    CGContextAddArc(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat radius#>, <#CGFloat startAngle#>, <#CGFloat endAngle#>, <#int clockwise#>)
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    //    CGContextAddArc(ctx, 100（圓心x）, 100（圓心y), 50, M_PI_2, M_PI, 0);


    // 3.顯示所繪制的東西
    CGContextFillPath(ctx); //把繪制的路徑用空心顯示出來
    //CGContextStrokePath(ctx);畫實心
}

/**
 *  畫圓
 */
void drawCircle()
{
    // 1.獲得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.畫圓
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));//(50, 10,是坐標也就是這個圓的位置   100, 100表示寬高都是100

    CGContextSetLineWidth(ctx, 10); //設置線寬畫圓環

    // 3.顯示所繪制的東西
    CGContextStrokePath(ctx);
}

@end