放肆的使用 UIBezierPath 和 CAShapeLayer 畫各種圖形

thwi1315 7年前發布 | 6K 次閱讀貝塞爾曲線 iOS開發移動開發

CAShapeLayer 是 CALayer 的子類，但是比 CALayer 更靈活，可以畫出各種圖形，當然，你也可以使用其他方式來畫，隨你。

雜談

在 CAShapeLayer 中，也可以像 CALayer 一樣指定它的 frame 來畫，就像這樣：

letlayer = CAShapeLayer()
layer.frame = CGRectMake(110, 100, 150, 100)
layer.backgroundColor = UIColor.blackColor().CGColor
 
view.layer.addSublayer(layer)

然后你就會得到如圖這樣的黑色矩形

但是，CAShapeLayer 有一個神奇的屬性 path 用這個屬性配合上 UIBezierPath 這個類就可以達到超神的效果。

UIBezierPath 顧名思義，這是用貝塞爾曲線的方式來構建一段弧線，你可以用任意條弧線來組成你想要的形狀，比如，你想用它來和上面一樣畫一個矩形，那就可以這樣子來做：

letpath = UIBezierPath(rect: CGRectMake(110, 100, 150, 100))
letlayer = CAShapeLayer()
layer.path = path.CGPath
layer.fillColor = UIColor.blackColor().CGColor
view.layer.addSublayer(layer)

要注意的是，這里就不要用 backgroundColor 這個屬性了，而要使用 fillColor 和 strokeColor ，前者代表設置這個 Layer 的填充色，后者代表設置它的邊框色

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

可以試一下把上面代碼設置顏色的部分改成這個樣子，那么運行程序的時候就會是這種樣子

玩一下UIBezierPath

在說回 UIBezierPath ，在 UIBezierPath 的 init 方法中，就有很多方便你畫各種圖形的方法，比如你可以畫一個帶圓角的圖形

letpath = UIBezierPath(roundedRect: CGRectMake(110, 100, 150, 100), cornerRadius: 50)
letlayer = CAShapeLayer()
layer.path = path.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.blackColor().CGColor

還可以指定起始角和半徑畫圓

letradius: CGFloat = 60.0
letstartAngle: CGFloat = 0.0
letendAngle: CGFloat = CGFloat(M_PI * 2)
letpath = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
letlayer = CAShapeLayer()
layer.path = path.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.blackColor().CGColor

在這里涉及到角度的問題，起始角和結束角，這里的角度使使用弧度制來表示，這里我收藏了一張圖片，以方便參考

怎么畫曲線

貝塞爾曲線的畫法是由起點、終點、控制點三個參數來畫的，為了解釋清楚這個點，我寫了幾行代碼來解釋它

letstartPoint = CGPointMake(50, 300)
letendPoint = CGPointMake(300, 300)
letcontrolPoint = CGPointMake(170, 200)
 
letlayer1 = CALayer()
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5)
layer1.backgroundColor = UIColor.redColor().CGColor
 
letlayer2 = CALayer()
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5)
layer2.backgroundColor = UIColor.redColor().CGColor
 
letlayer3 = CALayer()
layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5)
layer3.backgroundColor = UIColor.redColor().CGColor
 
letpath = UIBezierPath()
letlayer = 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 funcanimation1() {
        letanimation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2
        layer.addAnimation(animation, forKey: "")
    }
 
    private funcanimation2() {
        layer.strokeStart = 0.5
        layer.strokeEnd = 0.5
 
        letanimation = CABasicAnimation(keyPath: "strokeStart")
        animation.fromValue = 0.5
        animation.toValue = 0
        animation.duration = 2
 
        letanimation2 = CABasicAnimation(keyPath: "strokeEnd")
        animation2.fromValue = 0.5
        animation2.toValue = 1
        animation2.duration = 2
 
        layer.addAnimation(animation, forKey: "")
        layer.addAnimation(animation2, forKey: "")
    }
 
    private funcanimation3() {
        letanimation = CABasicAnimation(keyPath: "lineWidth")
        animation.fromValue = 1
        animation.toValue = 10
        animation.duration = 2
        layer.addAnimation(animation, forKey: "")
    }

應用一下

前一陣子在仿時光網這個APP，其中有一個Layer的形狀很怪異，是這樣的

