Swift - 在UIView上使用多条子路径绘制图形

2015-11-19 发布：hangge 阅读：2063

（本文代码已升级至Swift3）

如果想要绘制比较复杂的图形，只使用一条贝塞尔路径可能不好实现。这时可以将多条子路径进行合并来实现。

1，下面是使用多条子路径样例

下面将圆形子路径和圆角矩形子路径进行合并。

2，效果图如下：

3，代码如下：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let viewRect = CGRect(x: 50, y: 50, width: 100, height: 100)
        let view1 = MyCanvas(frame: viewRect)
        self.view.addSubview(view1)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

class MyCanvas: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        //设置背景色为透明，否则是黑色背景
        self.backgroundColor = UIColor.clear
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        //为两个组成部分定义矩形
        let squareRect = self.bounds.insetBy(dx: self.bounds.size.width * 0.05,
                                             dy: self.bounds.size.height * 0.45)
        
        let circleRect = self.bounds.insetBy(dx: self.bounds.size.width * 0.3,
                                             dy: self.bounds.size.height * 0.3)
        
        //创建一条空Bezier路径作为主路径
        let bezierPath = UIBezierPath()
        
        //创建子路径
        let circlePath = UIBezierPath(ovalIn: circleRect)
        let squarePath = UIBezierPath(roundedRect: squareRect, cornerRadius: 20)
        
        //将它们添加到主路径
        bezierPath.append(circlePath)
        bezierPath.append(squarePath)
        
        //设定颜色，并绘制它们
        UIColor.green.setFill()
        UIColor.black.setStroke()
        bezierPath.fill()
        //bezierPath.stroke()
    }
}