使用shapelayer 画图步骤
1、新建UIBezierPath对象bezierPath
2、新建CAShapeLayer对象caShapeLayer
3、将bezierPath的CGPath赋值给caShapeLayer的path，即caShapeLayer.path = bezierPath.CGPath
4、把CAShapeLayer添加到某个显示该图形的layer中
shapelayer 动画效果的几种实现方式
看果冻效果来更好的理解
1、使用coreanimation动画
- CAKeyframeAnimation。
- CABasicAnimation
2、修改bezierPath路径：
- 使用CADisplayLink
- 使用pan手势
3、pan
创建bezierPath 曲线
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(0, self.bounds.size.height * 0.5)];
[path addLineToPoint:CGPointMake(15, 0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width, 0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
[path addLineToPoint:CGPointMake(15, self.bounds.size.height)];
[path closePath];
创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [[UIColor brownColor] colorWithAlphaComponent:0.3].CGColor;
shapeLayer.path = path.CGPath;
[self.layer addSublayer:shapeLayer];
加动画
CABasicAnimation *animation = [[CABasicAnimation alloc] init];
animation.keyPath = @"strokeStart";
animation.fromValue = @0;
animation.toValue = @1;
animation.repeatCount = MAXFLOAT;
animation.duration = 1;
animation.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];;
[shapeLayer addAnimation:animation forKey:nil];
也可以使用加动画组
shaplayer 的属性 ：strokeStart strokeEnd
CABasicAnimation 动态改变 这两个属性值，可以实现划线的过程动画
mask遮罩
使用shaplayer随意修改view的圆角
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
redView.center = self.view.center;
redView.backgroundColor = [UIColor redColor];
UIRectCorner rectCorner = UIRectCornerTopLeft|UIRectCornerTopRight;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:redView.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(40, 40)];
CAShapeLayer *shaperLayer = [CAShapeLayer layer];
shaperLayer.path = path.CGPath;
redView.layer.mask = shaperLayer;
[self.view addSubview:redView];
使用shaplayer修改view遮罩
CAShapeLayer *shapeLayer = [[CAShaperLayer alloc] init];
UIBezierPath *path = [UIBezierPath alloc] init];
......
shapeLayer.path = path.CGPath;
view.layer.mask = shapeLayer;
//设置shapeLayer动画，可以实现view逐渐显示的效果
使用shapelier 画各种线
画三角形
- (void)drawTriangle {
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
//绘制三角形的三个顶点，自己算，能连成三角形就行啦！
[path moveToPoint:CGPointMake(50, 30)];
[path addLineToPoint:CGPointMake(110, 30)];
[path addLineToPoint:CGPointMake(80, 60)];
//连接三个点
[path closePath];
layer.path = path.CGPath;
//填充图形颜色
layer.fillColor = [UIColor clearColor].CGColor;
//图形变现颜色
layer.strokeColor = [UIColor blackColor].CGColor;
//self.drawView,自己定义一个View，继承UIView
[self.drawView.layer addSublayer:layer];
//不加动画就会直接出现三角形，这里我们加了动画，请看下面的动画方法！！！
[self drawAnimationType:self.animationType layer:layer];
}
画圆
- (void)drawCircular {
//第一种
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer];
//第二种
CAShapeLayer *layer = [CAShapeLayer layer];
/*
*param1:图形大小
*param2:圆角的位置
*param3:圆角的大小
*/
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake((kScreenWidth-40)/2-50, 30, 100, 100) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(30, 30)];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer];
//第三种
CAShapeLayer *layer2 = [CAShapeLayer layer];
/*
*param1:圆的中心点
*param2:圆的半径
*param3:开始画圆的角度
*param4:结束画圆的角度
*param5:YES为顺时针画圆，NO为逆时针画圆
*/
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:30 startAngle:0.0 endAngle:M_PI * 2 clockwise:NO];
layer2.path = path2.CGPath;
layer2.fillColor = [UIColor clearColor].CGColor;
layer2.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer2];
//椭圆
CAShapeLayer *layer3 = [CAShapeLayer layer];
UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(250, 30, 80, 50)];
layer3.path = path3.CGPath;
layer3.fillColor = [UIColor clearColor].CGColor;
layer3.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer3];
}
画单点曲线
- (void)drawCurve {
//贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
CGPoint startPoint = CGPointMake(20, 100);
CGPoint endPoint = CGPointMake(300, 100);
CGPoint controlPoint = CGPointMake(160, 10);
//这里把三个点都绘制出来了，以便观察
CALayer *layer1 = [CALayer layer];
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
layer1.backgroundColor = [UIColor blackColor].CGColor;
CALayer *layer2 = [CALayer layer];
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
layer2.backgroundColor = [UIColor blackColor].CGColor;
CALayer *layer3 = [CALayer layer];
layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
layer3.backgroundColor = [UIColor blackColor].CGColor;
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer];
[self.drawView.layer addSublayer:layer1];
[self.drawView.layer addSublayer:layer2];
[self.drawView.layer addSublayer:layer3];
[self drawAnimationType:self.animationType layer:layer];
}
画双点曲线
- (void)drawCurveWithTwoDot {
//贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
CGPoint startPoint = CGPointMake(20, 100);
CGPoint endPoint = CGPointMake(300, 100);
CGPoint controlPoint1 = CGPointMake(90, 10);
CGPoint controlPoint2 = CGPointMake(230, 190);
CALayer *layer1 = [CALayer layer];
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
layer1.backgroundColor = [UIColor clearColor].CGColor;//给layer1赋值颜色，以便观察，项目中一般用透明色即可！
CALayer *layer2 = [CALayer layer];
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
layer2.backgroundColor = [UIColor clearColor].CGColor;
CALayer *layer3 = [CALayer layer];
layer3.frame = CGRectMake(controlPoint1.x, controlPoint1.y, 5, 5);
layer3.backgroundColor = [UIColor clearColor].CGColor;
CALayer *layer4 = [CALayer layer];
layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5);
layer4.backgroundColor = [UIColor clearColor].CGColor;
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.drawView.layer addSublayer:layer];
[self.drawView.layer addSublayer:layer1];
[self.drawView.layer addSublayer:layer2];
[self.drawView.layer addSublayer:layer3];
[self.drawView.layer addSublayer:layer4];
[self drawAnimationType:self.animationType layer:layer];
}
画多边形
- (void)drawPolygonWithNum:(CGFloat)num {
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat radius = 50;//设置一个半径
CGFloat centerX = (kScreenWidth-20)/2;
CGFloat centerY = 100;
if (num < 3) {
num = 3;
}
[path moveToPoint:CGPointMake(centerX+radius, centerY)];
NSLog(@"%f",sin(2*M_PI*1/num));
//这里涉及到一个算法，大家看看！！！
for (int i = 1; i <= num; i ++) {
[path addLineToPoint:CGPointMake(centerX+radius*cos(2*M_PI*i/num), centerY+radius*sin(2*M_PI*i/num))];
layer.path = path.CGPath;
}
[path closePath];
layer.strokeColor = [UIColor blackColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
[self.drawView.layer addSublayer:layer];
[self drawAnimationType:self.animationType layer:layer];
}
