1.繪制虛線
根據(jù)圖像的邊緣繪制虛線
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];//第一個參數(shù)是線條的長度哲嘲,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;
//填充顏色的規(guī)則媳禁,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;
// //填充顏色的規(guī)則,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.二次函數(shù)曲線
[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