iOS 2D 画图和 UIBezierPath

屏幕快照 2016-01-15 下午4.37.04.png

＊＊＊＊注意一点是set 和setFill的区别

-(void)drawRect:(CGRect)rect{
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor setFill];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    //setting the starting point of shape
    [path moveToPoint:CGPointMake(100+30, 100+0)];
    
    //draw the lines
    [path addLineToPoint:CGPointMake(200+30, 100+40.0)];
    [path addLineToPoint:CGPointMake(160.0+30, 100+140.0)];
    [path addLineToPoint:CGPointMake(40.0+30, 100+140.0)];
    [path addLineToPoint:CGPointMake(0.0+30, 100+40.0)];
    [path closePath];
    [path fill];
 }

屏幕快照 2016-01-15 下午5.27.25.png

-(void)drawRect:(CGRect)rect{
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor set];

    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth =  5;
    path.lineJoinStyle = kCGLineCapRound;
    path.lineCapStyle = kCGLineCapRound;

    [path moveToPoint:CGPointMake(100, 20)];
    
    [path addLineToPoint:CGPointMake(200+30, 100+40.0)];
    [path addLineToPoint:CGPointMake(160.0+30, 100+140.0)];
    [path addLineToPoint:CGPointMake(40.0+30, 100+140.0)];
    [path addLineToPoint:CGPointMake(0.0+30, 100+40.0)];
    [path addLineToPoint:CGPointMake(100, 20)];
    [path stroke];
}

屏幕快照 2016-01-15 下午4.51.23.png

周长= 2πradius

define   DEGREES_TO_RADIANS(degrees)  (M_PI * degrees/ 180)
-(void)drawRect:(CGRect)rect{
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,100) radius:100 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
    [path closePath];
    [path fill];//填充区域
}

屏幕快照 2016-01-15 下午5.12.40.png

-(void)drawRect:(CGRect)rect{
  
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,100) radius:100 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
    path.lineWidth = 5;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound;
    [path stroke];
}

Adding Curves to Your Path//添加曲线

//由控制点和控制点的切线点决定

curve_segments_2x.png

屏幕快照 2016-01-15 下午5.17.39.png

-(void)drawRect:(CGRect)rect{
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor set];

    //绘制二次贝赛尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound;
    //setting start point
    [path moveToPoint:CGPointMake(20, 100)];
    //setting end point                              control point(中间控制点)
    [path addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 300)];
    
    [path stroke];
    
}

屏幕快照 2016-01-15 下午5.29.06.png

-(void)drawRect:(CGRect)rect{
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor set];
    
    //绘制二次贝赛尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound;
    //setting start point
    [path moveToPoint:CGPointMake(20, 100)];
    //setting end point                              control point(中间控制点)
    [path addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 300)];
    
    [path stroke];
    [path fill];
}

屏幕快照 2016-01-15 下午5.33.07.png

-(void)drawRect:(CGRect)rect{

    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //绘制3次贝赛尔曲线
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    path.lineWidth = 5;
    path.lineJoinStyle = kCGLineCapRound;
    path.lineCapStyle = kCGLineCapRound;
    
    [path moveToPoint:CGPointMake(20, 50)];
    
    [path addCurveToPoint:CGPointMake(300, 50) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(200, 400)];
    
    [path stroke];
    
}

屏幕快照 2016-01-15 下午5.34.42.png

-(void)drawRect:(CGRect)rect{

    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //绘制3次贝赛尔曲线
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    path.lineWidth = 5;
    path.lineJoinStyle = kCGLineCapRound;
    path.lineCapStyle = kCGLineCapRound;
    
    [path moveToPoint:CGPointMake(20, 50)];
    
    [path addCurveToPoint:CGPointMake(300, 50) controlPoint1:CGPointMake(130, 0) controlPoint2:CGPointMake(200, 400)];

    [path stroke];
    [path fill];
}

Modifying the Path Using Core Graphics Functions-->使用core graphic 来修改

屏幕快照 2016-01-15 下午5.54.38.png

