最近是有些懶了，本計劃一周一篇文章的，現(xiàn)在都變成兩周一篇了，需要反省一下。。。
寫這篇文章是因為有一次看到說現(xiàn)在的程序員，連基本的繪圖都不會，所以就和大家一起學學基本繪圖吧。今天說的是繪制一些基本圖形，就一些圓啊，三角啊什么的，都比較簡單。
圓
CGContextRef context = UIGraphicsGetCurrentContext();//獲取畫布
CGContextSetRGBStrokeColor(context, 1, 1, 0, 1.0);//畫筆的顏色
CGContextSetLineWidth(context, 8.0);//畫筆的粗細
CGContextAddArc(context, 80, 30, 15, 0, 2 * M_PI, 0);//x,y是圓點坐標，radius是半徑，startAngle是開始的弧度,endAngle是結束的弧度，clockwise是是否為逆時針（1是0否）
CGContextDrawPath(context, kCGPathStroke);//完成路徑
帶邊框的圓
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);//設置填充顏色
CGContextSetLineWidth(context, 3.0);//畫筆的粗細
CGContextAddArc(context, 130, 30, 15, 0, 2 * M_PI, 0);//添加一個圓
CGContextDrawPath(context, kCGPathFillStroke);//繪制路徑并填充
太極圖
CGContextAddArc(context, 190, 30, 15, M_PI_2, 1.5 * M_PI, 0);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextFillPath(context);
CGContextStrokePath(context);
CGContextAddArc(context, 190, 30, 15, M_PI_2, 1.5 * M_PI, 1);
CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
CGContextFillPath(context);
CGContextStrokePath(context);
CGContextAddArc(context, 190, 22.5, 7.5, M_PI_2, 1.5 * M_PI, 0);
CGContextFillPath(context);
CGContextStrokePath(context);
CGContextAddArc(context, 190, 37.5, 7.5, M_PI_2, 1.5 * M_PI, 1);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextFillPath(context);
CGContextStrokePath(context);
CGContextAddArc(context, 190, 22.5, 3.75, M_PI_2, 2.5 * M_PI, 0);
CGContextFillPath(context);
CGContextStrokePath(context);
CGContextAddArc(context, 190, 37.5, 3.75, M_PI_2, 2.5 * M_PI, 0);
CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
CGContextFillPath(context);
CGContextStrokePath(context);
直線
CGPoint linePoint[2] = {CGPointMake(100, 70),CGPointMake(150, 70)};
CGContextAddLines(context, linePoint, sizeof(linePoint)/sizeof(CGPoint));//添加線
CGContextDrawPath(context, kCGPathStroke);
笑臉
CGContextMoveToPoint(context, 185, 60);//起始坐標
CGContextAddArcToPoint(context, 200, 40, 210, 60, 14);//x1,y1與起始坐標形成一條直線，x1,y1與x2,y2又形成一條直線，這兩條直線確定弧線的形狀，radius是半徑
CGContextStrokePath(context);//繪制路徑
CGContextMoveToPoint(context, 225, 60);//起始坐標
CGContextAddArcToPoint(context, 240, 40, 250, 60, 14);//
CGContextStrokePath(context);//繪制路徑
CGContextMoveToPoint(context, 197.5, 75);//起始坐標
CGContextAddArcToPoint(context, 222, 95, 237.5, 75, 25);//
CGContextStrokePath(context);//繪制路徑
矩形
CGContextSetFillColorWithColor(context, [UIColor cyanColor].CGColor);//設置填充顏色
CGContextAddRect(context, CGRectMake(60, 95, 50, 25));//畫方框
CGContextDrawPath(context, kCGPathFillStroke);//繪制路徑
//填充1:
CAGradientLayer * gradientRectangle = [CAGradientLayer layer];
gradientRectangle.frame = CGRectMake(130, 95, 50, 25);
gradientRectangle.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor orangeColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor cyanColor].CGColor,(id)[UIColor blueColor].CGColor,(id)[UIColor purpleColor].CGColor];
[self.layer insertSublayer:gradientRectangle atIndex:0];
//填充2:
//創(chuàng)建填充顏色
CGColorSpaceRef rgbColor = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] ={1,1,1, 1.00,
1,1,0, 1.00,
1,0,0, 1.00,
1,0,1, 1.00,
0,1,1, 1.00,
0,1,0, 1.00,
0,0,1, 1.00,
0,0,0, 1.00,};
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgbColor, colors, NULL,sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(rgbColor);
CGContextSaveGState(context);//記錄當前的狀態(tài)
CGContextMoveToPoint(context, 200, 95);//起始點
CGContextAddLineToPoint(context, 220, 95);//與起始點形成一條線
CGContextAddLineToPoint(context, 220, 120);//與上一個點形成一條線
CGContextAddLineToPoint(context, 200, 120);//與上一個點形成一條線
CGContextClip(context);//裁剪路徑
CGContextDrawLinearGradient(context, gradient, CGPointMake(200, 95), CGPointMake(220, 120), kCGGradientDrawsAfterEndLocation);//gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結束坐標,options開始坐標之前or開始之后開始漸變
CGContextRestoreGState(context);//恢復到之前的context
//矩形填充
CGContextSaveGState(context);
CGContextMoveToPoint(context, 240, 95);
CGContextAddLineToPoint(context, 270, 95);
CGContextAddLineToPoint(context, 270, 120);
CGContextAddLineToPoint(context, 240, 120);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, CGPointMake(240, 95), CGPointMake(240, 120), kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);
//圓
CGContextDrawRadialGradient(context, gradient, CGPointMake(240, 30), 0, CGPointMake(240, 30), 15, kCGGradientDrawsBeforeStartLocation);
扇形
CGContextSetFillColorWithColor(context, [UIColor cyanColor].CGColor);
//以30為半徑圍繞圓心畫指定角度扇形
CGContextMoveToPoint(context, 130, 170);
CGContextAddArc(context, 130, 170, 30, -0.8*M_PI_4, -3.2*M_PI_4, 1);
CGContextClosePath(context);//關閉路徑
CGContextDrawPath(context, kCGPathFillStroke);
橢圓
CGContextAddEllipseInRect(context, CGRectMake(180, 145, 40, 20));
CGContextDrawPath(context, kCGPathFillStroke);
六芒星
CGPoint trianglePoint1[] = {CGPointMake(220, 220),CGPointMake(310, 220),CGPointMake(265, 220 - 45 * sqrtf(3.0))};
CGContextAddLines(context, trianglePoint1, sizeof(trianglePoint1)/sizeof(CGPoint));
CGContextClosePath(context);//關閉路徑
CGContextDrawPath(context, kCGPathStroke);
CGPoint trianglePoint2[] = {CGPointMake(220, 220 - 30 * sqrtf(3.0)),CGPointMake(310, 220 - 30 * sqrtf(3.0)),CGPointMake(265, 220 + 15 * sqrtf(3.0))};
CGContextAddLines(context, trianglePoint2, sizeof(trianglePoint2)/sizeof(CGPoint));
CGContextClosePath(context);//關閉路徑
CGContextDrawPath(context, kCGPathStroke);
圓角矩形
CGFloat width = 160;
CGFloat height = 260;
CGContextMoveToPoint(context, width, height - 20);//從坐標右邊開始
CGContextAddArcToPoint(context, width, height, width - 20, height, 10);//右下角角度
CGContextAddArcToPoint(context, 100, height, 100, height - 20, 10);//左下角度數(shù)
CGContextAddArcToPoint(context, 100, 230, width - 20, 230, 10);//左上角
CGContextAddArcToPoint(context, width, 230, width, height - 20, 10);//右上角
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
曲線
//二次曲線
CGContextMoveToPoint(context, 120, 300);
CGContextAddQuadCurveToPoint(context, 160, 300 - 40 * sqrtf(3.0), 200, 300);//控制點坐標和終點坐標
CGContextAddQuadCurveToPoint(context, 240, 300 + 40 * sqrtf(3.0), 280, 300);
CGContextStrokePath(context);
//三次曲線
CGContextSetRGBStrokeColor(context, 0, 1, 0, 1);
CGContextMoveToPoint(context, 120, 300);
CGContextAddCurveToPoint(context, 160, 300 - 40 * sqrtf(3.0), 240, 300 + 40 *sqrtf(3.0), 280, 300);
CGContextStrokePath(context);
然后搞個畫板大家可以自己畫著玩
畫板
畫板分為三步：
1.開始畫曲線
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
_path = [UIBezierPath bezierPath];
UITouch * myTouch = [touches anyObject];
CGPoint point = [myTouch locationInView:self];
[_path moveToPoint:point];
NSDictionary * tempDict = @{@"color":[UIColor blueColor],
@"line":_path};
[_lineArr addObject:tempDict];
_undoBtn.enabled = YES;
}
2.畫完一筆
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
UITouch * myTouch = [touches anyObject];
CGPoint point = [myTouch locationInView:self];
[_path addLineToPoint:point];
[self setNeedsDisplay];
}
3.顯示出來
- (void)drawRect:(CGRect)rect
{
for (int i = 0 ; i < _lineArr.count; i++) {
NSDictionary * tempDict = _lineArr[i];
UIColor * color = tempDict[@"color"];
UIBezierPath * line = tempDict[@"line"];
[color setStroke];
[line setLineWidth:2.0];
[line stroke];
}
}
我還增加了撤消和取消撤消功能：
- 撤消
NSInteger index = self.lineArr.count - 1;
[self.cancelArr addObject:self.lineArr[index]];
[self.lineArr removeObjectAtIndex:index];
[self setNeedsDisplay];
_undoBtn.enabled = self.lineArr.count > 0 ? YES : NO;
_cancelBtn.enabled = self.cancelArr.count > 0 ? YES : NO;
return index;
- 取消撤消
NSInteger index = self.cancelArr.count - 1;
[self.lineArr addObject:self.cancelArr[index]];
[self.cancelArr removeObjectAtIndex:index];
[self setNeedsDisplay];
_undoBtn.enabled = self.lineArr.count > 0 ? YES : NO;
_cancelBtn.enabled = self.cancelArr.count > 0 ? YES : NO;
return index;
大家還可以修改顏色和線條粗細，并且還可以根據(jù)我所寫的《讓所有的開發(fā)者都能使用3D Touch》中的測算點擊力度功能來實現(xiàn)線條的粗細，我在這里就不寫了。關于文中的內(nèi)容，具體的可以參見Demo來理解,因為比較簡單，我就不分文件，寫到一個文件里了，歡迎大家Star.
