Gradient for the curved line, drawn with quartz 2d - ios

Question

I am drawing a curved line using cubed bezier curve (UIBezierPath class) using two control points that are in opposite corners of our points. I need to draw it with gradient that depends on y value. I appreciate any help because now I've stucked in. Here is my code:
CGPoint point1 = CGPointMake(50, 70);
CGPoint point2 = CGPointMake(70, 75);
bool drawACurve;
drawACurve = true;
float tangent;
if ((int)(point2.y - point1.y) == 0) {
tangent = 0.0f;
drawACurve = false;
}
else {
tangent = (point2.x - point1.x) / (point2.y - point1.y);
}
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 setLineWidth:1.0];
[[UIColor blueColor] set];
if (drawACurve)
{
// Draw a curve
float factor;
CGPoint controlPoint1;
CGPoint controlPoint2;
factor = MAX_FACTOR;
if (fabs(tangent) >= 1.0 && fabs(tangent) < TANGENT_BOUND_FOR_LINE)
factor = MIN_FACTOR;
if (tangent > 0) {
controlPoint1 = CGPointMake(point2.x - point2.x * factor, point1.y - point1.y * factor);
controlPoint2 = CGPointMake(point1.x + point1.x * factor, point2.y + point2.y * factor);
}
else {
// For tangent less than zero
controlPoint1 = CGPointMake(point2.x - point2.x * factor, point1.y + point1.y * factor);
controlPoint2 = CGPointMake(point1.x + point1.x * factor, point2.y - point2.y * factor);
}
[path1 moveToPoint:point1];
[path1 addCurveToPoint:point2 controlPoint1:controlPoint1 controlPoint2:controlPoint2];
}
else
{
// Draw a line
[path1 moveToPoint:point1];
[path1 addLineToPoint:point2];
}
[path1 stroke];

Answer 1

If I've understood you correctly, here's one solution. I've drawn the path using a simple blue-to-green gradient, varying in the y-direction. I've commented the code to explain what it's doing.
CGPoint point1 = CGPointMake(50, 70);
CGPoint point2 = CGPointMake(70, 75);
bool drawACurve;
drawACurve = true;
float tangent;
if ((int)(point2.y - point1.y) == 0) {
tangent = 0.0f;
drawACurve = false;
}
else {
tangent = (point2.x - point1.x) / (point2.y - point1.y);
}
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 setLineWidth:1.0];
if (drawACurve)
{
// Draw a curve
float factor;
CGPoint controlPoint1;
CGPoint controlPoint2;
factor = MAX_FACTOR;
if (fabs(tangent) >= 1.0 && fabs(tangent) < TANGENT_BOUND_FOR_LINE)
factor = MIN_FACTOR;
if (tangent > 0) {
controlPoint1 = CGPointMake(point2.x - point2.x * factor, point1.y - point1.y * factor);
controlPoint2 = CGPointMake(point1.x + point1.x * factor, point2.y + point2.y * factor);
}
else {
// For tangent less than zero
controlPoint1 = CGPointMake(point2.x - point2.x * factor, point1.y + point1.y * factor);
controlPoint2 = CGPointMake(point1.x + point1.x * factor, point2.y - point2.y * factor);
}
[path1 moveToPoint:point1];
[path1 addCurveToPoint:point2 controlPoint1:controlPoint1 controlPoint2:controlPoint2];
}
else
{
// Draw a line
[path1 moveToPoint:point1];
[path1 addLineToPoint:point2];
}
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); // You could choose another color space.
CGFloat locations[2] = {0.f, 1.f}; // Locations for a simple linear gradient with a start color and end color at either end of the drawing points.
CGFloat colorComponents[8] = {0.f, 0.f, 1.f, 1.f, // Start blue
0.f, 1.f, 0.f, 1.f}; // Finish green
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colorComponents, locations, 2); // Create the gradient. Can also be created with CGGradientCreateWithColors().
CGColorSpaceRelease(colorSpace);
CGPathRef outerPath = CGPathCreateCopyByStrokingPath(path1.CGPath, NULL, path1.lineWidth, path1.lineCapStyle, path1.lineJoinStyle, path1.miterLimit); // This function creates a path that outlines another, using various stroke options. Pass in the stroke options from path1.
// From the docs: The new path is created so that filling the new path draws the same pixels as stroking the original path.
CGContextRef context = UIGraphicsGetCurrentContext(); // Get the current graphics context.
CGContextAddPath(context, outerPath); // Add the new path.
CGContextClip(context); // Clip the context to the path.
CGRect boundingBox = CGPathGetBoundingBox(outerPath); // I'm just doing this to get the startPoint and endPoint for the gradient drawing.
CGPathRelease(outerPath);
CGPoint startPoint = boundingBox.origin;
CGPoint endPoint = CGPointMake(boundingBox.origin.x, CGRectGetHeight(boundingBox)); // Different from startPoint in y value, as requested.
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0); // Draw the gradient.
CGGradientRelease(gradient);