关于UIBezierPath基础
UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。
我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
*** 首先我们需要自定义一个View继承UIView😊,用来绘制曲线 ***
1.创建一个三角形
- (void)drawRect:(CGRect)rect {
// 1. 创建UIBezierPath对象
UIBezierPath *path = [UIBezierPath bezierPath];
// 2. 设置相关属性
path.lineWidth = 3.0f; // 线条宽度
[[UIColor redColor] set]; // 线条颜色
path.lineCapStyle = kCGLineCapRound; // 线条拐角
path.lineJoinStyle = kCGLineCapRound;// 终点处理
// 3.通过moveToPoint:设置起点
[path moveToPoint:CGPointMake(200, 200)];
// 添加line为subPaths
[path addLineToPoint:(CGPointMake(100, 400))];
[path addLineToPoint:(CGPointMake(300, 400))];
[path closePath];
// 开始绘画
[path stroke];
// 开始绘画并填充
//[path fill];
}
关于stroke和fill的效果图如下
stroke效果
fill效果.png
2.创建矩形,圆形,和一段弧线
- (void)drawRect:(CGRect)rect {
// 创建矩形
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:(CGRectMake(50, 100, 100, 100))];
rectPath.lineWidth = 3.0f;
[[UIColor redColor] set];
rectPath.lineCapStyle = kCGLineCapRound;
rectPath.lineJoinStyle = kCGLineCapRound;
[rectPath stroke];
// 创建内切圆
UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 300, 300, 300)];
oval.lineWidth = 3.0f;
[[UIColor greenColor] set];
oval.lineCapStyle = kCGLineCapRound;
oval.lineJoinStyle = kCGLineCapRound;
[oval stroke];
// 弧线
CGFloat endAngle = 120 *sinf(M_PI / 180);
UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:(CGPointMake(300, 100)) radius:100 startAngle:0.0 endAngle:endAngle clockwise:YES];
arcPath.lineWidth = 5.0f;
[[UIColor purpleColor] set];
arcPath.lineCapStyle = kCGLineCapRound;
arcPath.lineJoinStyle = kCGLineCapRound;
[arcPath stroke];
}
附上效果图:
CAShapeLayer和CAGradientLayer
- CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。可以指定颜色和线宽等属性，用CGPath来描述绘制的图形.
- CAGradientLayer,苹果给出的官方描述是:一个可以用来进行绘制##渐变背景色的layer
实战一:写一个环形的进度条
1.先通过CAShapeLayer和BezierPath创建一个圆形的进度条出来
- (void)viewDidLoad {
[super viewDidLoad];
// 创建曲线,绘制圆形path
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:100 startAngle:M_PI endAngle:-M_PI clockwise:NO];
// 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = self.view.bounds;// 设置图层大小
shapeLayer.path = circlePath.CGPath;// 设置shapeLayer的cgPath
shapeLayer.opacity = 1.0f; //设置透明度0~1之间
shapeLayer.lineCap = kCALineCapRound;//制定线的边缘是圆形
shapeLayer.lineWidth = 5.0f; // 设置线宽
shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;// 设置线条颜色
[shapeLayer setFillColor:[UIColor clearColor].CGColor]; // 清楚填充颜色
[self.view.layer addSublayer:shapeLayer];}
效果图⬇️
2.创建CAGradientLayer设置渐变颜色
// 创建颜色数组
NSMutableArray *colors = [NSMutableArray array];
for (NSInteger hue = 0; hue <= 360; hue += 5)
{
UIColor * color = [UIColor colorWithHue:1.0 * hue / 360
saturation:1.0
brightness:1.0
alpha:1.0];
[colors addObject:(id)[color CGColor]];
}
CAGradientLayer *grandient = [CAGradientLayer layer];
grandient.frame = self.view.bounds;//设置颜色渐变的layer的frame
grandient.colors = colors;//颜色数组
grandient.mask = shapeLayer;//设置mask图层
//开始和结束点可以用来做隐式动画
grandient.startPoint = CGPointMake(0, 0);//开始点
grandient.endPoint = CGPointMake(1, 0);//结束点
[self.view.layer addSublayer:grandient];
效果图⬇️
关于隐式动画
shapeLayer.strokeStart =0.f;
shapeLayer.strokeEnd = 0.f;
__block CGFloat end = 0.0f;
[NSTimer scheduledTimerWithTimeInterval:0.2 repeats:YES block:^(NSTimer * _Nonnull timer) {
end += 0.1f;
if (end >= 1) {
[timer invalidate];
}
shapeLayer.strokeEnd = end;
}];
Tips:我自己写了一个图表的Demo,大神们不要嫌弃~先上个效果图
ab.gif
GIT地址:https://github.com/candy7/Graphs
~~~ 给个❤喜欢❤吧,谢谢各位看官了.=￣ω￣=~~
网友评论