Question

我有一个以编程方式创建的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个子视图。我正在努力寻找subViews锚点的坐标。

思考度数，我的圆圈超视图必须分成72°，每个相等的部分，边框的坐标必须是我的子视图的锚点。

这样的事情：

Answer 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)")
}

Answer 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>

将圆形UIView分成5个相等的角度

2 个答案: