iOS / Core-Animation：一圈重叠的12张卡片答案

【问题标题】：iOS / Core-Animation: 12 overlapping cards in a circleiOS / Core-Animation：一圈重叠的12张卡片
【发布时间】：2011-11-06 19:19:46
【问题描述】：

我正在尝试在圆圈中排列 12 个对象，使每个对象都与逆时针相邻的对象重叠。

类似这样的：

问题是，如果我只依赖绘图顺序，其中一个总是会完全在顶部，在这种情况下是 12 点钟的红色。

我尝试过使用

    {
        GlowButton* G = glowButton[ 0 ];

        float theta = 0.3;
        G.layer.transform = CATransform3DMakeRotation( theta, 0, 1, 0 );
    }

试图绕垂直轴旋转，从而将一侧塞到邻居后面，但这不起作用。

有人告诉我这是因为核心动画不支持深度测试。

有没有办法在不进入 GL 的情况下做到这一点？

【问题讨论】：

标签： ios core-animation transform calayer depth-testing

【解决方案1】：

我可以想到两种方法来避免这个问题：

将每个对象分成两半。首先绘制相邻对象后面的那一半，然后将这些一半绘制在相邻对象的顶部。
使用剪切区域并分两步绘制圆形。第一个剪切区域将绘图限制在图片的左半部分。第二个剪辑区域被限制在右半边。每次，您绘制所有对象。但是您必须从底部或顶部元素开始。

我不太确定你在用 Core Animation 做什么，所以其中一种方法可能更适合或需要一些调整。

【讨论】：

谢谢！我对此做了一个变体，效果很好。

【解决方案2】：

我现在已经完美地工作了。不用去 GL，我很欣慰。

我基本上画了第一个（红色——在 12 点钟方向）宝石，带有一个只允许右半部分可见的蒙版。

然后我画剩下的 11 个。

然后我再次绘制第一个，这次将蒙版设置为仅显示左半部分。

    for( int i = 0; i <= 12; i++ )
    {
        for ( int dullGlow = 0; dullGlow <= 1; dullGlow++ )
        {
            BOOL isDull = ( dullGlow == 0 ) ? YES : NO;

            CALayer* L = [CALayer layer];

            CGImageRef dullImage = [ButtonImages dullImage: i % 12];
            CGImageRef glowImage = [ButtonImages glowImage: i % 12];

            L.contents = (id) ( isDull ? dullImage : glowImage );

            L.bounds = CGRectMake( 0, 0, buttonSize, buttonSize ); 

            L.opacity = ( isDull ? 1.0 : 0.0 );

            if( i == 0  ||  i == 12 )
            {
                CGFloat halfSize = buttonSize / 2.0;

                CGRect keepLeftHalf = CGRectMake( 0, 0, 
                                                 halfSize, buttonSize );

                CGRect keepRightHalf = CGRectMake( halfSize,  0, 
                                                  halfSize, buttonSize );

                CALayer* maskLayer = [CALayer layer];
                maskLayer.frame = ( i == 0 ) ? keepRightHalf : keepLeftHalf;
                maskLayer.backgroundColor = [UIColor greenColor].CGColor;

                maskLayer.edgeAntialiasingMask = 0x0;

                [L setMask: maskLayer];
            }

            [self.layer addSublayer: L];

            layers[ dullGlow ] [ i ] = L;

        } // dullGlow

    } // i

将 edgeAntialiasingMask 的 4 个最低有效位设置为所有 4 个边缘上的 0 个抗锯齿项 - 没有这条线，我得到了一个接缝。

如果有人能解释屏蔽过程的机制，我将不胜感激 - 尽管我得到了正确的结果，但我是通过反复试验做到的。

请注意，蒙版设置为（不透明）绿色，并且蒙版区域是可见的——即第一遍绿色矩形覆盖了图像的右半部分，正是这种爱得到了显示出来。

我猜测对于每个像素，它是将图层像素 RGBA 乘以掩码像素上的 alpha 值

【讨论】：