很明顯它可以用 CAShapeLayer + UIBezierPath 來做，思路大概是這樣，先移動到左上方的位置，然后向下劃線，然后往右劃線，然后往上劃線，還剩一個蓋子，這個蓋子就用一個控制點控制曲率，非常簡單，代碼如下

letfinalSize = CGSizeMake(CGRectGetWidth(view.frame), 400)
letlayerHeight = finalSize.height * 0.2
letlayer = CAShapeLayer()
letbezier = 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 = [CAShapeLayerlayer];
        CGPointcenter = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter: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 = [UIColorblackColor].CGColor;
        _eyeFirstLightLayer.lineWidth = 5.f;
        _eyeFirstLightLayer.path = path.CGPath;
        _eyeFirstLightLayer.fillColor = [UIColorclearColor].CGColor;
        _eyeFirstLightLayer.strokeColor = [UIColorwhiteColor].CGColor;
    }
    return _eyeFirstLightLayer;
}
 
- (CAShapeLayer *)eyeSecondLightLayer {
    if (!_eyeSecondLightLayer) {
        _eyeSecondLightLayer = [CAShapeLayerlayer];
        CGPointcenter = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter: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 = [UIColorblackColor].CGColor;
        _eyeSecondLightLayer.lineWidth = 5.f;
        _eyeSecondLightLayer.path = path.CGPath;
        _eyeSecondLightLayer.fillColor = [UIColorclearColor].CGColor;
        _eyeSecondLightLayer.strokeColor = [UIColorwhiteColor].CGColor;
 
    }
    return _eyeSecondLightLayer;
}
 
- (CAShapeLayer *)eyeballLayer {
    if (!_eyeballLayer) {
        _eyeballLayer = [CAShapeLayerlayer];
        CGPointcenter = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter: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 = [UIColorblackColor].CGColor;
        _eyeballLayer.lineWidth = 1.f;
        _eyeballLayer.path = path.CGPath;
        _eyeballLayer.fillColor = [UIColorclearColor].CGColor;
        _eyeballLayer.strokeColor = [UIColorwhiteColor].CGColor;
        _eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
 
    }
    return _eyeballLayer;
}
 
- (CAShapeLayer *)topEyesocketLayer {
    if (!_topEyesocketLayer) {
        _topEyesocketLayer = [CAShapeLayerlayer];
        CGPointcenter = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        UIBezierPath *path = [UIBezierPathbezierPath];
        [pathmoveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
        [pathaddQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
                    controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y - center.y - 20)];
        _topEyesocketLayer.borderColor = [UIColorblackColor].CGColor;
        _topEyesocketLayer.lineWidth = 1.f;
        _topEyesocketLayer.path = path.CGPath;
        _topEyesocketLayer.fillColor = [UIColorclearColor].CGColor;
        _topEyesocketLayer.strokeColor = [UIColorwhiteColor].CGColor;
    }
    return _topEyesocketLayer;
}
 
- (CAShapeLayer *)bottomEyesocketLayer {
    if (!_bottomEyesocketLayer) {
        _bottomEyesocketLayer = [CAShapeLayerlayer];
        CGPointcenter = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        UIBezierPath *path = [UIBezierPathbezierPath];
        [pathmoveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
        [pathaddQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
                    controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y + center.y + 20)];
        _bottomEyesocketLayer.borderColor = [UIColorblackColor].CGColor;
        _bottomEyesocketLayer.lineWidth = 1.f;
        _bottomEyesocketLayer.path = path.CGPath;
        _bottomEyesocketLayer.fillColor = [UIColorclearColor].CGColor;
        _bottomEyesocketLayer.strokeColor = [UIColorwhiteColor].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 {
    CGFloatflag = self.frame.origin.y * 2.f - 20.f;
    if (y  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  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 可以畫出你想要的任何形狀，沒有它做不到，只有你想不到，搞定了它們你就可以輕松定制你想要的任何控件了。

微信Demo

代碼

https://github.com/J0HDev/WXVideo

來自：http://ios.jobbole.com/92213/

本文由用戶 thwi1315 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1483234120565.html

貝塞爾曲線 iOS開發移動開發

放肆的使用 UIBezierPath 和 CAShapeLayer 畫各種圖形

雜談

玩一下UIBezierPath

怎么畫曲線

再來說說 CAShapeLayer

應用一下

最后

微信Demo

相關經驗

相關資訊

相關文檔

目錄