贝塞尔曲线(UIBezierPath)和CALayer,图形层L
2016-11-08 本文已影响798人
窗外山海帆
一.Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。可以参考一个博客初步认识:
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
通过调整控制点,贝塞尔曲线的形状会发生变化,先看下面一段实现过的代码:
CGPoint firstPoint = CGPointMake(self.bounds.size.width*0.5,self.bounds.size.height*0.5);
UIBezierPath *progresslinePath = [UIBezierPath bezierPath];
[progresslinePath moveToPoint:firstPoint];
[progresslinePath addLineToPoint:CGPointMake(firstPoint.x,firstPoint.y- _grade*BAR_HEIGHT)];
[progresslinePath setLineCapStyle:kCGLineCapSquare];
[progresslinePath closePath];
[self startUpAnimationTimeInterval:kAniDuration path:progresslinePath];
- (void)startUpAnimationTimeInterval:(float)duration path:(UIBezierPath *)path
{
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = _barColor.CGColor;
shapeLayer.lineWidth = self.frame.size.width;
shapeLayer.fillColor = [[UIColor whiteColor] CGColor];
shapeLayer.strokeStart = 0.0;
[self.layer addSublayer:shapeLayer];
//
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = duration;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.autoreverses = NO;
[shapeLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
shapeLayer.strokeEnd = 1.0;
}
二.以下初始化贝塞尔曲线的方法
**//根据一个矩形画曲线**
+ (instancetype)bezierPathWithRect:(CGRect)rect;
**//根据矩形框的内切圆画曲线**
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
**//根据矩形画带圆角的曲线**
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
**//在矩形中,可以针对四角中的某个角加圆角**
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
**//以某个中心点画弧线**
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
参数:
center:弧线中心点的坐标
radius:弧线所在圆的半径
startAngle:弧线开始的角度值
endAngle:弧线结束的角度值,顺时针增加90为π/2
clockwise:是否顺时针画弧线(1顺时针,0逆时针)
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
**//画二元曲线,一般和moveToPoint配合使用**
-(void)addQuadCurveToPoint:(CGPoint)endPointcontrolPoint:(CGPoint)controlPoint
参数:
endPoint:曲线的终点
controlPoint:画曲线的基准点
**//以三个点画一段曲线,一般和moveToPoint配合使用**
-(void)addCurveToPoint:(CGPoint)endPointcontrolPoint1:(CGPoint)controlPoint1controlPoint2:(CGPoint)controlPoint2
参数:
endPoint:曲线的终点
controlPoint1:画曲线的第一个基准点
controlPoint2:画曲线的第二个基准点
三.创建和使用一个path对象的过程是分开的。创建path是第一步,包含一下步骤:
(1)创建一个Bezier path对象。
(2)使用方法moveToPoint:去设置初始线段的起点。
(3)添加line或者curve去定义一个或者多个subpaths。
(4)改变UIBezierPath对象跟绘图相关的属性。
#define pi 3.14159265359
#define DEGREES_TO_RADIANS(degrees) ((pi * degrees)/ 180)
- (void)testBezierViewInRect:(CGRect)rect
{
//加在View的图层上面进行操作, 只有在这个方法中执行 - (void)drawRect:(CGRect)rect
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)
radius:50
startAngle:0
endAngle:DEGREES_TO_RADIANS(135)
clockwise:YES];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath stroke];
}
更多以上相关的绘图可以参考:
http://justsee.iteye.com/blog/1972853
四.关于UIView的图层Layer,以及对于layer的操作(CAShaperLayer)
1.将UIBezierPath 和CAShaperLayer配合起来使用,可以画出很多种不同的图形。可参考
http://www.cocoachina.com/ios/20160214/15251.html
//画出一个部分圆角图形
- (void)testBezierViewInRect1:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor redColor].CGColor;
[self.layer addSublayer:layer];
}
2.这篇介绍了View的Layer 和Mask属性,刚好可以用到修改聊天对话中图片的圆角效果。
http://www.cocoachina.com/ios/20160711/17007.html