CAShapeLayer path color changes

Question

So, I know the title of my question may not be the most descriptive so I'll run through it here:

Basically what I have is view with an image (using a layer's contents property) and under that layer I have a Drawing layer which is a CAShapeLayer. In my view where both layers live I also have a CALayerDelegate which, for now, just draws a point using CGPaths with a given color in response to a tap gesture (tap gesture selector calls setNeedsDisplay on the CAShapeLayer). The problem I have is that if I change a color, then tap the view all previous points automatically become the newly selected color...not good...I need each subpath (i.e. point) to maintain its original color...Maybe some code will shed a little more light on the topic:

The delegate (Note: drawingView.drawingPath is reused):

- (void)drawLayer:(CAShapeLayer *)theLayer
    inContext:(CGContextRef)theContext {


if (CGPointEqualToPoint(drawingView.startPoint, drawingView.endPoint)) {


    CGPathMoveToPoint(drawingView.drawingPath, NULL, drawingView.startPoint.x, drawingView.startPoint.y);
    CGPathAddEllipseInRect(drawingView.drawingPath, NULL, CGRectMake(drawingView.startPoint.x, drawingView.startPoint.y, drawingView.drawRadius, drawingView.drawRadius));

    CGContextSetFillColorWithColor(theContext, drawingView.currentColor.CGColor);
    CGContextBeginPath(theContext);
    CGContextAddPath(theContext, drawingView.drawingPath);
    CGContextFillPath(theContext);

}

}

And my tap gesture recognizer:

- (void)viewTapped:(UITapGestureRecognizer *)recognizer {

CGPoint touchPoint = [recognizer locationInView:recognizer.view];
startPoint = endPoint = touchPoint;
[drawingLayer setNeedsDisplay];

}

I would be ecstatic if someone can show me what I'm doing wrong here! :(

score 1 · Answer 1 · answered Sep 20 '11 at 16:55

1

Each time you redraw your layer it will be using information you have previously saved (in this case in your drawing view) to draw everything. You have to be able to represent everything on the screen using only this information. In this case, you are having trouble because you don't save enough information. What you want is not just a drawing path and a color, but a series of drawing paths and colors. You will need to keep a list of objects containing both of those things in your drawingView, and iterate through them, drawing each one. Every time you change the current color, you need to keep track of what has already been drawn and save it along with the old color, so that you don't lose track of which color belongs to which part of the path.

answered Sep 20 '11 at 16:55

Micah Hainline

14,367
9
52
85

Thanks for the input! So essentially what you're saying is I have to "save" each subpath and its corresponding color for each tap (and later line) that I draw? I had a suspicion it would come down to that but I would imagine that it could become extremely inefficient if I had for example hundreds of subpaths (say in an array). Hmm...perhaps I can use an empty image and draw into it instead of the shapelayer? I would imagine that may be more efficient.... – johnnyd Sep 20 '11 at 17:04
Drawing into an image is an alternative, bearing in mind that its not reversible. As a general-purpose solution I'd recommend saving the components, but if an image is going to work better for you, by all means. :) – Micah Hainline Sep 20 '11 at 18:05

CAShapeLayer path color changes

1 Answers1