CAShaperLayer&UIBezierPath畫基本圖形
使用 UIbezierPath 和 CAShapeLayer 可以畫出你想要的任何形狀，沒有它做不到，只有你想不到，搞定了它們你就可以輕鬆定製你想要的任何控制元件了。
原文出處:(www.jianshu.com/p/c5cbb5e05…)
CAShaperLayer&UIBezierPath畫多邊形
1.畫矩形
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];
複製程式碼2.畫橢圓
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 20, 100, 80) cornerRadius:40];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.strokeColor = [UIColor blackColor].CGColor;
layer.fillColor = [UIColor whiteColor].CGColor;
[self.view.layer addSublayer:layer];
複製程式碼3.畫直線
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 130)]; //起點
[path addLineToPoint:CGPointMake(300, 130)]; //終點
[path closePath];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = 5.0f; //設定行寬
layer.path = path.CGPath;
layer.strokeColor = [UIColor blackColor].CGColor; //設定線條顏色
[self.view.layer addSublayer:layer];
複製程式碼- 注意通過UIBezierPath設定行高和樣色，將會不起作用
4.畫曲線
CGPoint startPoint = CGPointMake(20, 250);
CGPoint endPoint = CGPointMake(300, 250);
CGPoint controlPoint = CGPointMake(160, 150);
CAShapeLayer *layer1 = [CAShapeLayer layer];
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
layer1.backgroundColor = [UIColor redColor].CGColor;
CAShapeLayer *layer2 = [CAShapeLayer layer];
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
layer2.backgroundColor = [UIColor redColor].CGColor;
CAShapeLayer *layer3 = [CAShapeLayer layer];
layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
layer3.backgroundColor = [UIColor redColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
CAShapeLayer *layer = [CAShapeLayer layer];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.view.layer addSublayer:layer];
[self.view.layer addSublayer:layer1];
[self.view.layer addSublayer:layer2];
[self.view.layer addSublayer:layer3];
複製程式碼
CAShaperLayer&UIBezierPath範例
1.時光網App
[self.view setBackgroundColor:[UIColor lightGrayColor]];
CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 400);
CGFloat layerHeight = finalSize.height * 0.2;
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *bezier = [UIBezierPath bezierPath];
[bezier moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
[bezier addLineToPoint:CGPointMake(0, finalSize.height - 1)];
[bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
[bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
[bezier addQuadCurveToPoint:CGPointMake(0,finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
layer.path = bezier.CGPath;
layer.fillColor = [UIColor whiteColor].CGColor;
[self.view.layer addSublayer:layer];
//注意Layer層級關係
[self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - layerHeight)];
[self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - 1)];
[self markPoint:CGPointMake(0, finalSize.height - 1)];
[self markPoint:CGPointMake(0, finalSize.height - layerHeight)];
[self markPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
複製程式碼
2.微信（下拉的眼睛）
- 建立Layer的程式碼
- (CAShapeLayer *)eyeFirstLightLayer {
if (!_eyeFirstLightLayer) {
_eyeFirstLightLayer = [CAShapeLayer layer];
CGPoint center = eyeCenter;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:eyeSize.width * 0.2
startAngle:(230.f / 180.f) * M_PI
endAngle:(265.f / 180.f) * M_PI
clockwise:YES];
_eyeFirstLightLayer.borderColor = [UIColor blackColor].CGColor;
_eyeFirstLightLayer.lineWidth = 5.f;
_eyeFirstLightLayer.path = path.CGPath;
_eyeFirstLightLayer.fillColor = [UIColor clearColor].CGColor;
_eyeFirstLightLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _eyeFirstLightLayer;
}
- (CAShapeLayer *)eyeSecondLightLayer {
if (!_eyeSecondLightLayer) {
_eyeSecondLightLayer = [CAShapeLayer layer];
CGPoint center = eyeCenter;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:eyeSize.width * 0.2
startAngle:(211.f / 180.f) * M_PI
endAngle:(220.f / 180.f) * M_PI
clockwise:YES];
_eyeSecondLightLayer.borderColor = [UIColor blackColor].CGColor;
_eyeSecondLightLayer.lineWidth = 5.f;
_eyeSecondLightLayer.path = path.CGPath;
_eyeSecondLightLayer.fillColor = [UIColor clearColor].CGColor;
_eyeSecondLightLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _eyeSecondLightLayer;
}
- (CAShapeLayer *)eyeballLayer {
if (!_eyeballLayer) {
_eyeballLayer = [CAShapeLayer layer];
CGPoint center = eyeCenter;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:eyeSize.width * 0.3
startAngle:(0.f / 180.f) * M_PI
endAngle:(360.f / 180.f) * M_PI
clockwise:YES];
_eyeballLayer.borderColor = [UIColor blackColor].CGColor;
_eyeballLayer.lineWidth = 1.f;
_eyeballLayer.path = path.CGPath;
_eyeballLayer.fillColor = [UIColor clearColor].CGColor;
_eyeballLayer.strokeColor = [UIColor whiteColor].CGColor;
_eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
}
return _eyeballLayer;
}
- (CAShapeLayer *)topEyesocketLayer {
if (!_topEyesocketLayer) {
_topEyesocketLayer = [CAShapeLayer layer];
CGPoint center = eyeCenter;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];
[path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)
controlPoint:CGPointMake(eyeCenter.x, center.y - eyeSize.width * 0.3 - 23)];
_topEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
_topEyesocketLayer.lineWidth = 1.f;
_topEyesocketLayer.path = path.CGPath;
_topEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
_topEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _topEyesocketLayer;
}
- (CAShapeLayer *)bottomEyesocketLayer {
if (!_bottomEyesocketLayer) {
_bottomEyesocketLayer = [CAShapeLayer layer];
CGPoint center = eyeCenter;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];
[path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)
controlPoint:CGPointMake(eyeCenter.x , center.y + eyeSize.width * 0.3 + 23)];
_bottomEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
_bottomEyesocketLayer.lineWidth = 1.f;
_bottomEyesocketLayer.path = path.CGPath;
_bottomEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
_bottomEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _bottomEyesocketLayer;
}
複製程式碼-
根據ScrollView的contentOffset.y來繪製圖形
CGFloat flag = self.view.frame.origin.y * 2.0f - 20.0f; if(y < flag){ if (self.eyeFirstLightLayer.lineWidth < 5.0f) { self.eyeFirstLightLayer.lineWidth += 1.0f; self.eyeSecondLightLayer.lineWidth += 1.0f; } } if (y < flag - 20) { if (self.eyeballLayer.opacity <= 1.0f) { self.eyeballLayer.opacity += 0.1f; } } if (y < flag - 40) { if (self.topEyesocketLayer.strokeEnd < 1.0f && self.topEyesocketLayer.strokeStart > 0.0f) { self.topEyesocketLayer.strokeEnd += 0.1f; self.topEyesocketLayer.strokeStart -= 0.1f; self.bottomEyesocketLayer.strokeEnd += 0.1f; self.bottomEyesocketLayer.strokeStart -= 0.1f; } } if (y > flag - 40) { if (self.topEyesocketLayer.strokeEnd > 0.5f && self.topEyesocketLayer.strokeStart < 0.5f) { self.topEyesocketLayer.strokeEnd -= 0.1f; self.topEyesocketLayer.strokeStart += 0.1f; self.bottomEyesocketLayer.strokeEnd -= 0.1f; self.bottomEyesocketLayer.strokeStart += 0.1f; } } if (y > flag - 20) { if (self.eyeballLayer.opacity >= 0.0f) { self.eyeballLayer.opacity -= 0.1f; } } if (y > flag) { if (self.eyeFirstLightLayer.lineWidth > 0.f) { self.eyeFirstLightLayer.lineWidth -= 1.f; self.eyeSecondLightLayer.lineWidth -= 1.f; } } 複製程式碼
-
其中
strokeStart和strokeEnd這兩個屬性需要特別注意-
stokeStart (The relative location at which to begin stroking the path. Animatable.)
- 描線開始的地方佔總路徑的百分比
-
stokeEnd (The relative location at which to stop stroking the path. Animatable.)
- 繪製結束的地方站總路徑的百分比 預設值為1
-
