将 CGGradient 剪切到 CGPath

Question

很长一段时间以来，我一直在用头撞墙，试图找出为什么这不起作用。

基本上，我试图用 CGPath 绘制图形（图表），然后使用它来剪辑渐变。最终效果应该像iPhone自带的股票应用程序一样。

渐变和路径分别作为两个分层（未剪切）元素进行精细绘制。但是，如果我注释掉 CGContextDrawPath，则线条和渐变都不会绘制到屏幕上。

这是我的绘制矩形代码：

CGContextRef context = UIGraphicsGetCurrentContext();

[[UIColor whiteColor] set];
CGContextSetLineWidth(context, 2.0f);
CGPoint lastDrawnPt = [[points objectAtIndex:0] CGPointValue];
CGPoint firstDrawnPt = lastDrawnPt;
//create the path for the gradient
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height); // bottom left
CGPathAddLineToPoint(thePath, NULL, lastDrawnPt.x, lastDrawnPt.y);


for (int i=0; i<(points.count-1); i++) {
    //CGPoint pt1 = [[points objectAtIndex:i] CGPointValue];
    CGPoint pt2 = [[points objectAtIndex:i+1] CGPointValue];
    if (pt2.x > lastDrawnPt.x+2) {
        // only draw if we've moved sunstantially to the right

        //for the gradient
        CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, lastDrawnPt.y);
        CGPathAddLineToPoint(thePath, NULL, pt2.x, pt2.y);


        lastDrawnPt = pt2;
    }
}

//finish the gradient clipping path
CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, lastDrawnPt.y);
CGPathAddLineToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height); // bottom right
CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height);
CGPathAddLineToPoint(thePath, NULL, firstDrawnPt.x, self.bounds.size.height); // bottom right

CGPathCloseSubpath(thePath);

//add the gradient clipping path to the context
CGContextSaveGState(context);
CGContextAddPath(context, thePath);

//draw the path
float components[4] = {1.0, 1.0, 1.0, 1.0};
CGContextSetStrokeColor(context, components);
CGContextDrawPath(context,kCGPathStroke);

//clip the path
CGContextClip(context);


//Draw Gradient
UIColor *topColor = [UIColor colorWithRed: 1.0 green:1.0 blue:1.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.0];
CGColorRef colorRef[] = { [topColor CGColor], [bottomColor CGColor] };
CFArrayRef colors = CFArrayCreate(NULL, (const void**)colorRef, sizeof(colorRef) / sizeof(CGColorRef), &kCFTypeArrayCallBacks);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, colors, NULL);
CFRelease(colorSpace);
CFRelease(colors);

//  Draw a linear gradient from top to bottom
CGPoint gradStartPoint = CGPointMake(50.0, self.bounds.size.height);
CGPoint gradEndPoint = CGPointMake(50.0, 0.0);
CGContextDrawLinearGradient(context, gradient, gradStartPoint, gradEndPoint, 0);

CFRelease(gradient);

// Cleanup
CGColorSpaceRelease(colorSpace);

CGContextRestoreGState(context);

Answer 1

CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height); // 左下角
CGPathAddLineToPoint（thePath，NULL，lastDrawnPt.x，lastDrawnPt.y）；


for (int i=0; i<(points.count-1); i++) {
    //CGPoint pt1 = [[points objectAtIndex:i] CGPointValue];
    CGPoint pt2 = [[点objectAtIndex:i+1] CGPointValue];
    if (pt2.x >lastDrawnPt.x+2) {
        // 仅当我们已经向右移动时才绘制

        //对于梯度
        CGPathMoveToPoint（thePath，NULL，lastDrawnPt.x，lastDrawnPt.y）；
        CGPathAddLineToPoint(thePath, NULL, pt2.x, pt2.y);


        最后绘制点 = pt2;
    }
}

//完成渐变剪切路径
CGPathMoveToPoint（thePath，NULL，lastDrawnPt.x，lastDrawnPt.y）；
CGPathAddLineToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height); // 右下角
CGPathMoveToPoint(thePath, NULL, lastDrawnPt.x, self.bounds.size.height);
CGPathAddLineToPoint(thePath, NULL, firstDrawnPt.x, self.bounds.size.height); // 右下角

这只是绘制了一系列线段。对于某些点值，它可能看起来像这样：

| |||| |

它不绘制单个连续形状。因此，这条路径对于剪切来说是无用的，因为它实际上是空的；正如您所看到的，剪切到它将导致剪切路径内不再有任何绘图。

每个lineto、curveto、arc等都从当前点开始工作。您最初使用 moveto 设置该值，但每个 lineto、curveto、arc、等等不会清除当前点，而是更新它。因此，要创建单个形状，您需要执行一次 moveto，然后执行一系列 lineto（或 curveto 或 arc） >)，最后是 closepath。

说到closepath...

CGPathCloseSubpath(thePath);

这将创建路径中唯一的闭合形状，但由于该形状的面积为零（只是一条自身加倍的线段），因此它对于剪切目的仍然没有帮助。

我怀疑您需要做的就是剪掉至少一个 moveto 段（循环中的段，如果不是循环后的段）。然后，您可以简化循环 - 在数组上使用快速枚举，而不是使用索引，并消除对“最后绘制点”的跟踪。

另外，NSArray 索引的正确类型是 NSUInteger，而不是 int。保持你的类型匹配——这样可以避免日后的痛苦。