CGContext中的椭圆径向渐变？答案

【问题标题】：Elliptical radial gradient in CGContext?CGContext中的椭圆径向渐变？
【发布时间】：2016-12-06 02:30:27
【问题描述】：

据我所知，您可以使用两种方法在CGContext 中绘制渐变，即drawLinearGradient 和drawRadialGradient。我正在寻找的是一种定义椭圆渐变的方法，我可以在其中定义x 和y 半径。

此功能在另一个环境中的示例 (SVG)。

<RadialGradient id="gradient" cx="50" cy="50" rx="20" ry="40" fx="150" fy="75">

drawRadialGradient 的现有声明如下。

func drawRadialGradient(_ gradient: CGGradient, 
            startCenter: CGPoint, 
            startRadius: CGFloat, 
              endCenter: CGPoint, 
              endRadius: CGFloat, 
                options: CGGradientDrawingOptions)

起始半径和结束半径都是标量值，因此您所能做的就是圆。如何在CGContext 中绘制椭圆渐变？

【问题讨论】：

标签： ios swift cgcontext

【解决方案1】：

您应该能够缩放上下文并使用 CGContextDrawRadialGradient()。如果按比例缩小，则应该没有伪影。以下是否有效？

CGContextRef context;
CGGradientRef gradient;
CGGradientDrawingOptions options;
CGPoint center;
CGFloat radiusX;
CGFloat radiusY;

CGFloat radius = MAX(radiusX, radiusY);
CGContextSaveGState(context);
// scale down by the smaller dimension, and translate so the center stays in place
if (radiusX < radiusY) {
    CGContextTranslateCTM(context, center.x - (center.x * (radiusX / radiusY)), 0);
    CGContextScaleCTM(context, radiusX / radiusY, 1.0);
}
else {
    CGContextTranslateCTM(context, 0, center.y - (center.y * (radiusY / radiusX)));
    CGContextScaleCTM(context, 1.0, radiusY / radiusX);
}
CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, options);
CGContextRestoreGState(context);

顺便说一句，如果您将CAGradientLayer 的type 属性设置为@"radial" 的未记录和私有值，我认为这大致就是这种行为。它以 startPoint 为中心，用 startPoint 和 endPoint 的差来确定 radiusX 和 radiusY 的值（即 endPoint 定义了渐变边界框的一个角，startPoint 是中心）。当您使起点和终点几乎相同时，它确实会出现奇怪的行为，因此那里可能发生的事情比我想象的要多（这可能是 Apple 从未费心将其公开的原因）。

【讨论】：

【解决方案2】：

我唯一能想到的就是在绘制渐变之前将具有不相等 x 和 y 比例因子的比例变换应用于您的上下文。这会使它变得不圆，应该变成椭圆形。

【讨论】：

根据变换进行缩放是不可选择的，因为它会添加工件。
如何将其放大然后缩小？

【解决方案3】：

没有“王道”。此工具不是内置的，因此您必须自己绘制每个像素。（可能有第三方库可以为您做到这一点。）

【讨论】：