0
votes

I have a UIView created programmatically like that:

    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)

I need to add (again programmatically) 5 subViews to this UIView. I'm struggling in finding the coordinates for the anchor point of the subViews.

Thinking into Degrees, my circled superView will have to be split into 72° each equal pieces and the coordinates of the border will have to be the anchor point of my subViews.

Something like this: enter image description here

2
See stackoverflow.com/questions/839899/… for calculating positions on a circle for a given angle.Gerriet

2 Answers

2
votes

Like this (starting at the top and going clockwise):

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)")
}
0
votes

If anyone looking for js scripts.

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>