[swift] InterfaceBuilderで多角形のボタンを作る

#InterfaceBuilderで多角形のボタンを作る

PolygonButton.swift

import UIKit

@IBDesignable

class PolygonButton: UIButton {
    
    @IBInspectable public var numberOfCorner : Int = 4
    @IBInspectable public var buttonColor : UIColor = UIColor.black
    @IBInspectable public var rotation : Double = 0

    public let borderShape = CAShapeLayer()

    // Attributes Inspectorで設定した値を反映
    override func draw(_ rect: CGRect) {
        drawPolygon(numberOfCorner: numberOfCorner)
    }
    
    private func drawPolygon(numberOfCorner: Int) {
        let path = createPolygonPath(numberOfCorner: numberOfCorner)
        
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        
        self.layer.masksToBounds = true
        self.layer.mask = mask
        
        borderShape.path = path.cgPath
        borderShape.lineWidth = 1.0
        borderShape.strokeColor = buttonColor.cgColor
        borderShape.fillColor = buttonColor.cgColor
        self.layer.insertSublayer(borderShape, at: 0)
    }
    
    private func createPolygonPath(numberOfCorner:Int) -> UIBezierPath {
        let path = UIBezierPath()
        
        let center_x = self.center.x - self.frame.origin.x
        let center_y = self.center.y - self.frame.origin.y
        
        let rot = rotation * M_PI / 180
        
        for i in 0..<numberOfCorner {
            let rad = rot + M_PI * Double(i) * 2.0 / Double(numberOfCorner) - M_PI_2
            let drawPoint:CGPoint =
                CGPoint(x: center_x + self.frame.width/2 * CGFloat(cos(rad)) ,
                        y: center_y - self.frame.height/2 * CGFloat(sin(rad)) )
            if i==0 {
                path.move(to: drawPoint)
            } else {
                path.addLine(to: drawPoint)
            }
        }
        path.close()
        return path
    }
    
//余白部分のタッチは無効にする
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        if !createPolygonPath(numberOfCorner:numberOfCorner).contains(point) {
            // タッチ領域外
            return nil
        } else {
            print("タッチ")
            return super.hitTest(point, with: event)
        }
    }
    
}

UIButtonのクラスをPolygonButtonに変更。
余白部分のタッチの無効化についてはこちらを参考にさせて頂きました。