如何通過使用UIBezierPath為Button創建特定的形狀，如下面的帶有Swift代碼的附加圖像所示？

Question

我嘗試了多種方法來繪制按鈕，如圖所示，但是我只能繪制六邊形。 無法如圖片所示繪制。 請幫助我如何繪制如圖所示。 謝謝

Answer 1

您可以使用UIBezierPath和CAShapeLayer進行此CAShapeLayer

創建一個UIButton子類，並覆蓋layoutSubviews() ，在該處您將更新路徑，將點與線連接起來。

這是您的起點：

class AngledButton: UIButton {

    var bPath = UIBezierPath()
    var theShapeLayer = CAShapeLayer()

    var fillColor: UIColor = UIColor.white
    var borderColor: UIColor = UIColor.gray

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {
        layer.addSublayer(theShapeLayer)
    }

    override func layoutSubviews() {

        super.layoutSubviews()

        let p1 = CGPoint.zero
        let p2 = CGPoint(x: bounds.width - bounds.height * 0.3, y: 0.0)
        let p3 = CGPoint(x: bounds.width, y: bounds.height * 0.5)
        let p4 = CGPoint(x: bounds.width - bounds.height * 0.3, y: bounds.height)
        let p5 = CGPoint(x: 0.0, y: bounds.height)

        bPath.move(to: p1)
        bPath.addLine(to: p2)
        bPath.addLine(to: p3)
        bPath.addLine(to: p4)
        bPath.addLine(to: p5)
        bPath.close()

        theShapeLayer.path = bPath.cgPath

        theShapeLayer.fillColor = self.fillColor.cgColor
        theShapeLayer.strokeColor = self.borderColor.cgColor

    }

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        // only allow tap *within* the bezier path
        if bPath.contains(point) {
            return self
        }
        return nil
    }

}

通過也覆蓋hitTest() ，只有在點擊位於貝塞爾曲線路徑區域內時，才會輕擊按鈕。 然后，您可以重疊按鈕，並且單擊右上角的水龍頭將“通過”下面的按鈕。

結果：

筆記：

• 您可以使此@IBDesignable成為Interface Builder中的布局
• 您需要使用Title Insets來獲得標題標簽以說明傾斜的邊緣
• 這只是一個起點，但應該可以助您一臂之力