iOS 2D 畫圖和 UIBezierPath

weixin_34124651發表於2016-05-25

螢幕快照 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];

放肆的使用 UIBezierPath 和 CAShapeLayer 畫各種圖形
2016-12-31
UI
使用CAShapeLayer與UIBezierPath畫出想要的圖形
2016-06-02
UI
iOS UIBezierPath 貝塞爾曲線
2016-04-14
iOSUI
iOS開發-UI高階 Quartz 2D繪圖
2016-08-09
iOSUIquartz繪圖
iOS UIBezierPath貝塞爾曲線常用方法
2016-11-11
iOSUI
UIBezierPath
2017-07-11
UI
［分享］iOS開發－CGContextRef畫圖小結
2016-03-02
iOSGCContext
UML畫圖工具-Graphviz和PlantUML
2018-10-10
python畫散點圖和折線圖
2017-08-31
Python
iOS開發之畫圖板(貝塞爾曲線)
2015-12-16
iOS
canvas學習筆記-2d畫布基礎
2019-02-16
Canvas筆記
折半查詢排序樹畫圖和
2021-11-28
排序
UIBezierPath+CAShapeLayer繪製微信聊天圖片效果
2019-01-17
UI
CAGradientLayer + UIBezierPath 為檢視畫漸變背景色並帶有弧度
2018-09-09
UI
[Unity3D] 2D畫素遊戲（一） Hello Unity！
2018-08-22
Unity3D遊戲
UIBezierPath 和各種 layer 把我玩壞了
2016-11-23
UI
『ios』view和tableview的截圖和圖片拼接
2018-09-25
iOSView
C 語言畫圖之畫個太極圖
2016-12-19
iOS動畫系列之八：使用CAShapeLayer繪畫動態流量圖
2017-11-07
iOS動畫
UIBezierPath貝塞爾曲線
2017-06-07
UI
轉載:UIBezierPath精講
2016-05-13
UI
UIBezierPath的使用方法
2015-11-16
UI
使用SAPGUI畫圖
2018-11-27
GUI
純CSS畫圖
2012-10-29
CSS
c#畫圖(橢圓和弧線)Craphics類
2015-01-26
C#
蘋果新專利：iOS正研發虛擬標尺畫圖功能
2016-12-14
蘋果iOS
iOS-圖片水印,圖片裁剪和螢幕截圖
2016-09-23
iOS
LightningChart -XY 2D圖表特性
2020-12-16
GC
Android 和 iOS 圖片輪播
2019-02-26
AndroidiOS
箱形圖（python畫圖）
2021-01-01
Python
靈魂畫手：漫畫圖解 SSH
2021-09-09
圖解
CAShaperLayer&UIBezierPath系列（一）
2019-03-15
UI
CAShaperLayer&UIBezierPath系列（二）
2019-03-16
UI
在2D引擎圖底層進行圖形模組分析(轉)
2007-08-12
CAD夢想畫圖如何進行重畫、繪圖模式
2021-06-18
繪圖模式
Artstudio Pro for Mac(繪畫和圖片編輯工具)
2022-11-11
Mac
iOS啟動圖和開屏廣告圖，類似網易
2016-09-09
iOS
一圖告訴你 iOS 6 和 iOS 7 的區別
2013-09-16
iOS

iOS 2D 畫圖 和 UIBezierPath