iOS-绘图-六虎

1、Quartz 2D绘图

Quartz 2D绘图要先获得GC(Graphics Context)，且坐标系与UIKit不同原点在 左下角，写在view的drawRect办法中

- (void)drawRect:(CGRect)rect {
  // 去的绘图区域,并保存现有绘图区域状态
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSaveGState(context);
 
  // 设置绘图区域坐标,将(0, 0)改为左下角
  CGAffineTransform t = CGContextGetCTM(context);
  t = CGAffineTransformInvert(t);
  CGContextConcatCTM(context, t);
 
  // 设置线条属性
  CGContextSetLineWidth(context, 15);
  CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);
  CGContextSetRGBFillColor(context, 0.6, 1, 1, 1);
 
  // 移动画笔到某坐标
  CGContextMoveToPoint(context, 10, 100);
  // 从画笔位置画线到目标位置
  CGContextAddLineToPoint(context, 200, 100);
  // 将线画到屏幕上
  CGContextDrawPath(context, kCGPathStroke);
 
  // 画虚线
  CGFloat dashes[] = {10, 10};
  CGContextSetLineDash(context, 5, dashes, sizeof(dashes) / sizeof(CGFloat));
  CGContextMoveToPoint(context, 10, 150);
  CGContextAddLineToPoint(context, 200, 150);
  CGContextDrawPath(context, kCGPathStroke);
 
  // 画不规则虚线
  CGFloat dashes2[] = {20,5,30,10};
  CGContextSetLineDash(context, 10, dashes2, sizeof(dashes2) /sizeof(CGFloat));
  CGContextMoveToPoint(context, 10, 200);
  CGContextAddLineToPoint(context, 200, 200);
  CGContextDrawPath(context, kCGPathStroke);
  // 画多边形(主动补全关闭路径)
  CGContextBeginPath(context);
  CGContextMoveToPoint(context, 330, 330);
  CGContextAddLineToPoint(context, 500, 730);
  CGContextAddLineToPoint(context, 30, 400);
  CGContextClosePath(context);
  CGContextDrawPath(context, kCGPathFillStroke);
 
  // 制作矩形
  CGContextAddRect(context, CGRectMake(700, 700, 100, 100));
  CGContextDrawPath(context, kCGPathFill);
 
  CGContextSetRGBFillColor(context, 0, 1, 0, 0.4);
  CGContextAddRect(context, CGRectMake(750, 750, 200, 200));
  CGContextDrawPath(context, kCGPathFill);
  // 制作弧线(圆心x坐标、y坐标、半径、起始弧度:视点 *  / 180、停止弧度、制作方向:0逆时针)
  // 0:右、 90:上、 180:左、 270:下
  CGContextAddArc(context, 300, 1000, 100, 0, 90*M_PI/180, 0);
  CGContextAddArc(context, 300, 1300, 100, 270*M_PI/180, 90*M_PI/180, 1);
  CGContextDrawPath(context, kCGPathStroke);
 
  // 制作椭圆(矩形区域内接圆)
  CGContextAddEllipseInRect(context, CGRectMake(10, 800, 300, 100));
  CGContextDrawPath(context, kCGPathFill);
 
  // 制作曲线
  // 三次贝兹曲线
  CGContextMoveToPoint(context, 100, 1600);
  CGContextAddCurveToPoint(context, 150, 1700, -250, 1800, 300, 1000);
  CGContextDrawPath(context, kCGPathStroke);
  // 二次贝兹曲线
  CGContextMoveToPoint(context, 200, 300);
  CGContextAddQuadCurveToPoint(context, -100, 300, 100, 200);
  CGContextDrawPath(context, kCGPathStroke);
  // 绘图区域显现图片
  CGImageRef image = [UIImage imageNamed:@"yasuo.png"].CGImage;
  // 在坐标内显现图片
  CGContextDrawImage(context, CGRectMake(30, 2000, 240, 180), image);
  // 提取图片部分内容显现
  CGRect subRect = CGRectMake(1000, 150, 240, 180);
  CGImageRef subImage = CGImageCreateWithImageInRect(image, subRect);
  CGContextDrawImage(context, CGRectMake(30, 250, 240, 180), subImage);
  // 还原绘图区域状态
  CGContextRestoreGState(context);
}

