Question

这里有关于渐变的图表有很多问题，但我无法找到解决方案。如何绘制多个pathes对吧？我想要这样的事情 - Gradient effect for Line Graph in iPhone

我绘制渐变很好，但我需要将图形线放在渐变之上。我为它创建了另一条路径，并在绘制渐变后绘制它，但它没有出现。我不绘制原始路径，因为它是封闭的路径，但我想要打开绘制线描边路径。

// create the path
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0.0+offset, self.frame.size.height-0.0);

CGMutablePathRef strokePath = CGPathCreateMutable();

NSArray *graphValues = [delegate getDataForGraph];

float mulitplX = (self.frame.size.width - offset) / (float) ([graphValues count]-1);

float lastx;

for (int i = 0; i < [graphValues count]; i++) {
    CGPoint val = [[graphValues objectAtIndex: i] CGPointValue];
    lastx=val.x;
    CGPathAddLineToPoint(path, NULL, (val.x*mulitplX)+offset, self.frame.size.height-val.y);

    if (!i) {
        CGPathAddLineToPoint(strokePath, NULL,(val.x*mulitplX)+offset, self.frame.size.height-val.y);
    } else {
        CGPathMoveToPoint(strokePath, NULL, (val.x*mulitplX)+offset, self.frame.size.height-val.y);
    }            
}

//close path for gradient
CGPathAddLineToPoint(path, NULL, lastx*mulitplX+offset, self.frame.size.height-0.0);
CGPathAddLineToPoint(path, NULL, 0.0+offset, self.frame.size.height-0.0);

// setup the gradient
CGFloat locations[2] = { 1.0, 0.0 };
CGFloat components[8] = {
    0.95, 0.30, 0.30, 0.0,  // Start color
    0.93, 0.94, 0.30, 1.0   // End color
};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradientFill = CGGradientCreateWithColorComponents (colorSpace, components, locations, 2);

// setup gradient points
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint myStartPoint, myEndPoint;
myStartPoint.x = CGRectGetMinX(pathRect);
myStartPoint.y = CGRectGetMinY(pathRect);
myEndPoint.x = CGRectGetMinX(pathRect);
myEndPoint.y = CGRectGetMaxY(pathRect);

// draw the gradient
CGContextAddPath(context, path);
CGContextSaveGState(context);
CGContextClip(context);
CGContextDrawLinearGradient (context, gradientFill, myStartPoint, myEndPoint, 0);
CGContextRestoreGState(context);

// draw the graph - problem here
CGContextBeginPath(context);
CGContextAddPath(context, strokePath);
[[UIColor whiteColor] setStroke];
CGContextSetLineWidth(context, 2.0);
CGContextStrokePath(context);

// cleanup
CGColorSpaceRelease(colorSpace);
CGGradientRelease(gradientFill);
CGPathRelease(path);
CGPathRelease(strokePath);

Answer 1

编写内置Stocks应用程序的人有一个WWDC 2011会话，其图形看起来与您尝试的类似。他基本上花了整整一个小时来展示它是如何完成的。我忘了确切的会话标题，也许是核心动画的东西？

用渐变绘制图形线

1 个答案: