放肆地用 UIBezierPath 和 CAShapeLayer 画各类图形

时间 2019-11-16

标签放肆 uibezierpath cashapelayer 各类图形繁體版

原文原文链接

‍

CAShapeLayer 是 CALayer 的子类，可是比 CALayer 更灵活，能够画出各类图形，固然，你也能够使用其余方式来画，随你。git

杂谈

在 CAShapeLayer 中，也能够像 CALayer 同样指定它的 frame 来画，就像这样：程序员

let layer = CAShapeLayer ( )

layer . frame = CGRectMake ( 110 , 100 , 150 , 100 )

layer . backgroundColor = UIColor . blackColor ( ) . CGColor

view . layer . addSublayer ( layer )

而后你就会获得如图这样的黑色矩形github

可是，CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就能够达到超神的效果。web

UIBezierPath 顾名思义，这是用贝塞尔曲线的方式来构建一段弧线，你能够用任意条弧线来组成你想要的形状，好比，你想用它来和上面同样画一个矩形，那就能够这样子来作：编程

let path = UIBezierPath ( rect : CGRectMake ( 110 , 100 , 150 , 100 ) )

let layer = CAShapeLayer ( )

layer . path = path . CGPath

layer . fillColor = UIColor . blackColor ( ) . CGColor

view . layer . addSublayer ( layer )

要注意的是，这里就不要用backgroundColor 这个属性了，而要使用 fillColor 和 strokeColor ，前者表明设置这个 Layer 的填充色，后者表明设置它的边框色微信

1 2	layer . fillColor = UIColor . clearColor ( ) . CGColor layer . strokeColor = UIColor . blackColor ( ) . CGColor

能够试一下把上面代码设置颜色的部分改为这个样子，那么运行程序的时候就会是这种样子架构

玩一下UIBezierPath

在说回 UIBezierPath ，在 UIBezierPath 的 init 方法中，就有不少方便你画各类图形的方法，好比你能够画一个带圆角的图形socket

let path = UIBezierPath ( roundedRect : CGRectMake ( 110 , 100 , 150 , 100 ) , cornerRadius : 50 )

let layer = CAShapeLayer ( )

layer . path = path . CGPath

layer . fillColor = UIColor . clearColor ( ) . CGColor

layer . strokeColor = UIColor . blackColor ( ) . CGColor

还能够指定起始角和半径画圆动画

let radius : CGFloat = 60.0

let startAngle : CGFloat = 0.0

let endAngle : CGFloat = CGFloat ( M_PI * 2 )

let path = UIBezierPath ( arcCenter : view . center , radius : radius , startAngle : startAngle , endAngle : endAngle , clockwise : true )

let layer = CAShapeLayer ( )

layer . path = path . CGPath

layer . fillColor = UIColor . clearColor ( ) . CGColor

layer . strokeColor = UIColor . blackColor ( ) . CGColor

在这里涉及到角度的问题，起始角和结束角，这里的角度使使用弧度制来表示，这里我收藏了一张图片，以方便参考网站

怎么画曲线

贝塞尔曲线的画法是由起点、终点、控制点三个参数来画的，为了解释清楚这个点，我写了几行代码来解释它

let startPoint = CGPointMake ( 50 , 300 )

let endPoint = CGPointMake ( 300 , 300 )

let controlPoint = CGPointMake ( 170 , 200 )

let layer1 = CALayer ( )

layer1 . frame = CGRectMake ( startPoint . x , startPoint . y , 5 , 5 )

layer1 . backgroundColor = UIColor . redColor ( ) . CGColor

let layer2 = CALayer ( )

layer2 . frame = CGRectMake ( endPoint . x , endPoint . y , 5 , 5 )

layer2 . backgroundColor = UIColor . redColor ( ) . CGColor

let layer3 = CALayer ( )

layer3 . frame = CGRectMake ( controlPoint . x , controlPoint . y , 5 , 5 )

layer3 . backgroundColor = UIColor . redColor ( ) . CGColor

let path = UIBezierPath ( )

let layer = CAShapeLayer ( )

path . moveToPoint ( startPoint )