-(void)drawRect:(CGRect)rect{

    //根据坐标画出一个内切圆
    UIBezierPath *PATH  = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 200)];
    [[UIColor blackColor]setStroke];
    [[UIColor orangeColor] setFill];
    
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 在视图中的坐标
    CGContextTranslateCTM(ref,100, 100);
    PATH.lineWidth = 5;
    [PATH fill];
    [PATH stroke];    
}

//根据一个矩形画曲线

(UIBezierPath *)bezierPathWithRect:(CGRect)rect

//根据矩形框的内切圆画曲线

(UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect

//根据矩形画带圆角的曲线

(UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius

//在矩形中，可以针对四角中的某个角加圆角

(UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

屏幕快照 2016-01-15 下午5.59.20.png

    UIBezierPath *PATH  = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 200)byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 10)];

-----------CoreGraphics--------------------

屏幕快照 2016-01-19 上午10.07.06.png

-(void)drawRect:(CGRect)rect{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectOne = CGRectMake(10, 10, 200, 300);
    CGRect rectTwo = CGRectMake(40, 100, 90, 300);
    CGRect rects[2] = {rectOne,rectTwo};
//    CGPathAddRect(path, NULL, rectOne); 一个矩形 下面是两个矩形的情况
    CGPathAddRects(path, NULL, (const CGRect *)&rects, 2);
    
    CGContextRef current = UIGraphicsGetCurrentContext();
    CGContextAddPath(current, path);
    [[UIColor orangeColor]setFill];
    [[UIColor purpleColor]setStroke];
    CGContextSetLineWidth(current, 5);
    CGContextDrawPath(current, kCGPathFillStroke);    
    CGPathRelease(path);
}

屏幕快照 2016-01-19 上午10.20.52.png

-(void)drawRect:(CGRect)rect{
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
    
    CGContextAddPath(currentRef, path);
    [[UIColor orangeColor]setFill];
    
    CGContextDrawPath(currentRef, kCGPathFill);
    CGPathRelease(path);
}

屏幕快照 2016-01-19 上午10.28.49.png

-(void)drawAtTop{
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
    
    CGContextAddPath(currentRef, path);
    [[UIColor orangeColor]setFill];
    
    CGContextDrawPath(currentRef, kCGPathFill);
    CGPathRelease(path);
}

-(void)drawAtBottom{
    //不特意加阴影也会出现阴影效果
    CGContextRef current = UIGraphicsGetCurrentContext();
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(150, 250, 100, 100));
    
    CGContextAddPath(current, path);
    [[UIColor purpleColor]setFill];
    
    CGContextDrawPath(current, kCGPathFill);
    
    CGPathRelease(path);
    
    
}

由于上述原因所以我们可以使用CGContextSaveGState来保存图形上下文状态，可以通过CGContextRestoreGState来恢复到以前的状态。

屏幕快照 2016-01-19 上午10.33.23.png

-(void)drawAtTop{
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    //保存状态
    CGContextSaveGState(currentRef);
    
    CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
    
    CGContextAddPath(currentRef, path);
    [[UIColor orangeColor]setFill];
    
    CGContextDrawPath(currentRef, kCGPathFill);
    CGPathRelease(path);
    //恢复到以前的状态
    CGContextRestoreGState(currentRef);
}

-(void)drawAtBottom{
    //由于上述方法已经添加保存和修复状态所以这个就没有阴影效果
    CGContextRef current = UIGraphicsGetCurrentContext();
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(150, 250, 100, 100));
    
    CGContextAddPath(current, path);
    [[UIColor purpleColor]setFill];
    
    CGContextDrawPath(current, kCGPathFill);
    
    CGPathRelease(path);
    
    
}

创建和渐变

屏幕快照 2016-01-19 上午10.55.54.png

