¿Cómo llenar el área debajo de un path en Quartz 2D?

Estoy usando Quartz 2D en un object UIView para dibujar varias curvas, como este ejemplo:

Dos curvas dibujadas usando Quartz 2D con <code> CGContextStrokePath </ code>

Este es el código que tengo ahora (he omitido el cálculo de los puntos de control y otras cosas):

for (int i = 1; i < points.count; ++i) { CGContextMoveToPoint(context, previousXValue, previousYValue); CGContextAddCurveToPoint(context, firstControlPointXValue, firstControlPointYValue, secondControlPointXValue, secondControlPointYValue, xValue, yValue ); // CGContextFillPath(context); CGContextStrokePath(context); } 

Ahora me gustaría completar el área debajo de la curva, pero si uso CGContextFillPath el resultado es el siguiente:

Dos curvas rellenas con Quartz 2D con <code> CGContextFillPath </ code>

que tiene sentido, porque según la documentation de Quartz 2D :

Cuando completa la ruta actual, Quartz actúa como si cada sub ruta contenida en la ruta estuviera cerrada. A continuación, utiliza estos subpaths cerrados y calcula los píxeles para completar.

Luego intenté mover la ruta a la esquina inferior derecha y cerrar la ruta, pero el método de relleno no tiene ningún efecto:

 CGContextMoveToPoint(context, rect.size.width, rect.size.height); CGContextClosePath(context); CGContextFillPath(context); 

¿Cómo podría completar todo el área debajo de la curva y no solo cerrar la subárea en cada subpath?

EDITAR:

Encontré una solución temporal: dibujar una forma usando la curva y dos líneas verticales en cada sub ruta:

 for (int i = 1; i < points.count; ++i) { // Draw the curve CGContextMoveToPoint(context, previousXValue, previousYValue); CGContextAddCurveToPoint(context, firstControlPointXValue, firstControlPointYValue, secondControlPointXValue, secondControlPointYValue, xValue, yValue ); CGContextStrokePath(context); // Draw a shape using curve's initial and final points CGContextMoveToPoint(context, previousXValue, rect.size.height); CGContextAddLineToPoint(context, previousXValue, previousYValue); CGContextAddCurveToPoint(context, firstControlPointXValue, firstControlPointYValue, secondControlPointXValue, secondControlPointYValue, xValue, yValue ); CGContextAddLineToPoint(context, xValue, rect.size.height); CGContextFillPath(context); } 

No sé si esto es una exageración, por lo que las mejoras también son bienvenidas. Además, obtengo este resultado:

Dos curvas dibujadas usando Quartz 2D con el área debajo de ellas llenada

Tenga en count que las líneas verticales aparecen como resultado de dibujar las subáreas una al lado de la otra. ¿Cómo se puede evitar eso?

La idea es correcta, pero no debe llenar las curvas individuales, sino crear una única ruta y luego completarla. Entonces, comience con CGContextMoveToPoint a la esquina inferior izquierda, CGContextAddLineToPoint a su primer punto, haga CGContextAddCurveToPoint para todas las curvas y, al final, haga un CGContextAddLineToPoint a la esquina inferior derecha (y también podría hacer un CGContextClosePath para siempre medida).

Este es un ejemplo simplificado, donde solo tengo una variedad de puntos, pero ilustra la idea:

 - (void)drawRect:(CGRect)rect { if (!self.points) [self configurePoints]; DataPoint *point; CGContextRef context = UIGraphicsGetCurrentContext(); CGColorRef color = [[UIColor networkingColor] CGColor]; CGContextSetStrokeColorWithColor(context, color); CGContextSetFillColorWithColor(context, color); point = self.points[0]; CGContextMoveToPoint(context, point.x, self.bounds.size.height); CGContextAddLineToPoint(context, point.x, point.y); for (point in self.points) { // you'd do your CGContextAddCurveToPoint here; I'm just adding lines CGContextAddLineToPoint(context, point.x, point.y); } point = [self.points lastObject]; CGContextAddLineToPoint(context, point.x, self.bounds.size.height); CGContextClosePath(context); CGContextDrawPath(context, kCGPathFillStroke); } 
    Intereting Posts