path . addQuadCurveToPoint ( endPoint , controlPoint : controlPoint )

layer . path = path . CGPath

layer . fillColor = UIColor . clearColor ( ) . CGColor

layer . strokeColor = UIColor . blackColor ( ) . CGColor

view . layer . addSublayer ( layer )

view . layer . addSublayer ( layer1 )

view . layer . addSublayer ( layer2 )

view . layer . addSublayer ( layer3 )

我很随意的定义了三个点，为了清楚显示它们的位置，我放了三个矩形在上面以便观察，而后调用 path.moveToPoint(startPoint) 让它移动到起始点，而后调用path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) 这个方法告诉它结束点和控制点，这样它就能画出一条有弧度的线条了，若是把fillColor设置一个颜色，那么它就会变成一个很丑的形状了，示例图以下

控制点决定了它的曲率，曲线的顶点不等于控制点的位置，具体能够看一下贝塞尔曲线的定义，你还能够使用两个控制点来画，两个控制点能够使用方法 path.addCurveToPoint(endPoint, controlPoint1: controlPoint, controlPoint2: controlPoint2)来搞定

这样它会是这个样子

再来讲说 CAShapeLayer

CAShapeLayer 是个神奇的东西，给它一个path它就能变成你想要的形状，它还有不少能够玩的地方。综合使用能够组合成不一样的动画，好比下面这样：

demo1.gif

demo2.gif

demo3.gif

这三个动画就是使用了 strokeEnd strokeStart lineWidth 三个属性，第一个动画用了strokeEnd这个属性的值范围是0-1，动画显示了从0到1之间每个值对这条曲线的影响，strokeStart的方法则是相反的，若是把这两个值首先都设置成0.5而后慢慢改变成0和1的时候就会变成第二个动画，配合lineWidth则曲线会慢慢变粗，这里的不少属性都是支持动画的。

示例代码

private func animation1 ( ) {

let animation = CABasicAnimation ( keyPath : "strokeEnd" )

animation . fromValue = 0

animation . toValue = 1

animation . duration = 2

layer . addAnimation ( animation , forKey : "" )

}

private func animation2 ( ) {

layer . strokeStart = 0.5

layer . strokeEnd = 0.5

let animation = CABasicAnimation ( keyPath : "strokeStart" )

animation . fromValue = 0.5

animation . toValue = 0

animation . duration = 2

let animation2 = CABasicAnimation ( keyPath : "strokeEnd" )

animation2 . fromValue = 0.5

animation2 . toValue = 1

animation2 . duration = 2

layer . addAnimation ( animation , forKey : "" )

layer . addAnimation ( animation2 , forKey : "" )

}

private func animation3 ( ) {

let animation = CABasicAnimation ( keyPath : "lineWidth" )

animation . fromValue = 1

animation . toValue = 10

animation . duration = 2

layer . addAnimation ( animation , forKey : "" )

}

应用一下

前一阵子在仿时光网这个APP，其中有一个Layer的形状很怪异，是这样的

很明显它能够用 CAShapeLayer + UIBezierPath 来作，思路大概是这样，先移动到左上方的位置，而后向下划线，而后往右划线，而后往上划线，还剩一个盖子，这个盖子就用一个控制点控制曲率，很是简单，代码以下

let finalSize = CGSizeMake ( CGRectGetWidth ( view . frame ) , 400 )

let layerHeight = finalSize . height * 0.2

let layer = CAShapeLayer ( )

let bezier = UIBezierPath ( )

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 . blackColor ( ) . CGColor

view . layer . addSublayer ( layer )

就能画出这样的形状来

再来一个复杂点的，微信下拉拍小视频的那只眼睛颇有趣，来模仿一下那个效果吧，它是这样的

首先你得画出这只眼睛，这是眼睛包括5个部分组成（这个是用OC写的）

@property ( strong , nonatomic ) CAShapeLayer *eyeFirstLightLayer ;

@property ( strong , nonatomic ) CAShapeLayer *eyeSecondLightLayer ;

@property ( strong , nonatomic ) CAShapeLayer *eyeballLayer ;

