基本圖形的繪制 包括: 代碼畫線,畫文字 圖片 裁剪 重繪 簡單動畫
當自定義view的時候 系統會自動調用drawRect 方法
畫線
- (void)drawRect:(CGRect)rect { // Drawing code // 1.獲得圖形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.拼接圖形(路徑) // 設置線段寬度 CGContextSetLineWidth(ctx, 10); // 設置線段頭尾部的樣式 CGContextSetLineCap(ctx, kCGLineCapRound); // 設置線段轉折點的樣式 CGContextSetLineJoin(ctx, kCGLineJoinRound); /** 第1根線段 **/ // 設置顏色 CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1); // 設置一個起點 CGContextMoveToPoint(ctx, 10, 10); // 添加一條線段到(100, 100) CGContextAddLineToPoint(ctx, 100, 100); // 渲染一次 CGContextStrokePath(ctx); /** 第2根線段 **/ // 設置顏色 CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1); // 設置一個起點 CGContextMoveToPoint(ctx, 200, 190); // 添加一條線段到(150, 40) CGContextAddLineToPoint(ctx, 150, 40); CGContextAddLineToPoint(ctx, 120, 60); // 3.渲染顯示到view上面 CGContextStrokePath(ctx); }
畫圓弧
/** * 畫圓弧 */ void drawArc() { // 1.獲得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.畫圓弧 // x\y : 圓心 // radius : 半徑 // startAngle : 開始角度 // endAngle : 結束角度 // clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針) CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0); // 3.顯示所繪制的東西 CGContextFillPath(ctx); }
畫圓
/** * 畫圓 */ void drawCircle() { // 1.獲得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.畫圓 CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100)); CGContextSetLineWidth(ctx, 10); // 3.顯示所繪制的東西 CGContextStrokePath(ctx); }
畫矩形
/** * 畫四邊形 */ 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); }
畫文字
/** * 畫文字 */ 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]; }
畫圖片
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]; }
在繪制的時候 當設置瞭ctx 的顏色的時候 再繪制其他的圖時,顏色需要重置,很麻煩,解決方法是重置 ctx 如下
// 將ctx拷貝一份放到棧中 CGContextSaveGState(ctx); // 設置繪圖狀態 CGContextSetLineWidth(ctx, 10); [[UIColor redColor] set]; CGContextSetLineCap(ctx, kCGLineCapRound); // 第1根線 CGContextMoveToPoint(ctx, 50, 50); CGContextAddLineToPoint(ctx, 120, 190); CGContextStrokePath(ctx); // 將棧頂的上下文出棧,替換當前的上下文 CGContextRestoreGState(ctx);
整個ctx 的旋轉 移動
CGContextRotateCTM(ctx, M_PI_4 * 0.3); CGContextScaleCTM(ctx, 0.5, 0.5); CGContextTranslateCTM(ctx, 0, 150);
圖片的裁剪 思路是 裁剪ctx的顯示區域
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSaveGState(ctx); // 0.畫圓 CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50)); // 裁剪 CGContextClip(ctx); CGContextFillPath(ctx); // 1.顯示圖片 UIImage *image = [UIImage imageNamed:@"me"]; [image drawAtPoint:CGPointMake(100, 100)]; CGContextRestoreGState(ctx); CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50)); CGContextFillPath(ctx); }
動畫
CADisplayLink 是一個定時器,特點 刷新頻率高, setNeedsDisplay方法起重新繪制的作用
- (void)awakeFromNib { CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)]; [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; // [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES]; } - (void)drawRect:(CGRect)rect { self.snowY+=5; if (self.snowY >= rect.size.height) { self.snowY = -100; } UIImage *image = [UIImage imageNamed:@"snow.jpg"]; [image drawAtPoint:CGPointMake(0, self.snowY)]; }