iOS：抗锯齿失败（CALayer 中的 PNG）

Question

我试图在屏幕上绘制此图像：

这是代码：

        CALayer* dullLayer = [CALayer layer];
        {                
            dullLayer.frame = CGRectMake(0,0,BUTTON_SIZE,BUTTON_SIZE);

            dullLayer.position = CGPointFromPoint2D( btnCenter );

            dullLayer.opacity = topQuadrant ? 1.0 : 0.5;


            [wheelLayer addSublayer: dullLayer];
        }


        UIImage* test = [UIImage imageNamed: @"OuterButton_Dull.png"];

        dullLayer.contents = (id) [test CGImage];

这就是我得到的：

给出了什么？为什么边缘如此锯齿？将此与以完全相同的方式合成到屏幕上的罗马数字图像进行对比。

我已经尝试过

            dullLayer.edgeAntialiasingMask = 0x0f; // binary 1111

但没有成功。

编辑： http://lists.apple.com/archives/可可-dev/2008/Feb/msg02070.html

Answer 1

如果您发布的结果图像与屏幕上显示的大小相同，那么您使用的图像太大了。 PNG 图像不是矢量图像，因此缩小它总会产生一些锯齿；规模越小，情况就越糟糕。在这种情况下，抗锯齿效果有限。

您在数字图像中看不到它的事实部分是因为它不像其他图像那样包含任何精细的高对比度线条，部分原因可能是您使用了较小的图像。

如果您将原始图像作为矢量图像，请尝试将其缩小到正确的尺寸，然后再将其转换为 PNG。如果您的应用程序中的其他地方需要更高分辨率的版本，请考虑创建多个 PNG，每个 PNG 具有不同的分辨率。

如果您没有原始图像作为矢量图像，您应该尝试寻找替代图像。网络上有一些免费剪贴画文件的好来源，例如 http://www.openclipart.org/ 或 http://www.clker.com/。

Answer 2

我刚刚就此发表了一篇文章： http://kellenstyler.com/?p=1360

有如果您通过代码添加图像，您可以做一些事情以及一些可以让您清理得更多的技巧。

看看以下代码中的任何内容是否有帮助：

UIImage * img =[UIImage imageWithData:[NSData dataWithContentsOfFile:[[[NSBundle mainBundle ] resourcePath ] stringByAppendingPathComponent:@"AliasImage.png" ] ] ];
CGRect imageRect = CGRectMake( 0 , 0 , img.size.width + 4 , img.size.height + 4 );
UIGraphicsBeginImageContext( imageRect.size );
[img drawInRect:CGRectMake( imageRect.origin.x + 2 , imageRect.origin.y + 2 , imageRect.size.width - 4 , imageRect.size.height - 4 ) ];
CGContextSetInterpolationQuality( UIGraphicsGetCurrentContext() , kCGInterpolationHigh );
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[aliasImage setImage:img ];

aliasImage.transform = CGAffineTransformScale(aliasImage.transform , 0.45 , 0.45 );
aliasImage.layer.shouldRasterize = YES;
aliasImage.layer.rasterizationScale = 0.45;
aliasImage.layer.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge;
aliasImage.clipsToBounds = NO;
aliasImage.layer.masksToBounds = NO;

Answer 3

戴斯蒙德已经做到了。

Apple 框架中的抗锯齿功能似乎仅适用于相邻像素。因此，如果将图像缩小 4 倍，像素 0,0 将针对像素 2,0 进行平均，即像素 1,0 被完全丢弃。所以如果你有锋利的边缘，这不会破坏它。

解决办法是反复将图像缩小50%，直到<50%。 2 倍所需尺寸。

如果我逐步缩小原始 600 x 600 图像，每次将其减半，并将结果显示到 256 x 256 CALayer 中，则会发生以下情况：

第三张图像实际上已缩小到目标尺寸以下。奇怪的是，进一步缩小（自动放大 75 -> 256 以便显示）实际上看起来最好。

所以实际上在这种情况下，解决方案是缩小它，直到它实际上小于所需的尺寸，然后让苹果的图形框架根据需要扩展它。