iOS：quartz2D繪圖(畫一些簡單的圖形,如直線、三角形、圓、矩形、文字等)

標籤：

前一篇幾乎已經詳細介紹了Quartz2D的所有知識,這一篇以及後面就不廢話了,主要是用具體的執行個體來示範繪圖效果。

這裡我們先來繪製一些簡單的圖形(如直線、三角形、圓、矩形、文字、映像),它有兩種方式可以繪製，一種是通過上下文繪製，另一種是通過路徑繪製。下面對繪製三角形做了一個兩種方式繪製的示範。

 

繪製基本的圖形,需要在操作的視圖類中重寫- (void)drawRect:(CGRect)rect方法，並在在該方法中繪製圖形。繪製映像既可以重寫該方法繪製,也可以不用重寫該方法,它有封裝好的方法。這裡，我採用自訂一個視圖類並將控制器的視圖關聯此自訂類的方式來繪製圖形。具體執行個體如下：

1.建立一個自訂的視圖類DemoView,關聯控制器視圖。

    

 

2.在自訂的視圖類的- (void)drawRect:(CGRect)rect方法中進行繪圖：

//所有的調用方法都寫在- (void)drawRect:(CGRect)rect

- (void)drawRect:(CGRect)rect{    //1.擷取繪圖的上下文    CGContextRef context = UIGraphicsGetCurrentContext();        //畫直線    [self drawLine:context];        //畫三角形    [self drawTriangle:context];        //畫矩形    [self drawRectangle:context];        //畫圓    [self drawCircle:context];        //路徑的使用    [self drawByPath:context];        //畫文字    [self drawString:context];        //畫映像    [self drawImage];}

 

//繪製直線

#pragma mark -畫直線(實線和虛線)

-(void)drawLine:(CGContextRef) context{    //2.添加繪圖路徑    CGContextMoveToPoint(context, 30, 40);    CGContextAddLineToPoint(context, 100, 40); //終點        //3.設定繪圖的屬性    //描邊的顏色    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};    CGContextSetStrokeColor(context, redColor);        //填充的顏色    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};    CGContextSetFillColor(context, greenColor);        //線寬    CGContextSetLineWidth(context, 5);        //線的類型(虛線)    //CGFloat dash[2] = {1.0,2.0};    //CGContextSetLineDash(context, 0,dash, 2);        //4.繪圖(設定既填充有描邊)    CGContextDrawPath(context, kCGPathFillStroke);}

所畫直線和虛線為：

  

 

//繪製三角形

#pragma mark -通過上下文畫三角形(第一種方式)

-(void)drawTriangle:(CGContextRef) context{    //2.添加繪圖路徑    CGContextMoveToPoint(context, 100, 100);//起始點    CGContextAddLineToPoint(context, 150, 100); //終點    CGContextAddLineToPoint(context, 125, 150); //終點    CGContextAddLineToPoint(context, 100, 100); //終點        //3.設定繪圖的屬性    //描邊的顏色    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};    CGContextSetStrokeColor(context, redColor);        //填充的顏色    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};    CGContextSetFillColor(context, greenColor);        //線寬    CGContextSetLineWidth(context, 5);            //線的連接點的類型(miter尖角、round圓角、bevel平角)    CGContextSetLineJoin(context, kCGLineJoinRound);            //4.繪圖(設定既填充有描邊)    CGContextDrawPath(context, kCGPathFillStroke);    }

所畫的三角形為：

 

//繪製矩形

#pragma mark -畫矩形

-(void)drawRectangle:(CGContextRef)context{    //添加矩形    CGContextAddRect(context, CGRectMake(250, 100, 100, 100));        //設定繪圖的屬性    //描邊的顏色    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};    CGContextSetStrokeColor(context, redColor);        //填充的顏色    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};    CGContextSetFillColor(context, greenColor);        //4.繪圖    CGContextDrawPath(context, kCGPathFillStroke);}

所畫的矩形為：

 

//繪製圓

#pragma mark -畫圓(正圓、橢圓)

-(void)drawCircle:(CGContextRef) context{    //圓    CGContextAddEllipseInRect(context, CGRectMake(200, 300, 100, 100));        //橢圓    CGContextAddEllipseInRect(context, CGRectMake(60, 300, 100, 150));            //設定繪圖的屬性    //描邊的顏色    CGFloat redColor[4] = {1.0,0.0,0.0,1.0};    CGContextSetStrokeColor(context, redColor);        //填充的顏色    CGFloat greenColor[4] = {0.0,1.0,0.0,1.0};    CGContextSetFillColor(context, greenColor);        //4.繪圖    CGContextDrawPath(context, kCGPathFillStroke);}

所畫的正圓和橢圓為：

 

 

通過路徑畫三角形(第二種畫圖方式)

#pragma mark -通過路徑畫三角形

-(void)drawByPath:(CGContextRef)context{    //建立路徑    CGMutablePathRef path = CGPathCreateMutable();        //往路徑中添加映像    CGPathMoveToPoint(path, NULL, 100, 100);    CGPathAddLineToPoint(path, NULL, 200, 100);    CGPathAddLineToPoint(path, NULL, 150, 200);        //設定繪圖的屬性    [[UIColor redColor]setStroke];//描邊    [[UIColor greenColor]setFill];//填充    //[[UIColor purpleColor]set];   //既描邊又填充        //將路徑添加到上下文中    CGContextAddPath(context, path);        //閉合路徑    CGContextClosePath(context);        //繪圖    CGContextDrawPath(context, kCGPathFillStroke);        //清理    CGPathRelease(path);}

所畫三角形為：

 

//繪製文字

#pragma mark -畫文字(不換行、換行)

-(void)drawString:(CGContextRef)context{    NSString *str = @"hello world";        //以點開始畫不換行    [str drawAtPoint:CGPointMake(100, 60) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]}];            //在矩形中畫,超出就換行    [str drawWithRect:CGRectMake(100, 230, 50, 100) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]} context:nil];}

不換行和換行的文字為：

 

 

//繪製映像

#pragma mark -畫映像(將原圖繪製、將原圖按照矩形地區大小繪製、帶花邊繪製)

-(void)drawImage{    UIImage *imageName = [UIImage imageNamed:@"1.png"];            //原始映像大小    [imageName drawAtPoint:CGPointMake(250, 430)];        //改變映像大小    [imageName drawInRect:CGRectMake(250, 500, 100, 100)];        //花紋樣式畫映像    [imageName drawAsPatternInRect:CGRectMake(100, 500, 100, 100)];}

三種繪製的映像為：

   

 

iOS：quartz2D繪圖(畫一些簡單的圖形,如直線、三角形、圓、矩形、文字等)