如何在圆环的中心点周围绘制圆形按钮？

Question

我试图在这样的圆环中绘制圆形按钮。

我有6个UI按钮，它们的转角半径均为360度，我想在Swift中做的就是将它们均匀地绘制在中央按钮/点周围，就像上图所示。每个圆圈与其邻居之间的距离相等。实现此功能的最佳方法是什么？我应该先创建贝塞尔曲线，然后使用数学方法在所述曲线周围绘制按钮，还是有其他建议？

一个侧面说明是，我不需要任何形式的放射状菜单，不需要动画。我只是想以上述格式绘制现有的UI按钮。

谢谢！

Answer 1

我建议使用数学（三角学）来计算距中心按钮的水平和垂直偏移，然后使用布局锚点定位按钮。

这是一个自包含的示例：

str

注释：

• 如果不需要中央按钮，只需在class ViewController: UIViewController { func createButton(size: CGFloat) -> UIButton { let button = UIButton(type: .custom) button.backgroundColor = .red button.translatesAutoresizingMaskIntoConstraints = false button.widthAnchor.constraint(equalToConstant: size).isActive = true button.heightAnchor.constraint(equalToConstant: size).isActive = true button.layer.cornerRadius = size / 2 return button } func setUpButtons(count: Int, around center: UIView, radius: CGFloat) { // compute angular separation of each button let degrees = 360 / CGFloat(count) for i in 0 ..< count { let button = createButton(size: 50) self.view.addSubview(button) // use trig to compute offsets from center button let hOffset = radius * cos(CGFloat(i) * degrees * .pi / 180) let vOffset = radius * sin(CGFloat(i) * degrees * .pi / 180) // set new button's center relative to the center button's // center using centerX and centerY anchors and offsets button.centerXAnchor.constraint(equalTo: center.centerXAnchor, constant: hOffset).isActive = true button.centerYAnchor.constraint(equalTo: center.centerYAnchor, constant: vOffset).isActive = true } } override func viewDidLoad() { super.viewDidLoad() let centerButton = createButton(size: 50) self.view.addSubview(centerButton) // use anchors to place center button in the center of the screen centerButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true centerButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true setUpButtons(count: 6, around: centerButton, radius: 100) } } 周围设置按钮即可：

  self.view

  或在任意点附近：

  setupButtons(count: 6, around: self.view, radius: 100)
  

• 使用let point = CGPoint(x: 180, y: 300) let centerView = UIView(frame: CGRect(origin: point, size: CGSize.zero)) self.view.addSubview(centerView) setUpButtons(count: 6, around: centerView, radius: 140) 作为中心而不是点更加灵活，因为您可以动态地移动UIView，随后将出现按钮。

---

它在模拟器中运行：

Answer 2

您不需要贝塞尔路径，只需一点计算即可。

我不是数学天才，所以我选择了already answered question并将其更改为我的需要。

func place(buttons: [UIView], around center: CGPoint, radius: CGFloat) {
    var currentAngle: CGFloat = 0
    let buttonAngle: CGFloat = (CGFloat(360 / buttons.count)) * .pi / 180

    for button in buttons {
        let buttonCenter = CGPoint(x: center.x + cos(currentAngle) * radius, y: center.y + sin(currentAngle) * radius)

        // (1)
        //button.transform = CGAffineTransform(rotationAngle: currentAngle)

        // (2)
        //view.addSubview(button)

        button.center = buttonCenter
        currentAngle += buttonAngle
    }
}

使用一个UIView数组，因此您很灵活。如果要从代码中添加按钮，只需取消注释（1）。如果希望按钮根据其围绕中心的旋转而旋转，请取消注释（2）。

顺便说一句，不必为圆形按钮添加360度角半径。请阅读文档here。

编码愉快！