Swift - 在UIView上使用自定义曲线绘制复杂图形（贝塞尔曲线）

2015-11-18 发布：hangge 阅读：5707

（本文代码已升级至Swift3）

有时我们需要绘制一个不规则路径的图形，里面可能包含直线或者曲线，这时就可以使用 UIBezierPath 来实现。

UIBezierPath 类可以表示任何能够用 Bezier 曲线定义的形状，我们可以创建自己的自定义曲线。完成操作后，可以像其他路径一样，使用所得到的 UIBezierPath 对象进行填充和描边。

1，下面演示使用UIBezierPath绘制一个不规则图形：

（1）画笔移动到矩形区域左上角

（2）从笔的当前位置向右上角的点画一条直线

（3）从笔的当前位置向左下角的点画一条直线

（4）从笔的当前位置向右下角画一条曲线，曲线弯曲程度的两个控制点是矩形区域的中点

（5）从笔的当前位置向左上角的点绘制一条直线，使路径闭合

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)
        
        //创建一个矩形，它的所有边都内缩5%
        let drawingRect = self.bounds.insetBy(dx: self.bounds.size.width * 0.05,
                                              dy: self.bounds.size.height * 0.05)
        
        //确定组成绘画的点
        let topLeft = CGPoint(x:drawingRect.minX, y: drawingRect.minY)
        let topRight = CGPoint(x:drawingRect.maxX, y:drawingRect.minY)
        let bottomRight = CGPoint(x:drawingRect.maxX, y:drawingRect.maxY)
        let bottomLeft = CGPoint(x:drawingRect.minX, y:drawingRect.maxY)
        let center = CGPoint(x:drawingRect.midX, y:drawingRect.midY)
        
        //创建一个贝塞尔路径
        let bezierPath = UIBezierPath()
        //开始绘制
        bezierPath.move(to: topLeft)
        bezierPath.addLine(to: topRight)
        bezierPath.addLine(to: bottomLeft)
        bezierPath.addCurve(to: bottomRight, controlPoint1: center, controlPoint2: center)
        //使路径闭合，结束绘制
        bezierPath.close()
        
        //设定颜色，并绘制它们
        UIColor.green.setFill()
        UIColor.black.setStroke()
        bezierPath.fill()
        bezierPath.stroke()
    }
}