博客> 一个好用的多边形控件
一个好用的多边形控件
2017-10-19 17:22 评论:0 阅读:1193 谷慢慢
ios swift 圆角 自定义控件 多边形

前言

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..<sides xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> 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边的大小
  • 根据普通正多边形各顶点坐标的规律计算出ADR的多边形相对于原多边形偏移∠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..<sides xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>封装控制属性

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日`
收藏
2
sina weixin mail 回到顶部