-(void)drawRect:(CGRect)rect{
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    
    CGContextSaveGState(currentRef);
    
    //色彩空间对象
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    UIColor *startColor = [UIColor orangeColor];
    UIColor *endColor = [UIColor purpleColor];
    
    //CGColorGetComponents 返回一个包含各元素的数组
    CGFloat *startColorComponents = (CGFloat *)CGColorGetComponents(startColor.CGColor);
    CGFloat *endColorComponents = (CGFloat *)CGColorGetComponents(endColor.CGColor);
    
    //元素数组
    CGFloat colorComponents[8] = {
                startColorComponents[0],
                startColorComponents[1],
                startColorComponents[2],
                startColorComponents[3],
                endColorComponents[0],
                endColorComponents[1],
                endColorComponents[2],
                endColorComponents[3]
    };
    
    CGFloat colorIndices[2] = {0.0f,1.0f};
    
    //返回CGGradientRef 一个对象  gradient(梯度)
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace,(const CGFloat *)&colorComponents, (const CGFloat *)&colorIndices, 2);
    
    //改变渐变的图形只需要改变开始和结束的坐标点
    CGPoint startPoint = CGPointMake(0, [[UIScreen mainScreen] bounds].size.height/2);
    CGPoint endPoint = CGPointMake([[UIScreen mainScreen] bounds].size.width,startPoint.y);
    
    //画线 一个context 梯度 开始结束坐标，
    CGContextDrawLinearGradient(currentRef, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation|kCGGradientDrawsAfterEndLocation);
    
    
    //释放渐变对象
    CGGradientRelease(gradient);
    
    CGContextRestoreGState(currentRef);
    
}

平移图形

屏幕快照 2016-01-19 上午11.33.03.png

-(void)drawRect:(CGRect)rect{
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rectAngle = CGRectMake(10, 10, 200, 200);
    
    CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 0);
    //主要是传入一个transform  从10 10 到100 0
    CGPathAddRect(path, &transform, rectAngle);

    
    CGContextRef currentRef = UIGraphicsGetCurrentContext();
    
    CGContextAddPath(currentRef, path);
    
    [[UIColor orangeColor]setFill];
    
    [[UIColor purpleColor]setStroke];
    
    CGContextSetLineWidth(currentRef, 5);
    
    CGContextDrawPath(currentRef, kCGPathFillStroke);
    
    CGPathRelease(path);
    
}

CGContextTranslateCTM 利用这个方法一样可以达到上次的效果

-(void)drawRect:(CGRect)rect{
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rectAngle = CGRectMake(10, 10, 200, 200);
    
    CGPathAddRect(path, NULL, rectAngle);

    
    CGContextRef currentRef = UIGraphicsGetCurrentContext();

    //CGContextTranslateCTM  利用这个方法一样可以达到上次的效果
    CGContextTranslateCTM(currentRef, 100, 0);

    CGContextAddPath(currentRef, path);
    
    [[UIColor orangeColor]setFill];
    
    [[UIColor purpleColor]setStroke];
    
    CGContextSetLineWidth(currentRef, 5);
    
    CGContextDrawPath(currentRef, kCGPathFillStroke);
    
    CGPathRelease(path);
    
}

缩放由200 到100

屏幕快照 2016-01-19 上午11.40.26.png

-(void)drawRect:(CGRect)rect{
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rectAngle = CGRectMake(100, 100, 200, 200);
    
    //缩放
    CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
    
    CGPathAddRect(path, &transform, rectAngle);

    
    CGContextRef currentRef = UIGraphicsGetCurrentContext();

//    //CGContextTranslateCTM  利用这个方法一样可以达到上次的效果
//    CGContextTranslateCTM(currentRef, 100, 0);

    CGContextAddPath(currentRef, path);
    
    [[UIColor orangeColor]setFill];
    
    [[UIColor purpleColor]setStroke];
    
    CGContextSetLineWidth(currentRef, 5);
    
    CGContextDrawPath(currentRef, kCGPathFillStroke);
    
    CGPathRelease(path);
    
}

