绘图相关(平滑过渡色、镂空效果、部分圆角等)
2016-09-02 本文已影响272人
King_Whb
1.绘制虚线
根据图像的边缘绘制虚线
view.center = self.view.center;
view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:view];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.path = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
shapeLayer.frame = view.bounds;
shapeLayer.lineWidth = 1.f;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.lineDashPattern = @[@20, @2];//第一个参数是线条的长度,2代表的是间隔
[view.layer addSublayer:shapeLayer];
2.贝塞尔画出曲线(可以是直线,改变线型就会变成虚线)
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];
[path moveToPoint:CGPointMake(160, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:10 startAngle:0 endAngle:-2*M_PI clockwise:NO];
[path moveToPoint:CGPointMake(155, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:5 startAngle:0 endAngle:-2*M_PI clockwise:NO];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;
shapeLayer.lineDashPhase = 1;
shapeLayer.strokeStart = 0.2;
shapeLayer.strokeEnd = 0.8;
//填充颜色的规则,zero 是 kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
shapeLayer.fillRule = kCAFillRuleNonZero;
shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切 不变等
shapeLayer.lineCap = kCALineCapSquare; //线型
shapeLayer.lineDashPattern = @[@3 ,@4];
shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];
3.画正方形(部分圆角)
CGSize radii = CGSizeMake(20, 20);
UIRectCorner corner = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corner cornerRadii:radii];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;
// //shapeLayer.lineDashPhase = 1;
// // shapeLayer.strokeStart = 0.2;
// // shapeLayer.strokeEnd = 0.8;
// //填充颜色的规则,zero 是 kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
// shapeLayer.fillRule = kCAFillRuleNonZero;
shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切 不变等
shapeLayer.lineCap = kCALineCapRound; //线型
// shapeLayer.lineDashPattern = @[@3 ,@4];
shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];
4.镂空效果
imageView.image = [UIImage imageNamed:@"8"];
[self.view addSubview:imageView];
UIView *bgView = [[UIView alloc]initWithFrame:self.view.frame];
bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
[self.view addSubview:bgView];
CGRect rc = CGRectMake(15, 30, 130, 130);
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:bgView.bounds];
//[path appendPath:[[UIBezierPath bezierPathWithRect:rc] bezierPathByReversingPath]];
[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:80]bezierPathByReversingPath]];
shapeLayer.path = path.CGPath;
bgView.layer.mask = shapeLayer;
4.二次函数曲线
[path moveToPoint:CGPointMake(1, 0)];
[path addQuadCurveToPoint:CGPointMake(500, 0) controlPoint:CGPointMake(300, 1000)];
// [path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
5.直线
[path moveToPoint:CGPointMake(1, 0)];
[path addLineToPoint:CGPointMake(500, 500)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
6.一般曲线
[path moveToPoint:CGPointMake(1, 0)];
[path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
7.用 CATextLayer显示文字并改变清晰度
textLayer.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2-50, 200, 200);
[self.view.layer addSublayer:textLayer];
textLayer.foregroundColor = [UIColor blackColor].CGColor;
textLayer.string = @"Lorem ipsum dolor sit amet, consectetur adipiscing \
elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
lobortis";
textLayer.alignmentMode = kCAAlignmentJustified;
textLayer.contentsScale = 2.0f;
textLayer.wrapped = YES;
UIFont *font = [UIFont systemFontOfSize:15];
//set layer font
CFStringRef fontName = (__bridge CFStringRef)font.fontName;
//获取 font 的名字
CGFontRef fontRef = CGFontCreateWithFontName(fontName);
textLayer.font = fontRef;
textLayer.fontSize = font.pointSize;
CGFontRelease(fontRef);
8.平滑过渡色
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];
gradientLayer.locations = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1]];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
*** 注意颜色必须是CGColor,设置 locations 是[0-1]浮点型numberWithFloat
绘图相关(平滑过渡色、镂空效果、部分圆角等)注:太麻烦了,就把所有的效果搞一张图上,虽然不清,但都能说明问题。
之前对贝塞尔没有太多认识,3D 动画那一块也没有很深的了解,暂时不展示3D 动画那一块
资料:http://blog.sina.com.cn/s/blog_8f5097be0101b91z.html