将圆形 UIView 拆分为 5 个等角块答案

【问题标题】：Split a circular UIView into 5 equal angle pieces将圆形 UIView 拆分为 5 个等角块
【发布时间】：2017-10-30 16:00:29
【问题描述】：

我有一个像这样以编程方式创建的 UIView：

    forecastWeatherWheel.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.1)
    forecastWeatherWheel.frame = CGRect(x: -(dailyWeatherContainer.frame.width + 100)/2,
                                        y: self.view.bounds.height/2 - ((dailyWeatherContainer.frame.height + 100)/2),
                                        width: dailyWeatherContainer.frame.width + 100,
                                        height: dailyWeatherContainer.frame.height + 100)
    forecastWeatherWheel.layer.cornerRadius = forecastWeatherWheel.bounds.size.width/2
    forecastWeatherWheel.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(forecastWeatherWheel)

我需要（再次以编程方式）向此 UIView 添加 5 个子视图。我正在努力寻找子视图锚点的坐标。

考虑到度数，我的带圆圈的 superView 必须被分成 72° 每个相等的部分，并且边框的坐标必须是我的 subViews 的锚点。

类似这样的：

【问题讨论】：

请参阅stackoverflow.com/questions/839899/… 以计算给定角度的圆上的位置。

标签： uiview swift3 coordinates addsubview round-rect

【解决方案1】：

像这样（从顶部开始顺时针方向）：

let radius: Double = 100
let cx: Double = 0
let cy: Double = 0
for deg in stride(from: 90, to: -269, by: -72) {
    let a = Double(deg)*M_PI/180
    let x = cx + radius * cos(a)
    let y = cy + radius * sin(a)
    print("Angle \(a): \(x), \(y)")
}

【讨论】：

超级！我是三角函数的废话:-D 非常感谢！
不客气 :-) 如果不是很明显：cx/cy 是中心坐标，对于圆上不同数量的位置，您可以使用 -360/n 而不是 -72。跨度>
一个愚蠢的问题：半径会是我的 superView 圆周吗？
周长 = 2 * pi * 半径

【解决方案2】：

如果有人在寻找 js 脚本。

let radius = 460/2;
let cx = radius;
let cy = radius;


$(".ar__creatCircle .ar__each_circles").each(function(i){
  let a = 72*i *Math.PI/180
  let x = cx + radius * Math.cos(a);
  let y = cy + radius * Math.sin(a);
  $(this).css({
    left: x+"px",
    bottom: y+"px",
  })
});

  .ar__creatCircle {
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 1px dashed #000;
    /* -webkit-transition: all cubic-bezier(0.35, 0.84, 0.57, 1.04) 300ms;
    transition: all cubic-bezier(0.35, 0.84, 0.57, 1.04) 300ms; */
    z-index: 9;
  }
    
  .ar__each_circles {
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50%;
    background: #54c970;
    position: absolute;
    z-index: 2;
    min-width: 30px;
    min-height: 30px;
    transform: translate(-50%, 50%);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ar__creatCircle" style="transform: rotate(0deg);">
  <div class="ar_circle_innr" >
      <div class="ar__each_circles">         
      </div>
      <div class="ar__each_circles">
          
      </div>
      <div class="ar__each_circles" >
         
      </div>
      <div class="ar__each_circles"  >
         
      </div>
      <div class="ar__each_circles"  >       
      </div>
  </div>

</div>

【讨论】：