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

Question

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

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

我知道如何做一个渐变矩形,ig:

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);

但是我怎么能画一条渐变的线条,ig从黑色渐变到白色(也可能在另一边渐渐变成黑色)？

Answer 1

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

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

但是,Core Graphics有一个非常酷的过程CGContextReplacePathWithStrokedPath,它会将您想要描边的路径转换为填充时等效的路径.

在幕后,CGContextReplacePathWithStrokedPath围绕笔划路径构建边缘多边形,并为您定义的路径切换.我推测核心图形渲染引擎无论如何都可能在调用时执行此操作CGContextStrokePath.

这是Apple关于此的文档:

Quartz使用当前图形上下文的参数创建描边路径.创建新路径以便填充它绘制与描绘原始路径相同的像素.您可以像使用任何上下文的路径一样使用此路径.例如,您可以通过调用此函数然后调用函数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 使用当前图形上下文的参数创建描边路径.

明显的参数是线宽.但是,使用所有线条绘制状态,例如笔划图案,斜接限制,线条连接,大写字母,虚线图案等.这使得该方法非常强大.

有关更多详细信息,请参阅该答复的这太问题.

Answer 2

经过几次尝试,我现在确定渐变不会影响笔画,所以我认为不可能用渐变线绘制CGContextStrokePath().对于水平和垂直线,解决方案是使用CGContextAddRect(),幸运的是我需要的.我换了

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

同

CGContextSaveGState(context);
CGContextAddRect(context, CGRectMake(x, y, width, height));
CGContextClip(context);
CGContextDrawLinearGradient (context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);

一切正常.感谢Brad Larson的关键暗示.

Answer 3

您可以使用Core Animation图层.您可以通过设置其路径属性为行使用CAShaperLayer,然后可以使用CAGradientLayer作为形状图层的图层蒙版,这将导致线条淡化.

用调用CGPath ...调用替换你的CGContext ...调用来创建行路径.使用该路径在图层上设置路径字段.然后在渐变图层中,指定要使用的颜色(可能是黑色到白色),然后将蒙版设置为线条图层,如下所示:

 [gradientLayer setMask:lineLayer];

渐变图层的优点在于,您可以指定渐变将停止的位置列表,以便淡入和淡出.它只支持线性渐变,但听起来可能符合您的需求.

如果您需要澄清,请告诉我.

编辑:现在我想起来,只需创建一个CAGradientLayer,它是你想要的线的宽度/高度.指定渐变颜色(黑色到白色或黑色以清除颜色)以及startPoint和endtPoints,它应该为您提供所需的颜色.

Answer 4

画线后,你可以打电话

CGContextClip(context);

将进一步的绘图剪辑到您的线区域.如果绘制渐变,它现在应该包含在线条区域内.请注意,如果您只想显示渐变而不是下面的线,则需要为线条使用清晰的颜色.

线条可能太薄而无法显示渐变,在这种情况下,您可以使用CGContextAddRect()来定义更粗的区域.

我在这里的答案中提供了一个更详细的使用此上下文剪辑的示例.