如何使每个 UIView 的底部与圆相切，以便它们从中心辐射？

Question

我正在尝试找到一系列明暗矩形UIViews 的旋转角度，这些矩形UIViews 位于圆周上的常规点。圆上的每个点都计算为距中心的位移角，我尝试使用相同的角度旋转每个UIView，使其从中心辐射。但没想到会是这个样子。

我预计每个新UIView 从中心的位移角度与旋转角度相同。这个假设正确吗？如果是这样，我如何使每个UIView 的底部与圆相切，以便它们从中心辐射？

更新

如果有人在这里发现它有用，请更新我的原始代码。问题as explained by rmaddy已修复。

我已经包含了两个版本的转换语句和它们产生的旋转 UIView。左边的结果使用radians + arcStart + M_PI / 2.0，右边的结果使用radians + arcStart。

方法如下。

- (void)sprocket
{
CGRect  canvas                      = [UIScreen mainScreen].bounds;
CGPoint circleCentre                = CGPointMake((canvas.size.width)/2, (canvas.size.height)/2);

CGFloat width                       = 26.0f;
CGFloat height                      = 50.0f;

CGPoint miniViewCentre;

CGFloat circleRadius                = 90;
int miniViewCount                   = 16;

for (int i = 0; i < miniViewCount; i++)
{
    // to place the next view calculate angular displacement along an arc

    CGFloat circumference           = 2 * M_PI;
    CGFloat radians                 = circumference * i / miniViewCount;

    CGFloat arcStart                = M_PI + 1.25f; // start circle from this point in radians;

    miniViewCentre.x                = circleCentre.x + circleRadius * cos(radians + arcStart);
    miniViewCentre.y                = circleCentre.y + circleRadius * sin(radians + arcStart);

    CGPoint placeMiniView           = CGPointMake(miniViewCentre.x, miniViewCentre.y);

    CGRect swivellingFrame          = CGRectMake(placeMiniView.x, placeMiniView.y, width, height);
    UIView *miniView                = [[UIView alloc] initWithFrame:swivellingFrame];

    if ((i % 2) == 0)
    {
        miniView.backgroundColor    = [UIColor darkGrayColor];
    }
    else
    {
        miniView.backgroundColor    = [UIColor grayColor];
    }

    miniView.layer.borderWidth      = 1;
    miniView.layer.borderColor      = [UIColor blackColor].CGColor;
    miniView.layer.cornerRadius     = 3;
    miniView.clipsToBounds          = YES;
    miniView.layer.masksToBounds    = YES;
    miniView.alpha                  = 1.0;

    // using the same angle rotate the view around its centre

    miniView.transform              = CGAffineTransformRotate(miniView.transform, radians + arcStart  + M_PI / 2.0);

    [page1 addSubview:miniView];
   }

}

Answer 1

问题是您对每个 miniView 中心的计算是基于 radians 加上 arcStart 但每个 miniView 的变换仅基于 radians。

还要注意角度0 位于圆的3 点钟位置。您实际上想要 miniView 旋转 90°（或 π/2 弧度），以便矩形从圆“伸出”。

您需要进行两项小改动才能使您的代码正常工作：

将循环改为：

for (int i = 0; i < miniViewCount; i++)

并改变变换：

miniView.transform = CGAffineTransformRotate(miniView.transform, radians + arcStart + M_PI / 2.0);