UIBezierPath绘制基本图形
程序员文章站
2022-03-31 14:52:26
...
说到绘图, 就想到UIView中的一个方法: drawRect方法, 那么简单介绍一下它的作用:
1. 可以将图形绘制到, view上(因为在该方法中, 可以获取到跟view相关联的图形上下文.)
2. 什么时候被调用?
2.1 在View第一次显示到屏幕上时.(被加载到UIWindow上显示出来的时候);
2.2 在调用View的setNeedsDisplay: 或者 setNeedsDisplayInRect: 的时候
3. rect : 是当前控件的bounds ```
***
>###UIBezierPath的基本使用:
- UIBezierPath对象, 是对CGPathRef数据类型的封装. path如果是基于矢量图(面向对象图形, 或者是绘图图像), 都用直线或者曲线去创建.
- 使用直线, 创建矩形和多边形 / 使用曲线段, 创建弧, 圆形或者其他复杂曲线形状.
- 每一段都包括一个,或者多个点.
- 每一个直线段/曲线段结束的地方, 就是下一个线段开始的地方.
- 每一个连接的直线段或者曲线段的集合, 称为: subPath.
- 一个UIBezierPath对象, 定义一个完整的路径, 包括一个或者多个subPath.
- 创建path对象, 使用Path对象的过程, 是分开的, 创建path是第一步,具体步骤如下:
7.1: 创建一个Path对象.
7.2: 使用moveToPoint: 去设置出线段的起点.```
绘图实例(一下所有方法, 都必须在drawRect方法中调用), 一下代码都是必要的基础代码, 路径的属性进行简单描述.
1. 绘制值线段
- (void)path1{
//1. 创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2. 设置起始点
[path moveToPoint:CGPointMake(20, 20)];
//3. 设置结束点(即第二条线段的开始点)
[path addLineToPoint:CGPointMake(100, 100)];
//4. 连线
[path stroke];
#********************************************************
#描述:
线和多边形是一些简单形状, 可以使用moveToPoint: 或者addLineToPoint: 方法去构建.
moveToPoint: 设置我们想要创建形状的起点, 从该点开始我们可以使用方法addLineToPoint:
去创建一个形状的线段, 也可以连续的创建line, 每一个line的起点都是先前线段的终点,
终点就是制定的点CGPointMake.
#路径属性:(路径的属性都应该写在绘制路径前面才能有效)
线宽
path.lineWidth = 5.0;
线段颜色
UIColor *color = [UIColor orangeColor];
[color set];
线条拐角
path.lineCapStyle = kCGLineCapRound;
连接点
path.lineJoinStyle = kCGLineJoinRound;
#********************************************************
}```
####2. 绘制多边型(在绘制线段的基础上)
```code
- (void)path2{
//1. 绘制路径
UIBezierPath *path = [UIBezierPath bezierPath];
//2. 设置起始点
[path moveToPoint:CGPointMake(20, 100)];
//3. 添加线段(通过给出的点, 连接出路径)
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(30, 200)];
[path addLineToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(70, 200)];
//4. 闭合路径
[path closePath];
//5. 绘制路径
[path stroke];
}```
####3. 利用图形上下文绘制直线
```code
- (void)contextDraw{
//1. 获取当前的上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
//2. 设置起始点
CGContextMoveToPoint(cxt, 20, 100);
//3. 设置中的
CGContextAddLineToPoint(cxt, 100, 50);
//4. 渲染上下文
CGContextDrawPath(cxt, kCGPathStroke);
#属性: 图形上下文的属性************************************
//线宽
CGContextSetLineWidth(cxt, 50.0);
//颜色
CGContextSetRGBStrokeColor(cxt, 0, 1, 0, 1);
//[[UIColor redColor] set];
//线的样式
CGContextSetLineCap(cxt, kCGLineCapRound);
//填充
[[UIColor greenColor] setFill];
#********************************************************
}```
####4. 利用上下文绘制曲线
```code
- (void)drawCurveLine{
//1. 获取图形上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
//2. 创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//3. 设置起始点
[path moveToPoint:CGPointMake(20, 50)];
* //4. 设置曲线
[path addCurveToPoint:CGPointMake(200, 50) controlPoint1:CGPointMake(50, 20) controlPoint2:CGPointMake(80, 90)];
//5. 将路径添加到上下文
CGContextAddPath(cxt, path.CGPath);
//6. 渲染上下文
CGContextDrawPath(cxt, kCGPathStroke);
}```
####5. 利用上下文绘制矩形
```code
- (void)drawSquare{
//1. 获取图形上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
* //2. 绘制路径
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 150) cornerRadius:0];
//3. 将路径添加到上下文
CGContextAddPath(cxt, path.CGPath);
//4. 渲染
CGContextDrawPath(cxt, kCGPathStroke);
}```
####6. 利用上下文绘制弧形
```code
- (void)drawBow{
//1. 获取图形上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
* //2. 绘制路径
//参数一: 表示弧形的终点
//参数二: 表示起始角度(0代表: X轴正半轴, Y为0 的角度)
//参数三: 表示结束位置的角度
//参数四: 表示是否是顺时针绘制
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//3. 添加到上下文
CGContextAddPath(cxt, path.CGPath);
//4. 渲染
CGContextDrawPath(cxt, kCGPathStroke);
}```
上一篇: ellipse
下一篇: WinAPI: Arc - 绘制弧线