Swift用UIBezierPath來畫圓角矩形、自定義多路徑圖形

最好的特點就是可以自定義路徑，設置圓角和描邊都很方便，以下為代碼和效果，均在playground中實現

1、首先實現一個圓角矩形，並對此路徑描邊，為其繪制一個輪廓。

//: Playground - noun: a place where people can play

import UIKit

class MyView : UIView{
    override func drawRect(rect: CGRect) {
        var pathRect = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(1, 1, 1, 1))
        
        var path = UIBezierPath(roundedRect: pathRect, cornerRadius: 10)
        
        path.lineWidth = 4
        
        UIColor.greenColor().setFill()
        UIColor.blackColor().setStroke()
        path.fill()
        path.stroke()
    }
}

let viewRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let myEmptyView = MyView(frame:viewRect)

　　

tips：所有繪制操作都是按照調用順序進行的。在本段代碼中，我在填充矩形后再對其進行描邊。如果交換對path.fill()和path.stroke()的調用順序，將會得到一個稍有不同的結果，綠色填充將會略微覆蓋黑色描邊，效果圖如下。

 

2、下面自定義一條路徑，確定幾個點，然后像畫筆一樣連線！

//: Playground - noun: a place where people can play

import UIKit

class MyView : UIView{
    override func drawRect(rect: CGRect) {
        var bezierPath = UIBezierPath()
        //創建一個矩形，它的所有邊都內縮5%
        var drawingRect = CGRectInset(self.bounds, self.bounds.size.width*0.05, self.bounds.size.height*0.05)
        
        //確定組成繪畫的點
        var topLeft = CGPointMake(CGRectGetMinX(drawingRect), CGRectGetMinY(drawingRect))
        var topRight = CGPointMake(CGRectGetMaxX(drawingRect), CGRectGetMinY(drawingRect))
        var bottomLeft = CGPointMake(CGRectGetMinX(drawingRect), CGRectGetMaxY(drawingRect))
        var bottomRight = CGPointMake(CGRectGetMaxX(drawingRect), CGRectGetMaxY(drawingRect))
        var center = CGPointMake(CGRectGetMidX(drawingRect), CGRectGetMinY(drawingRect))
        
        //開始繪制
        bezierPath.moveToPoint(topLeft)
        bezierPath.addLineToPoint(topRight)
        bezierPath.addLineToPoint(bottomLeft)
        bezierPath.addCurveToPoint(bottomRight, controlPoint1: center, controlPoint2: center)
        
        //使路徑閉合，結束繪制
        bezierPath.closePath()
        
        //設定顏色，並繪制它們
        UIColor.redColor().setFill()
        UIColor.blackColor().setStroke()
        
        bezierPath.fill()
        bezierPath.stroke()
    }
}

let viewRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let myEmptyView = MyView(frame:viewRect)

　

3、多條子路徑也可以。

//: Playground - noun: a place where people can play

import UIKit

class MyView : UIView{
    override func drawRect(rect: CGRect) {
        //創建一條空Bezier路徑
        let bezierPath = UIBezierPath()
        
        //為兩個組成部分定義矩形
        let squareRect = CGRectInset(rect, rect.size.width*0.45, rect.size.height*0.05)
        
        let circleRect = CGRectInset(rect, rect.size.width*0.3, rect.size.height*0.3)
        
        let cornerRadius : CGFloat = 20
        
        //創建路徑
        let circlePath = UIBezierPath(ovalInRect: circleRect)
        let squarePath = UIBezierPath(roundedRect: squareRect, cornerRadius: cornerRadius)
        
        //將它們添加到主路徑
        squarePath.appendPath(circlePath)
        bezierPath.appendPath(squarePath)
        
        //設定顏色並繪制它們
        UIColor.redColor().setFill()
        
        //繪制路徑
        bezierPath.fill()
    }
}

let viewRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let myEmptyView = MyView(frame:viewRect)

　　

以上就是UIBezierPath的基本用法，用好了將是繪制圖形的又一利器。