Removing UIGraphics

[kpearce2]

Hi,

I draw a line to the screen with the following code. My question is how do you do the opposite? How can I remove a drawn line?

UIGraphicsBeginImageContext(drawingFrame.frame.size);
    [drawImage.image drawInRect:CGRectMake(0, 0, drawingFrame.frame.size.width, drawingFrame.frame.size.height)];
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), savedX, savedY);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), roundedX, roundedY);
    CGContextStrokePath(UIGraphicsGetCurrentContext());
    CGContextFlush(UIGraphicsGetCurrentContext());
    drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

Thanks

[Duncan C]

Originally Posted by kpearce2

Hi,

I draw a line to the screen with the following code. My question is how do you do the opposite? How can I remove a drawn line?

UIGraphicsBeginImageContext(drawingFrame.frame.size);
    [drawImage.image drawInRect:CGRectMake(0, 0, drawingFrame.frame.size.width, drawingFrame.frame.size.height)];
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), savedX, savedY);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), roundedX, roundedY);
    CGContextStrokePath(UIGraphicsGetCurrentContext());
    CGContextFlush(UIGraphicsGetCurrentContext());
    drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

Thanks

It looks to me like that code doesn't draw a line to the screen, it draws to an off-screen context, and then captures the output to a UIImage.

In general, you don't draw directly to the screen. Instead, you add views who's content gets drawn to the screen. To remove that content, you remove the view.

[kpearce2]

Hi Duncan,

Thanks for the explanation. When you say add views would I add a view for each line "drawn"? or just add to an already existing view? I probably should have explained my self clearer - the user would draw many lines on the screen and may want to remove any number of them. I'm guessing many views would be memory hungry.

I partially achieved the result by capturing where the line was drawn in an array and then providing an option to undo by removing the last value in the array and redrawing. I know it is not ideal but the only thing I could think of at the time. The user will have to back track through using Undo rather than selectively delete.

Thanks

[Duncan C]

Originally Posted by kpearce2

Hi Duncan,

Thanks for the explanation. When you say add views would I add a view for each line "drawn"? or just add to an already existing view? I probably should have explained my self clearer - the user would draw many lines on the screen and may want to remove any number of them. I'm guessing many views would be memory hungry.

I partially achieved the result by capturing where the line was drawn in an array and then providing an option to undo by removing the last value in the array and redrawing. I know it is not ideal but the only thing I could think of at the time. The user will have to back track through using Undo rather than selectively delete.

Thanks

Ok, now I understand a little better what you are trying to do.

No, a view per line would not be a good way to go.

How you go about handling drawing and erasing is a matter of design.

If your program is a drawing program, you might have an array of shape objects. The view that shows your drawing would be a custom subclass of UIView. In it's drawRect method, it might invoke a draw method for each shape, which would know how to draw itself.

To delete a shape, the user would tap on it to select it, and then tap a delete button, do a flick gesture, or whatever the UI action you select for deleting objects.

The drawing program would then remove the shape object from the array of shapes, and call setNeedsDisplay for the shapes view. The shapes view would redraw itself, minus the deleted shape.

You could also use a simpler approach, where the custom view uses a UIBezierPath to represent the drawing. However, selecting and deleting individual shapes from a path object is not easy.


Duncan

[fiftysixty]

Originally Posted by kpearce2

Hi Duncan,

Thanks for the explanation. When you say add views would I add a view for each line "drawn"? or just add to an already existing view? I probably should have explained my self clearer - the user would draw many lines on the screen and may want to remove any number of them. I'm guessing many views would be memory hungry.

I partially achieved the result by capturing where the line was drawn in an array and then providing an option to undo by removing the last value in the array and redrawing. I know it is not ideal but the only thing I could think of at the time. The user will have to back track through using Undo rather than selectively delete.

Thanks

If you're using CoreGraphics for drawing, here are some additional things to consider. Duncan outlined the basic approach.

For performance reasons, you probably don't want to redraw all shapes when the user is drawing a new shape. So, you might want to implement two buffers, one for the active, currently drawing shape, and one for everything else. Unless you want to implement also layers in your app, in which case you'll need at least 3 buffers: one for all shapes behind the active shape, one for the active shape and one for all shapes in front of the active shape.

I've used CGLayers for this purpose, and they work reasonably well. CGLayers are linked to a CGContext, so you'll have to create them in the drawRect-method. I don't really like that aspect, but I don't know of a workaround since the graphics contexts are valid only within the drawRect call.

So, by now you'll have a list of shapes and a couple of CGLayers. In drawRect, update the CGLayer for the active shape, and then draw the CGLayers to the current graphics context.

When the user edits the shapes (selects one, deletes etc.) you'll have to update all CGLayers to reflect the changes. Draw the active shape on its own layer, and everything else on a separate layer and then you'll be back to normal situation again.

I've actually done a lot of work on a drawing app, so I had to learn a lot of these things. Unfortunately, I've never been able to finish the app because I couldn't get the performance to where I wanted it to be. But in case you want more advice, I might be able to help you.