2、贝塞尔曲线

UIBezierPath 根本运用办法

UIBezierPath目标是CGPathRef数据类型的封装。path假如是基于矢量形状的，都用直线或曲线去创立。咱们一般运用UIBezierPath都是在重写view的drawRect办法这种景象。咱们用直线去创立矩形或多边形，运用曲线创立弧或许圆。创立和运用path目标步骤：

重写View的drawRect办法
创立UIBezierPath的目标
运用办法moveToPoint: 设置初始点
依据具体要求运用UIBezierPath类办法绘图（比方要画线、矩形、圆、弧？等）
设置UIBezierPath目标相关属性（比方lineWidth、lineJoinStyle、aPath.lineCapStyle、color）
运用stroke 或许 fill办法完毕绘图

比方咱们想要画一条线demo：

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条色彩
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(200, 80)];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //线条角落
    path.lineJoinStyle = kCGLineJoinRound; //结尾处理
    [path stroke];
}

其他根本运用办法

在介绍其他运用办法之前，咱们先来看一下 path的几个属性，以便下面我进行设置。

[color set];设置线条色彩，也便是相当于画笔色彩
path.lineWidth = 5.0;这个很好理解了，便是划线的宽度
path.lineCapStyle这个线段起点是结尾的款式，这个款式有三种：
- kCGLineCapButt该属性值指定不制作端点，线条结尾处直接完毕。这是默认值。
- kCGLineCapRound 该属性值指定制作圆形端点，线条结尾处制作一个直径为线条宽度的半圆。
- kCGLineCapSquare 该属性值指定制作方形端点。线条结尾处制作半个边长为线条宽度的正方形。需求说明的是，这种形状的端点与“butt”形状的端点十分类似，仅仅选用这种形式的端点的线条略长一点而已
path.lineJoinStyle这个属性是用来设置两条线连结点的款式，相同它也有三种款式供咱们选择
- kCGLineJoinMiter 斜接
- kCGLineJoinRound 油滑衔接
- kCGLineJoinBevel 斜角连接
[path stroke];用 stroke 得到的是不被填充的 view ，[path fill]; 用 fill 得到的内部被填充的 view，这点在下面的代码还有制作得到的图片中有，能够体会一下这两者的不同

制作多边形