@property ( strong , nonatomic ) CAShapeLayer *topEyesocketLayer ;

@property ( strong , nonatomic ) CAShapeLayer *bottomEyesocketLayer ;

而后，仍是经过 UIBezierPath 和 CAShapeLayer 这样的老套路来画，代码较多

- ( CAShapeLayer * ) eyeFirstLightLayer {

if ( ! _eyeFirstLightLayer ) {

_eyeFirstLightLayer = [ CAShapeLayer layer ] ;

CGPoint center = CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , CGRectGetHeight ( self . frame ) / 2 ) ;

UIBezierPath *path = [ UIBezierPath bezierPathWithArcCenter :center

radius :CGRectGetWidth ( self . frame ) * 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 = CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , CGRectGetHeight ( self . frame ) / 2 ) ;

UIBezierPath *path = [ UIBezierPath bezierPathWithArcCenter :center

radius :CGRectGetWidth ( self . frame ) * 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 = CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , CGRectGetHeight ( self . frame ) / 2 ) ;

UIBezierPath *path = [ UIBezierPath bezierPathWithArcCenter :center

radius :CGRectGetWidth ( self . frame ) * 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 = CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , CGRectGetHeight ( self . frame ) / 2 ) ;

UIBezierPath *path = [ UIBezierPath bezierPath ] ;

[ path moveToPoint :CGPointMake ( 0 , CGRectGetHeight ( self . frame ) / 2 ) ] ;

[ path addQuadCurveToPoint :CGPointMake ( CGRectGetWidth ( self . frame ) , CGRectGetHeight ( self . frame ) / 2 )

controlPoint :CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , center . y - center . y - 20 ) ] ;

_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 = CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , CGRectGetHeight ( self . frame ) / 2 ) ;

UIBezierPath *path = [ UIBezierPath bezierPath ] ;

[ path moveToPoint :CGPointMake ( 0 , CGRectGetHeight ( self . frame ) / 2 ) ] ;

[ path addQuadCurveToPoint :CGPointMake ( CGRectGetWidth ( self . frame ) , CGRectGetHeight ( self . frame ) / 2 )

controlPoint :CGPointMake ( CGRectGetWidth ( self . frame ) / 2 , center . y + center . y + 20 ) ] ;

_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 ;

}

而后更改一下某些属性的值，方便稍后的动画

- ( void ) setupAnimation {

self . eyeFirstLightLayer . lineWidth = 0.f ;

self . eyeSecondLightLayer . lineWidth = 0.f ;

self . eyeballLayer . opacity = 0.f ;

_bottomEyesocketLayer . strokeStart = 0.5f ;

_bottomEyesocketLayer . strokeEnd = 0.5f ;

_topEyesocketLayer . strokeStart = 0.5f ;

_topEyesocketLayer . strokeEnd = 0.5f ;

}

最后根据 UIScrollView 的 contentOffset 来控制各类属性，办法较笨，但管用。

- ( void ) animationWith : ( CGFloat ) y {

CGFloat flag = self . frame . origin . y * 2.f - 20.f ;

if ( y < flag ) {

if ( self . eyeFirstLightLayer . lineWidth < 5.f ) {

self . eyeFirstLightLayer . lineWidth += 1.f ;

self . eyeSecondLightLayer . lineWidth += 1.f ;

}

if ( y < flag - 20 ) {

if ( self . eyeballLayer . opacity <= 1.0f ) {

self . eyeballLayer . opacity += 0.1f ;

}

if ( y < flag - 40 ) {

if ( self . topEyesocketLayer . strokeEnd < 1.f && self . topEyesocketLayer . strokeStart > 0.f ) {

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 ;

}

最后

总之使用 UIbezierPath 和 CAShapeLayer 能够画出你想要的任何形状，没有它作不到，只有你想不到，搞定了它们你就能够轻松定制你想要的任何控件了。

问啊-一键呼叫程序员答题神器，牛人一对一服务，开发者编程必备官方网站：www.wenaaa.com

QQ群290551701 汇集不少互联网精英，技术总监，架构师，项目经理！开源技术研究，欢迎业内人士，大牛及新手有志于从事IT行业人员进入！