CAShaperLayer&UIBezierPath简介
使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状,没有它做不到,只有你想不到,搞定了它们你就可以轻松定制你想要的任何控件了。
CAShaperLayer
苹果官方的定义:A layer that draws a cubic Bezier spline in its coordinate space.
继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。
同时CAShaperLayer具有以下特点:
- CAShapeLayer可以被触碰和填充,并且CAShapeLayer可以通过Path属性进行形状的调节
- CAshapeLayer具有许多动画特性,与UIBezierPath结合,可以轻松定制你想要的图形
- CAshapeLayer能在GPU上渲染,提升效率,减少CPU的负担
Note:
Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.
由于CAShapeLayer更喜欢速度超过准确性,所以用CAShapeLayer绘制的图形会出现锯齿。(如果不用放大镜的话,应该很难看出区别)
常用属性的介绍
1.CGPathRef path
/* The path defining the shape to be rendered. If the path extends * outside the layer bounds it will not automatically be clipped to the * layer, only if the normal layer masking rules cause that. Upon * assignment the path is copied. Defaults to null. Animatable. * (Note that although the path property is animatable, no implicit * animation will be created when the property is changed.) */复制代码
path定义了形状的渲染,如果路径超过layer的bounds,那么那部分的path将不会在layer上显示。同时path在赋值的时候将会进行深拷贝。默认值为空。请注意,尽管path属性是可动画的,但在更改属性时不会创建隐式动画。
隐式动画
当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果,而这些属性称为Animatable Properties(可动画属性)
bounds
:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画backgroundColor
:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画position
:用于设置CALayer的位置。修改这个属性会产生平移动画
可以通过动画事务CATransaction
关闭默认的隐式动画效果
[CATransaction begin]; [CATransaction setDisableActions:YES]; self.myview.layer.position = CGPointMake(10, 10); [CATransaction commit];复制代码
2.CGFloat strokeStart && CGFloat strokeEnd
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */
- strokeStart它表示描线开始的地方占总路径的百分比
- 对比strokeStart stokeEnd代表了绘制结束的地方站总路径的百分比
UIBezierPath
A path that consists of straight and curved line segments that you can render in your custom views.
UIBezierPath
对象是CGPathRef数据类型的封装。有两种使用方式:
1.重写view的drawRect方法
- (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.lineWidth = 5.0
设置划线的宽度path.lineCapStyle
终点的样式kCGLineCapButt
该属性值指定不绘制端点, 线条结尾处直接结束。这是默认值kCGLineCapRound
该属性值指定绘制圆形端点, 线条结尾处绘制一个直径为线条宽度的半圆。kCGLineCapSquare
该属性值指定绘制方形端点。 线条结尾处绘制半个边长为线条宽度的正方形。需要说明的是,这种形状的端点与“butt”形状的端点十分相似,只是采用这种形式的端点的线条略长一点而已
path.lineJoinStyle
设置两条线连结点的样式kCGLineJoinMiter
斜接kCGLineJoinRound
圆滑衔接kCGLineJoinBevel
斜角连接
[path stroke]
描边[path fill]
填充边框内部
2.结合CAShaperLayer进行使用
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.path = path.CGPath; layer.strokeColor = [UIColor blackColor].CGColor; layer.fillColor = [UIColor redColor].CGColor; [self.view.layer addSublayer:layer];复制代码
stokeColor
设置图形边框的颜色fillColor
设置图形填充的颜色,如果不设置,默认为stokeColor