如何绘制一个渐变线核芯显卡/ iPhone(输入/输出褪色)?(How to draw a grad

2019-07-02 10:47发布

我知道如何画一个简单的一行:

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

但是,我怎么能绘制渐变线,从灌胃黑色渐变为白色(也许淡出为黑色的另一边为好)?

Answer 1:

所以能够用梯度,或者任何其它填充效果行程任意路径 ,诸如图案。

正如你已经发现,描边路径不与当前的渐变渲染。 这只充满路径使用渐变(当你打开他们的剪辑,然后绘制渐变)。

然而 ,核芯显卡有一个惊人的冷静程序CGContextReplacePathWithStrokedPath ,将改变在填充时相当于一个路径,你打算描边路径。

在幕后, CGContextReplacePathWithStrokedPath建立了一个多边形边缘周围的描边路径和交换机的路径已定义。 我推测,核心图形渲染引擎可能在调用反正做到这一点CGContextStrokePath

下面是苹果的文件上这样的:

石英创建使用当前图形上下文的参数描边路径。 创建新的路径,以便填充它绘制相同的像素作为抚摸着原始路径。 你可以在你使用任何上下文的路径相同的方式使用此路径。 例如,可以通过调用这个函数,然后在函数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
    );

其它注意事项

值得强调的上述文件的一部分:

石英创建使用当前图形上下文的参数描边路径。

明显的参数是线宽。 然而, 所有的画线的状态下使用,如中风图案,斜接限制,线联接,帽,破折号图案等这使得该方法非常强大。

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



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

和一切工作正常。 由于布拉德·拉尔森的重要提示。



Answer 3:

你划清界线后,你可以调用

CGContextClip(context);

夹进一步拉你的行区域。 如果绘制渐变,现在应当包含行区域内。 请注意,您将需要使用一个明确的颜色为你的线,如果你只是想渐变展示,而不是它的下一行。

有一个行会太薄,你梯度展现出来,在这种情况下,你可以使用的可能性CGContextAddRect()来定义一个较厚的区域。

我目前使用这种背景下,我的回答剪辑更详细的例子在这里 。



Answer 4:

您可以使用Core Animation的层。 您可以使用CAShaperLayer你行通过设置path属性,然后你可以使用CAGradientLayer作为一个图层蒙版,以您的形状图层,将导致线路褪色。

更换你CGContext上......通过调用CGPath呼叫:调用来创建线路路径。 设置使用路径层路径字段。 然后在您的梯度层,指定要使用的(可能是黑到白)的颜色,然后将面膜是这样的线层:

 [gradientLayer setMask:lineLayer];

什么是很酷的梯度层是允许您指定的位置,其中梯度将停止列表,这样你就可以淡入和淡出。 它仅支持线性渐变,但它听起来像可能满足您的需求。

让我知道你是否需要澄清。

编辑:现在我想起来了,只需要创建一个单一的CAGradientLayer这是你想要的线的宽度/高度。 指定渐变颜色(黑色到白色或黑色,以鲜明的色彩)和:起点和endtPoints,它应该给你你需要什么。



Answer 5:

CGContextMoveToPoint(context, frame.size.width-200, frame.origin.y+10);
CGContextAddLineToPoint(context, frame.size.width-200, 100-10);
CGFloat colors[16] = { 0,0, 0, 0,
    0, 0, 0, .8,
    0, 0, 0, .8,
    0, 0,0 ,0 };
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 4);

CGContextSaveGState(context);
CGContextAddRect(context, CGRectMake(frame.size.width-200,10, 1, 80));
CGContextClip(context);
CGContextDrawLinearGradient (context, gradient, CGPointMake(frame.size.width-200, 10), CGPointMake(frame.size.width-200,80), 0);
CGContextRestoreGState(context);

它为我工作。



文章来源: How to draw a gradient line (fading in/out) with Core Graphics/iPhone?