Quart2D繪圖

iOS 可以用的畫筆:

本文參考:
http://www.360doc.com/content/15/0929/15/11764545_502227892.shtml

相關庫

1, CGPath
CoreGraphics--CGPath.h

2, CGContext
CoreGraphics--CGContext.h

3,UIBezierPath
UIKit---UIBezierPath

流程總結

1、畫布-》

2、
構建路徑:開始、構建、閉合-》
或者直接在畫布上構建路徑

3、設置描邊顏色、填充顏色、線條連接樣式、收尾兩端樣式-》

4、給畫布增加路徑-》

5、繪制: 描邊 或是 填充

代碼實踐

#import "MyDrawView.h"
#define rad(x) ((x)*M_PI/ 180.0)

@implementation MyDrawView

-(void)drawRect:(CGRect)rect {
    // 在畫布上直接操作路徑。
    [self line];
    
    
    //    [self arc];
    
    // 先操作路徑, 然后添加到畫布上。當畫布繪制后,路徑就沒有了。  所以才有了保存路徑的
    //    [self pathLine];
}

-(void)pathLine{
    
    
    // 1、畫布
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 2、路徑
    CGMutablePathRef path= CGPathCreateMutable();
    CGPathAddArc(path, NULL, CGRectGetMidX(self.frame), 300, 200, 0, 2*M_PI, 1);
    CGPathCloseSubpath(path);
    
    
    
    
    
    // 添加一個路徑到畫布
    [self track:context];
    CGContextAddPath(context, path);// 畫布上有路徑了
    [self track:context];
    
    
    // 3、設置  顏色、線的樣式
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    
    // 兩條線連接處的樣式
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    // 線的收尾兩端的樣式
    CGContextSetLineCap(context, kCGLineCapButt);
    
    // 線的寬度
    CGContextSetLineWidth(context, 30);
    
    
    
    
    // 4、繪制
    [self track:context];
    CGContextDrawPath(context, kCGPathFillStroke);
    // 畫布清空了
    [self track:context];
    
}
-(void)line{
    CGFloat top=50;
    CGFloat left=30;
    CGFloat w=200;
    CGFloat h=60;
    // 1、畫布
    CGContextRef context= UIGraphicsGetCurrentContext();
    
    
    // 2、路徑
    // 構建路徑之前,先標記
    CGContextBeginPath(context);
    //CGContextMoveToPoint(context, 100, 100);
    CGPoint p[6] = {
        {left+w, top},
        {left, top},
        {left, top+h},
        {left+w, top+h},
        {left+w, top+2.0*h},
        {left, top+2.0*h}
    };
    [self track:context];
    CGContextAddLines(context, p, 6);// 畫布上有路徑了
    [self track:context];
    
    // 閉合當前路徑, 隨后為一個新路徑, 新路徑起點為當前點
    CGContextClosePath(context);
    [self track:context];
    
    
    // 測一下新的子路徑
    top = top+3.0*h;
    CGPoint p2[6] = {
        {left+w, top},
        {left, top},
        {left, top+h},
        {left+w, top+h},
        {left+w, top+2.0*h},
        {left, top+2.0*h}
    };
    CGContextAddLines(context, p2, 6);// 畫布上有路徑了
    
    
    // 3、設置  顏色、線的樣式
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    
    // 兩條線連接處的樣式
    //    kCGLineJoinMiter, 斜切連接
    //    kCGLineJoinRound, 圓角連接
    //    kCGLineJoinBevel, 斜角連接
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    // 線的收尾兩端的樣式
    CGContextSetLineCap(context, kCGLineCapButt);
    
    // 線的寬度
    //    kCGLineCapButt,
    //    kCGLineCapRound,
    //    kCGLineCapSquare
    CGContextSetLineWidth(context, 5);
    
    // 虛線模式
    //    (CGContextRef cg_nullable c,
    //     CGFloat phase, // 虛線的起始點
    //     const CGFloat * __nullable lengths, // 繪制片段 與 未繪制片段 交替
    //     size_t count)
    //CGFloat a[] = { 1.0f, 2.0f, 30.0f };
    //CGContextSetLineDash(context, 0, a , 3);
    
    // 4、繪制
    //    kCGPathFill,
    //    kCGPathEOFill,
    //    kCGPathStroke,
    //    kCGPathFillStroke,
    //    kCGPathEOFillStroke
    // 描邊當前路徑
    [self track:context];
    CGContextDrawPath(context, kCGPathFillStroke);
    [self track:context];
    
    // 便捷函數:
    //    CGContextFillPath(context)
    // 描邊當前路徑
    //    CGContextStrokePath(context)
    //    CGContextEOFillPath(context)
    
    // 描邊指定矩形的內切圓
    
    CGContextStrokeEllipseInRect(context, self.bounds);
    // 畫布上的路徑被清空了嗎
    [self track:context];
    
    
    // 用指定的線寬來描邊矩形
    CGContextStrokeRectWithWidth(context, CGRectInset(self.bounds, 30, 30), 10);
    
    top = top+6.0*h;
    CGPoint p3[6] = {
        {left+w, top},
        {left, top},
        {left, top+h},
        {left+w, top+h},
        {left+w, top+2.0*h},
        {left, top+2.0*h}
    };
    // 描邊線段序列--指定起點、終點的成對的點,來描每一條線段。點1,點2組成一條線段,點3,點4組成一條線段,以此類推
    CGContextStrokeLineSegments(context, p3, 6);
    // 描邊指定矩形
    CGContextStrokeRect(context, CGRectInset(self.bounds, 60, 60));
    
    
    // 畫布上的路徑被清空了
    [self track:context];
}
-(void)arc{
    // 1,畫布
    CGContextRef context= UIGraphicsGetCurrentContext();
    
    // 2、設置
    [[UIColor redColor] set];
    
    // 3、路徑
    CGContextBeginPath(context);
    CGContextAddArc(context, 160, 230, 100, 0, 2*M_PI, 1);
    CGContextClosePath(context);
    // 4、繪制
    CGContextStrokePath(context);
    
    
}

-(void)track:(CGContextRef)context {
    
    // 測試一下畫布上有沒有路徑,  或者說畫布有沒有被清空
    CGPoint point= CGContextGetPathCurrentPoint(context);
    CGRect rect= CGContextGetPathBoundingBox(context);
    NSLog(@"%@,  %@",  NSStringFromCGRect(rect), NSStringFromCGPoint(point));
    
}

@end


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容