径向 CGGradient 中的粗糙色带答案

【问题标题】：Harsh colour banding in radial CGGradient径向 CGGradient 中的粗糙色带
【发布时间】：2017-07-08 02:36:44
【问题描述】：

CGContextDrawRadialGradient 在渐变的中心产生一个非常明显的“十字”：

代码（简化）：

- (void)drawRect:(NSRect)dirtyRect {
    CGContextRef context = [[NSGraphicsContext currentContext] graphicsPort];

    size_t numberOfGradientLocations = 2;
    CGFloat startRadius = 0.0f;
    CGFloat endRadius = 30.0f;
    CGPoint centre = CGPointMake(floorf(self.bounds.size.width / 2), floorf(self.bounds.size.height / 2));
    CGFloat gradientColours[8] = {0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f};
    CGFloat gradientLocations[2] = {0.0f, 1.0f};

    CGColorSpaceRef colourspace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colourspace, gradientColours, gradientLocations, numberOfGradientLocations);
    CGContextDrawRadialGradient(context, gradient, centre, startRadius, centre, endRadius, kCGGradientDrawsBeforeStartLocation);
}

这在 macOS 和 iOS 上都会发生。同时，同样的渐变在带有 CSS 的 WebKit 中也能完美呈现（所以这不是一些“显示不好”的问题）。

我做错了什么？有没有已知的解决方法？

【问题讨论】：

@matt，你的意思是它不可重现，还是在屏幕截图上不够明显？
后者可能是颜色不匹配。具有讽刺意味的是，截图在这方面并不是很擅长。
空间很好（我都试过了）。不过谢谢。

标签： ios objective-c macos core-graphics

【解决方案1】：

这是我在 iOS 上得到的；我使用 iPhone 7 Plus 模拟器 100% 以使每个像素都可见，并且看起来非常流畅：

编辑经过一些实验，我怀疑您看到了由点和像素之间的未对齐引起的莫尔效应。

【讨论】：

有趣的是，在模拟的 iPad Air 2 上，我非常接近这一点。但不是在 iPad 2 上。在 macOS 上也不是。
哦！您可能在谈论莫尔效应。
可能是淡入透明的效果。尝试从纯黑色变为纯白色，看看是否有帮助。也使用灰度色彩空间而不是 RGB。
没有 alpha 的黑白渐变渲染几乎相同。 DeviceGray 是我开始的地方（切换到 RGB，希望能解决它）——还是一样。
它看起来确实像莫尔条纹（因此是特定的交叉图案）。但是为什么只在 Quartz 中，而不在 WebKit 中呢？