正多边形按钮--可圆角可旋转可边框

前言

image.png

要实现如图片中左侧的正六边形按钮，其中要有边框以及角的弧度。由于以前做过CALayer相关的功能，自然想起利用CALayer绘制path来实现该功能。

根据最大半径计算各顶点坐标

2460711-1410c2a76ad83148.png

先确定按钮的size得出最大r值，然后按照这个模式得出每个点相对于按钮的坐标，使用UIBezierPath绘制path得到最后的图样。按照这样的逻辑确实可以做出如UI展示的效果(先忽略圆角和边框)，但是因此会引发一个问题:这种代码是一种死代码。本着代码的可扩展性原则，在此封装了一个多边形按钮

弧度计算顶点坐标

• 首先进行一下逻辑分析，按照固定点坐标的做法会导致代码死板，因此换个思路进行设计: 使用角度的形式来设置对应点坐标。
• 以按钮的中心点centerPoint作为原点，按钮所在坐标系的x轴上点(r, 0)点作为绘制的起始点，依据顺时针方向依次计算每个点的坐标
• 根据规律可知对应弧度所表示的点的坐标的x值等于centerPoint.x + r * cos(弧度)，而y值等于centerPoint.y + r * sin(弧度) 该坐标既是多边形对应顶点的坐标

获取单个点的坐标

    private func vertexCoordinates(radius: CGFloat, angle: Double, offset: Double = 0) ->CGPoint {
        let centerPoint = CGPoint(x: bounds.width / 2, y: bounds.height / 2)
        let X = centerPoint.x + radius * (angle + offset).cosValue
        let Y = centerPoint.y + radius * (angle + offset).sinValue
        return CGPoint(x: X, y: Y)
    }