制作多边形，实际上便是又一些直线条连成，主要运用moveToPoint: 和addLineToPoint:办法去创立，moveToPoint:这个办法是设置起始点，意味着从这个点开端，咱们就能够运用addLineToPoint:去设置咱们想要创立的多边形经过的点，也便是两线相交的那个点，用` addLineToPoint:去创立一个形状的线段，咱们能够连续创立line，每一个line的起点都是从前的结尾，结尾便是指定的点，将线段连接起来便是咱们想要创立的多边形了

#import "DrawPolygonView.h"
@implementation DrawPolygonView
- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条色彩
    UIBezierPath* path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //线条角落
    path.lineJoinStyle = kCGLineJoinRound; //结尾处理
    [path moveToPoint:CGPointMake(200.0, 50.0)];//起点
    // Draw the lines
    [path addLineToPoint:CGPointMake(300.0, 100.0)];
    [path addLineToPoint:CGPointMake(260, 200)];
    [path addLineToPoint:CGPointMake(100.0, 200)];
    [path addLineToPoint:CGPointMake(100, 70.0)];
    [path closePath];//第五条线经过调用closePath办法得到的
    //    [path stroke];//Draws line 依据坐标点连线
    [path fill];//色彩填充
}

在这儿咱们能够看到最终第五条线是用[path closePath];得到的，closePath办法不仅完毕一个shape的subpath表述，它也在最终一个点和第一个点之间画一条线段，这个一个便当的办法咱们不需求去画最终一条线了，哈哈哈哈。这儿咱们用到的是[path fill];//色彩填充进行坐标连点，但是咱们看见的是五边形内部被色彩填充了，假如咱们运用[path stroke];那咱们得到的便是一个用线画的五边形

画矩形或许正方形

咱们都知道正方形便是特别的矩形咯，不多讲。只说矩形
运用+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect这个办法，设置好坐标 frame 就好了，就像咱们创立 view 相同，好理解

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条色彩
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //线条角落
    path.lineJoinStyle = kCGLineJoinRound; //结尾处理
    [path stroke];
}

创立圆形或许椭圆形

运用+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect这个办法创立圆形或许椭圆形传入的rect矩形参数制作一个内切曲线，假如咱们传入的rect是矩形就得到矩形的内切椭圆，假如传入的是正方形得到的便是正方形的内切圆

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:0 endAngle:TO_RADIAUS(120) clockwise:YES];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];
}

创立一段弧线

运用+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwis这个办法创立一段弧线，介绍一下这个办法中的参数：

ArcCenter: 原点
radius: 半径
startAngle: 开端视点
endAngle: 完毕视点
clockwise: 是否顺时针方向

弧线的参考系：

制作二次贝塞尔曲线

运用- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint这个办法制作二次贝塞尔曲线。曲线段在当时点开端，在指定的点完毕，
一个控制点的切线定义。下图显现了两种曲线类型的类似，以及控制点和curve形状的联系:

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    /*
     - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
     Parameters
     endPoint
     The end point of the curve.
     controlPoint
     The control point of the curve.
     */
    [path moveToPoint:CGPointMake(40, 150)];
    [path addQuadCurveToPoint:CGPointMake(140, 200) controlPoint:CGPointMake(20, 40)];
    [path stroke];
}

制作三次贝塞尔曲线

运用这个办法制作三次贝塞尔曲线

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
Parameters

这个办法制作三次贝塞尔曲线。曲线段在当时点开端，在指定的点完毕，两个控制点的切线定义。下图显现了两种曲线类型的类似，以及控制点和curve形状的联系:

- (void)drawRect:(CGRect)rect {
    /*
     - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
     Parameters
     endPoint
     The end point of the curve.
     controlPoint1
     The first control point to use when computing the curve.
     controlPoint2
     The second control point to use when computing the curve.
     */
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    [path moveToPoint:CGPointMake(20, 200)];
    [path addCurveToPoint:CGPointMake(260, 200) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];
    [path stroke];
}

画带圆角的矩形

运用+ (instancetype)bezierPathWithRect:(CGRect)rect;这个办法制作，这个办法和bezierPathWithRect:类似，制作一个带内切圆的矩形

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条色彩
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //线条角落
    path.lineJoinStyle = kCGLineJoinRound; //结尾处理
    [path stroke];
}

指定矩形的某个角为圆角

运用+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;这个办法制作。参数的意思：rect 制作矩形的 frame，corners指定使哪个角为圆角，圆角类型为：

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
}; 用来指定需求设置的角。cornerRadii 圆角的半径

- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5.0;
    [path stroke];
}

贝塞尔曲线更多用法

转自：贝塞尔曲线常用办法

iOS-绘图

1、Quartz 2D绘图

2、贝塞尔曲线

UIBezierPath 根本运用办法

其他根本运用办法

制作多边形

画矩形或许正方形

创立圆形或许椭圆形

创立一段弧线

制作二次贝塞尔曲线

制作三次贝塞尔曲线

画带圆角的矩形

指定矩形的某个角为圆角

作者信息

推广

iOS-绘图

1、Quartz 2D绘图

2、贝塞尔曲线

UIBezierPath 根本运用办法

其他根本运用办法

制作多边形

画矩形或许正方形

创立圆形或许椭圆形

创立一段弧线

制作二次贝塞尔曲线

制作三次贝塞尔曲线

画带圆角的矩形

指定矩形的某个角为圆角

相关文章

硬件加速浅谈

人身攻击与引战类评论的社区治理

反卷 AI，前端突围 – GPT Meetup 上海

全民GPT4即将到来，OpenAi大升级 加量不加价！！

作者信息

推广

全民GPT4即将到来，OpenAi大升级加量不加价！！