-(void)drawRect:(CGRect)rect{
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rectAngle = CGRectMake(100, 100, 200, 200);
    
    //缩放
    CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
    
    CGPathAddRect(path, &transform, rectAngle);

    
    CGContextRef currentRef = UIGraphicsGetCurrentContext();

//    //CGContextTranslateCTM  利用这个方法一样可以达到上次的效果
//    CGContextTranslateCTM(currentRef, 100, 0);

    CGContextAddPath(currentRef, path);
    
    [[UIColor orangeColor]setFill];
    
    [[UIColor purpleColor]setStroke];
    
    CGContextSetLineWidth(currentRef, 5);
    
    CGContextDrawPath(currentRef, kCGPathFillStroke);
    
    CGPathRelease(path);
    
}

旋转

![Uploading 屏幕快照 2016-01-19 上午11.47.36_529253.png . . .]

-(void)drawRect:(CGRect)rect{
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rectAngle = CGRectMake(100, 100, 200, 200);

    CGAffineTransform transform = CGAffineTransformMakeRotation((45*M_PI)/180.0f);
    
    
    CGPathAddRect(path, &transform, rectAngle);
    
    CGContextRef currentRef = UIGraphicsGetCurrentContext();

    //CGContextTranslateCTM  利用这个方法一样可以达到上次的效果
    CGContextScaleCTM(currentRef, 0.5, 0.5);

    CGContextAddPath(currentRef, path);
    
    [[UIColor orangeColor]setFill];
    
    [[UIColor purpleColor]setStroke];
    
    CGContextSetLineWidth(currentRef, 5);
    
    CGContextDrawPath(currentRef, kCGPathFillStroke);
    
    CGPathRelease(path);
    
}

一样可以实现

    CGContextRotateCTM(currentRef, 30*M_PI / 180.f);

动画和移动视图

UIKit_Animation.gif

    [UIView beginAnimations:@"ImageViewAnimation" context:(__bridge void * _Nullable)(_imageView)];
    
    [UIView setAnimationDuration:5];
    [UIView setAnimationDelegate:self];
    
    [UIView setAnimationDidStopSelector:@selector(imageViewStop:finished:context:)];
    _imageView.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width -100, [[UIScreen mainScreen] bounds].size.height - 100, 100, 100);
    
    [UIView commitAnimations];

-(void)imageViewStop:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{
    NSLog(@"animation finished");
    
    NSLog(@"animations__ID___%@",paramAnimationID);
    
    UIImageView *contextImageView = (__bridge UIImageView *)paramContext;
    NSLog(@"imageView————%@",contextImageView);
    
}

输出
**2016-01-19 16:17:58.881 LoginTest[5362:1296744] animation finished**
**2016-01-19 16:17:58.881 LoginTest[5362:1296744] animations__ID___ImageViewAnimation**
**2016-01-19 16:17:58.882 LoginTest[5362:1296744] imageView————<UIImageView: 0x7fa2134a82c0; frame = (314 636; 100 100); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fa21371b000>>**

缩放

UIKit_Animation_Scale.gif

    _imageView.center = self.view.center;
    
    _imageView.transform = CGAffineTransformIdentity;
    
    [UIView beginAnimations:NULL context:NULL];
    [UIView setAnimationDuration:5];
    _imageView.transform = CGAffineTransformMakeScale(0.5, 0.5);
    [UIView commitAnimations];

旋转

UIKit_Animation_Rotation.gif

   _imageView.center = self.view.center;
    
    _imageView.transform = CGAffineTransformIdentity;
    
    [UIView beginAnimations:NULL context:NULL];
    [UIView setAnimationDuration:2];
    _imageView.transform = CGAffineTransformMakeRotation((45*M_PI)/180);
    [UIView commitAnimations];

最后编辑于：2017.11.27 05:49:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,198评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,663评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,985评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,673评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,994评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,399评论 1赞 211
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,717评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,407评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,112评论 1赞 239
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,371评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,891评论 1赞 256
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,255评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,881评论 3赞 233
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,010评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,764评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,412评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,299评论 2赞 260

iOS 2D 画图 和 UIBezierPath