iphone - 如何使用 Core Graphics/iPhone 绘制渐变线(淡入/淡出)？

Question

我知道如何画一条简单的线:

CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x2, y2);
CGContextStrokePath(context);

我知道如何制作渐变矩形，例如:

CGColorSpaceRef myColorspace=CGColorSpaceCreateDeviceRGB();
size_t num_locations = 2;
CGFloat locations[2] = { 1.0, 0.0 };
CGFloat components[8] = { 0.0, 0.0, 0.0, 1.0,    1.0, 1.0, 1.0, 1.0 };

CGGradientRef myGradient = CGGradientCreateWithColorComponents(myColorspace, components, locations, num_locations);

CGPoint myStartPoint, myEndPoint;
myStartPoint.x = 0.0;
myStartPoint.y = 0.0;
myEndPoint.x = 0.0;
myEndPoint.y = 10.0;
CGContextDrawLinearGradient (context, myGradient, myStartPoint, myEndPoint, 0);

但是我怎样才能画一 strip 有渐变的线，例如从黑色淡入白色(也许另一侧也淡出黑色)？

Answer 1

可以使用渐变或任何其他填充效果(例如图案)来描边任意路径。

正如您所发现的，描边路径不会使用当前渐变进行渲染。只有填充路径才使用渐变(当您将它们转换为剪辑然后绘制渐变时)。

但是，Core Graphics 有一个非常酷的程序CGContextReplacePathWithStrokedPath，它将改变您想要描边的路径进入填充时等效的路径。

在幕后，CGContextReplacePathWithStrokedPath 在您的描边路径周围构建一个边缘多边形，并将其切换为您定义的路径。我推测 Core Graphics 渲染引擎可能在调用 CGContextStrokePath 时无论如何执行此操作。

这是 Apple 的相关文档:

Quartz creates a stroked path using the parameters of the current graphics context. The new path is created so that filling it draws the same pixels as stroking the original path. You can use this path in the same way you use the path of any context. For example, you can clip to the stroked version of a path by calling this function followed by a call to the function CGContextClip.

因此，将您的路径转换为可以填充的内容，将其转换为剪辑，然后然后绘制渐变。效果就像您用渐变描画了路径一样。

代码

它看起来像这样......

    // Get the current graphics context.
    //
    const CGContextRef context = UIGraphicsGetCurrentContext();

    // Define your stroked path. 
    //
    // You can set up **anything** you like here.
    //
    CGContextAddRect(context, yourRectToStrokeWithAGradient);

    // Set up any stroking parameters like line.
    //
    // I'm setting width. You could also set up a dashed stroke
    // pattern, or whatever you like.
    //
    CGContextSetLineWidth(context, 1);

    // Use the magical call.
    //
    // It turns your _stroked_ path in to a **fillable** one.
    //
    CGContextReplacePathWithStrokedPath(context);

    // Use the current _fillable_ path in to define a clipping region.
    //
    CGContextClip(context);

    // Draw the gradient.
    //
    // The gradient will be clipped to your original path.
    // You could use other fill effects like patterns here.
    //
    CGContextDrawLinearGradient(
      context, 
      yourGradient, 
      gradientTop, 
      gradientBottom, 
      0
    );

进一步说明

值得强调上面文档的一部分:

Quartz creates a stroked path using the parameters of the current graphics context.

最明显的参数是线宽。然而，使用了所有线条绘制状态，例如笔画模式、斜接限制、线条连接、大写字母、虚线模式等。这使得该方法非常强大。

有关更多详细信息，请参阅 this answer的this S.O. question .