iOS程序猿iOS开发程序员

绘图相关(平滑过渡色、镂空效果、部分圆角等)

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
上一篇下一篇

猜你喜欢

热点阅读