根据多边形的边数、最大半径以及偏移弧度获得多边形的每个顶点的坐标

    private func regularPolygonCoordinates(sides: Int, radius: CGFloat, offset: Double = 0) ->[CGPoint] {
        assert(sides >= 3, "多边形最少为3边")
        assert(radius > 0, "多边形半径必须大于0")
        var coordinates = [CGPoint]()
        for i in 0..

再进一步根据获得的各个顶点的坐标数组可以用UIBezierPath绘制图案

            let points = regularPolygonCoordinates(sides: style.sides, radius: r, offset: style.offset)

            for (index, point) in points.enumerated() {
                if index == 0 {
                    path.move(to: point)
                }else {
                    path.addLine(to: point)
                }
            }
            path.close()

到现在只是得到了完整的path还需要设置到layer上才能变相的按该路径裁剪按钮

    private func hexagon() {
        var Max_R: CGFloat
        if style.Max_Radius == 0 {
            let W = bounds.width
            let H = bounds.height
            assert(W > 0 && H > 0, "此时宽或者高没有值")
            Max_R = H > W ? W / 2 : H / 2
        }else {
            Max_R = style.Max_Radius
        }
        
        assert(Max_R > style.borderWidth, "多边形最大半径不能小于边界宽度")
        
        for (index, layer) in self.layer.sublayers!.enumerated() {
            if index != 0 {
                layer.removeFromSuperlayer()
            }
        }
        
        let topLayer = CAShapeLayer()
        topLayer.path = drawPath(radius: Max_R)
        topLayer.strokeColor = style.borderColor.cgColor
        topLayer.fillColor = UIColor.clear.cgColor
        topLayer.lineWidth = style.borderWidth
        let bottomLayer = CAShapeLayer()
        bottomLayer.path = drawPath(radius: Max_R)
        
        self.layer.mask = bottomLayer
        self.layer.insertSublayer(topLayer, above: bottomLayer)
    }

然后在layoutSubviews()方法中调用该绘制方法即可获得对应图形的按钮

override func layoutSubviews() {
        super.layoutSubviews()
        
        hexagon()
    }

圆角的设置

我这里的圆角采用的不是平时按钮的cornerRadius，而是采用的贝塞尔曲线的形式设置圆角，即根据两个定点以及一个控制点来绘制一条有弧度的曲线，原因是多边形如果设置cornerRadius会导致曲率很大最后裁剪出的弧度十分难看(不认同的话欢迎指正)

A226DCFDDF69510054DD2C8A47A2CA48.jpg

如果把正多边形以中心点、顶点与邻近顶点组成的等边三角形视为一个子模块，选取贝塞尔曲线的固定两点其一为D点(另一点以AC边对称)与控制点C，则只需要计算出D点对应的坐标即可(C点坐标已知，r最大半径已知，CD长度自定义，多边形边数自定义)

• 首先需要计算出∠DAC角的弧度
• 然后计算出AD边的大小
• 根据普通正多边形各顶点坐标的规律计算出AD为R的多边形相对于原多边形偏移∠DAC角度的各顶点坐标

private func regularPolygonCoordinatesWithRoundedCorner(sides: Int, radius: CGFloat, offset: Double = 0) ->[CGPoint] {
        assert(sides >= 3, "多边形最少为3边")
        assert(radius > 0, "多边形半径必须大于0")
        let CAB = Double(360) / Double(sides) / Double(180) * Double.pi
        let EC = Double(radius * (CAB / 2).sinValue)
        let AE = Double(radius * (CAB / 2).cosValue)
        let ED = EC - style.filletDegree
        let EAD = atan(ED / AE)
        let DAC = CAB / 2 - EAD
        let newRadius = sqrt(pow(AE, 2) + pow(ED, 2))
        var coordinates = [CGPoint]()
        for i in 0..

通过上面的代码逻辑可以计算出有圆角的多边形的各关键点坐标，然后就只需要把这些关键点根据规律连接到一起。

let points = regularPolygonCoordinatesWithRoundedCorner(sides: style.sides, radius: r, offset: style.offset)
            var temPoint: CGPoint!
            for (index, point) in points.enumerated() {
                if index == 0 {
                    path.move(to: point)
                }else {
                    let remainder = index % 3
                    switch remainder {
                    case 0: 
                        path.addLine(to: point)
                    case 1: 
                        temPoint = point
                    case 2: 
                        path.addQuadCurve(to: point, controlPoint: temPoint)
                    default:
                        break
                    }
                }
            }
            path.close()

封装控制属性

class SYPolygonStyle {
    /// 是否可以圆角
    var roundedCornersEnable: Bool = false
    /// 圆角程度 - 值越大,角越平滑
    var filletDegree: Double = 5.0
    
    /// 边界宽度(边线的宽度)
    var borderWidth: CGFloat = 0.0
    /// 边界颜色
    var borderColor: UIColor = UIColor.gray
    
    /// 多边形最大半径 -- 如果不设置该值, 默认是按钮中可显示的最大多边形的半径
    var Max_Radius: CGFloat = 0.0
    
    /// 整个路径以按钮的中心点为中心按顺时针方向偏移的弧度(需要传入一个带π的弧度) -- 默认六边形顶点为水平方向, 如果设置该值为π/2则顶点为竖直方向
    var offset: Double = 0
    /// 多边形的边数 - 默认是正六边形
    var sides: Int = 6
}

当然，有了控制属性的类没有使用场景怎么行，只需要一个新的构造方法即可

init(frame: CGRect = CGRect.zero, style: SYPolygonStyle = SYPolygonStyle()) {
        self.style = style
        super.init(frame: frame)
    }

使用方法类似于下例:

        let style = SYPolygonStyle()
        style.filletDegree = 10
        style.borderWidth = 10
        style.borderColor = .orange
        style.roundedCornersEnable = true
        style.offset = Double.pi / 4
        style.sides = 5

        let liubianxing = SYPolygonButton(frame: CGRect.zero, style: style)
        liubianxing.setImage(UIImage.init(named: "zhbd_qq_icon"), for: .normal)
        liubianxing.setImage(UIImage.init(named: "zhbd_weibo_icon"), for: .selected)
        liubianxing.addTarget(self, action: #selector(btnClickAction(sender:)), for: .touchUpInside)
        view.addSubview(liubianxing)
        liubianxing.snp.makeConstraints { (make) in
            make.top.left.equalTo(100)
            make.width.height.equalTo(100)
        }

Demo https://github.com/githubOfGuShengYa/SYPolygonButton

---

谷胜亚初次编辑于2017年9月25日