draw ios quartz 2d path with a varying alpha component

0
votes

I'd like to paint some Bezier curves with the alpha channel that is changing during the curve painting. Right now I'm able to draw bezier paths, with a fixed alpha channel. What I'd like to do is to draw a single bezier curve that uses a certain value of the alpha channel for the first n points of the path another, alpha value for the subsequent m points and so on. The code I'm using for drawing bezier path is:

CGContextSetStrokeColorWithColor(context, curva.color.CGColor);
....
CGContextAddCurveToPoint(context, cp1.x, cp1.y, cp2.x, cp2.y, endPoint.x, endPoint.y);
....
CGContextStrokePath(context);

Is there a way to achieve what I'm describing?

Many thanks, Giovanni

2
iosquartz-graphicsbezier
Stroke color is a context setting, so you cannot change it while you're drawing a path. So it is better you split the path in many sub-paths on each alpha change and then stroke them separately; so: - set alpha0; - stroke subpath0; - set alpha1; - stroke subpath1; - set alpha2; stroke subpath2; ... – viggio24

2 Answers

0
votes

There are two ways I imagine you could achieve this effect:

  • If you absolutely must compute the alpha at draw time, you could experiment with creating a colored CGPatternRef ( http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGPattern/Reference/reference.html ) whose drawing callback inspects the current context translation and draws a color based on the offset. Instead of setting a stroke color, you'd set CGContextSetStrokePattern to your created pattern.

  • If appropriate for the drawn object, you could precompute the alpha across the space of the curve and use your CGPathRef as a mask for the alpha image.

I should qualify that I've never attempted the CGPatternRef method, so I can only point that out as a potential, not a certainty.

0
votes

There is a much easier way to do what you are trying to do:

  1. Create a gradient image using your favorite graphics editor (or create it just in time in your app). The image should be 1 pixel tall and as wide as the length of the path you are going to stroke.
  2. Fill the image with your gradient. For example, fill the image with a gradient that has a varying alpha component from 0 on the left to 1 on the right.
  3. Create your stroke color by calling [UIColor colorWithPatternImage:patternImage] where the pattern image is a UIImage created from the gradient image.
  4. Use the pattern color to stroke your path. This also works with layers. This will apply the gradient along the path.