objective-c - 使用Core Graphics在Objective-C(IOS)中绘制角度/角度/"Conical"/"Arcing"渐变

Question

我正在尝试绘制一个“圆锥形”/“弧形”渐变(我不知道什么才是正确的术语)(Photoshop 称它为“角度”渐变——你的好邻居 stackoverflow editor) 使用 Objective-C (IOS)，与下面的图像非常相似 thread .

在谷歌搜索和互联网搜索无果后，我决定在这里寻求帮助。

关于我正在尝试做的事情的一些背景知识。我的目标是创建一个自定义 UIView，它是圆形进度条，基本上是一个环，有点类似于 TweetBot iPhone 应用程序中的事件指示器(当您拖动刷新时显示，可以在操作中看到 here，视频中大约 17-18 秒，在 iPhone 屏幕上方)。我希望进度指示器(圆环的填充)是一个简单的两种颜色渐变，可以通过编程方式设置，并且 View 可以调整大小。

用“跟随”环弧的渐变填充环形状是我被卡住的地方。我通过谷歌搜索、阅读 Apple 关于渐变的 Core Graphics 文档和搜索 SO 得到的答案是关于径向渐变或线性/轴向渐变，这不是我想要实现的。

上面链接的线程建议使用预制图像，但这不是一个选项，因为渐变的颜色应该是可设置的， View 应该是可调整大小的，并且进度条的填充并不总是 100% 满显然(这将是渐变的状态，如上面线程中的图片所示)。

我想出的唯一解决方案是“手动”绘制渐变，因此无需使用 CGGradientRef，在圆形路径中用单一纯色填充裁剪小片渐变.我不知道当条形图被动画化时它的表现究竟如何，它不应该那么糟糕，但它可能是一个问题。

所以我的第一个问题:

在 Objective-C (IOS) 中绘制圆锥形/弧形渐变是否有比我提出的解决方案更简单/不同的解决方案？

第二个问题:

如果我必须使用我想出的解决方案在我的 View 中手动绘制渐变，我如何确定或计算(如果可能的话)每个颜色“切片”的值(HEX 或 RGBA) "我尝试绘制的渐变，如下图所示。

(无法链接图片)gradient slice illustration

Answer 1

在我看来像是像素着色器的工作。我记得看过一个模拟雷达扫描的 Quartz Composer 示例，它使用像素着色器来产生您描述的效果。

编辑:

找到了。此着色器由 Peter Graffignino 编写:

kernel vec4 radarSweep(sampler image, __color color1,__color color2, float angle, vec4 rect)
{
    vec4 val = sample(image, samplerCoord(image));
    vec2 locCart = destCoord();
    float theta, r, frac, angleDist;

    locCart.x = (locCart.x - rect.z/2.0) / (rect.z/2.0);
    locCart.y = (locCart.y - rect.w/2.0) / (rect.w/2.0);
    // locCart is now normalized
    theta = degrees(atan(locCart.y, locCart.x));
    theta = (theta < 0.0) ? theta + 360.0 : theta;
    r = length(locCart);
    angleDist = theta - angle;
    angleDist = (angleDist < 0.0) ? angleDist + 360.0 : angleDist;
    frac = 1.0 - angleDist/360.0;
    // sum up 3 decaying phosphors with different time constants
    val = val*exp2(-frac/.005) + (val+.1)*exp2(-frac/.25)*color1 + val*exp2(-frac/.021)*color2;
    val = r > 1.0 ? vec4(0.0, 0.0,0.0,0.0) : val; // constrain to circle
    return val;
}