Quartz2D的基本用法

2018-07-20 來(lái)源：open-open

容器云強(qiáng)勢(shì)上線！快速搭建集群，上萬(wàn)Linux鏡像隨意使用

Quartz 2D是一個(gè)二維繪圖引擎，同時(shí)支持iOS和Mac系統(tǒng)。Quartz2D的基本用法。

1、自定義view的步驟

新建一個(gè)類(lèi)，繼承自UIView
實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法，然后在這個(gè)方法中
取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文
繪制相應(yīng)的圖形內(nèi)容
利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面

2、Quartz2D繪圖的代碼步驟

獲得圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
拼接路徑（下面代碼是搞一條線段）
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);
繪制路徑
CGContextStrokePath(ctx); // CGContextFillPath(ctx);

3、常用拼接路徑函數(shù)

新建一個(gè)起點(diǎn)
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);
添加新的線段到某個(gè)點(diǎn)
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y);
添加一個(gè)矩形
void CGContextAddRect(CGContextRef c, CGRect rect);
添加一個(gè)橢圓
void CGContextAddEllipseInRect(CGContextRef context, CGRect rect);
添加一個(gè)圓弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise);

4、常用繪制路徑函數(shù)

Mode參數(shù)決定繪制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
繪制空心路徑
void CGContextStrokePath(CGContextRef c)
繪制實(shí)心路徑
void CGContextFillPath(CGContextRef c)

提示：一般以CGContextDraw、CGContextStroke、CGContextFill開(kāi)頭的函數(shù)，都是用來(lái)繪制路徑的

5、圖形上下文棧的操作

將當(dāng)前的上下文copy一份,保存到棧頂(那個(gè)棧叫做”圖形上下文�！�)
void CGContextSaveGState(CGContextRef c)
將棧頂?shù)纳舷挛某鰲?替換掉當(dāng)前的上下文
void CGContextRestoreGState(CGContextRef c)

6、代碼實(shí)例

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    // 1.獲得圖形上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.拼接圖形(路徑)
    // 設(shè)置線段寬度
    CGContextSetLineWidth(ctxR, 10);
     
    // 設(shè)置線段頭尾部的樣式
    /**
        kCGLineCapButt,
        kCGLineCapRound,    //圓角
        kCGLineCapSquare
    */
    CGContextSetLineCap(ctxR, kCGLineCapRound);
     
    // 設(shè)置線段轉(zhuǎn)折點(diǎn)的樣式
    /**
        kCGLineJoinMiter,
        kCGLineJoinRound,    //圓角
        kCGLineJoinBevel
    */
    CGContextSetLineJoin(ctxR, kCGLineJoinRound);
     
    /**  第1根線段  **/
    // 設(shè)置顏色
    CGContextSetRGBStrokeColor(ctxR, 1, 0, 0, 1);
    // 設(shè)置一個(gè)起點(diǎn)
    CGContextMoveToPoint(ctxR, 10, 10);
    // 添加一條線段到(100, 100)
    CGContextAddLineToPoint(ctxR, 100, 100);
     
    // 渲染一次
    CGContextStrokePath(ctxR);
     
     
    /**  第2根線段  **/
    // 設(shè)置顏色
    CGContextSetRGBStrokeColor(ctxR, 0, 0, 1, 1);
    // 設(shè)置一個(gè)起點(diǎn)
    CGContextMoveToPoint(ctxR, 200, 190);
    // 添加一條線段到(150, 40)
    CGContextAddLineToPoint(ctxR, 150, 40);
    CGContextAddLineToPoint(ctxR, 120, 60);
     
     
    // 3.渲染顯示到view上面
    CGContextStrokePath(ctxR);
}

- (void)drawRect:(CGRect)rect
{
    drawForRect();
}
 
/**
 *  畫(huà)四邊形
 */
void drawForRect()
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.畫(huà)矩形
    CGContextAddRect(ctxR, CGRectMake(10, 10, 150, 100));
     
    // set : 同時(shí)設(shè)置為實(shí)心和空心顏色
    // setStroke : 設(shè)置空心顏色
    // setFill : 設(shè)置實(shí)心顏色
    [[UIColor whiteColor] set];
     
//    CGContextSetRGBFillColor(ctxR, 0, 0, 1, 1);
     
    // 3.繪制圖形
    CGContextFillPath(ctxR);
}
 
/**
 *  畫(huà)三角形
 */
void drawTriangle()
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.畫(huà)三角形
    CGContextMoveToPoint(ctxR, 0, 0);
    CGContextAddLineToPoint(ctxR, 100, 100);
    CGContextAddLineToPoint(ctxR, 150, 80);
    // 關(guān)閉路徑(連接起點(diǎn)和最后一個(gè)點(diǎn))
    CGContextClosePath(ctxR);
     
    //
    CGContextSetRGBStrokeColor(ctxR, 0, 1, 0, 1);
     
    // 3.繪制圖形
    CGContextStrokePath(ctxR);
}

- (void)drawRect:(CGRect)rect
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.畫(huà)1/4圓
    CGContextMoveToPoint(ctxR, 100, 100);
    CGContextAddLineToPoint(ctxR, 100, 150);
    CGContextAddArc(ctxR, 100, 100, 50, -M_PI_2, M_PI, 1);
    CGContextClosePath(ctxR);
     
    [[UIColor redColor] set];
     
    // 3.顯示所繪制的東西
    CGContextFillPath(ctxR);
}
 
/**
 *  畫(huà)圓弧
 */
void drawArc()
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.畫(huà)圓弧
    // x\y : 圓心
    // radius : 半徑
    // startAngle : 開(kāi)始角度
    // endAngle : 結(jié)束角度
    // clockwise : 圓弧的伸展方向(0:順時(shí)針, 1:逆時(shí)針)
    CGContextAddArc(ctxR, 100, 100, 50, M_PI_2, M_PI, 0);
     
     
    // 3.顯示所繪制的東西
    CGContextFillPath(ctxR);
}
 
/**
 *  畫(huà)圓
 */
void drawCircle()
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
     
    // 2.畫(huà)圓
    CGContextAddEllipseInRect(ctxR, CGRectMake(50, 10, 100, 100));
     
    CGContextSetLineWidth(ctxR, 10);
     
    // 3.顯示所繪制的東西
    CGContextStrokePath(ctxR);
}

- (void)drawRect:(CGRect)rect
{
    drawImage();
}
 
void drawImage()
{
    // 1.取得圖片
    UIImage *image = [UIImage imageNamed:@"me"];
     
    // 2.畫(huà)
//    [image drawAtPoint:CGPointMake(50, 50)];
//    [image drawInRect:CGRectMake(0, 0, 150, 150)];
    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];
     
    // 3.畫(huà)文字
    NSString *str = @"為xxx所畫(huà)";
    [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];
}
 
/**
 *  畫(huà)文字
 */
void drawText()
{
    // 1.獲得上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();
    // 2.畫(huà)矩形
    CGRect cubeRect = CGRectMake(50, 50, 100, 100);
    CGContextAddRect(ctxR, cubeRect);
    // 3.顯示所繪制的東西
    CGContextFillPath(ctxR);
     
     
     
    // 4.畫(huà)文字
    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];
}

標(biāo)簽：代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。