I'm in the process of making a simple drawing program for the iPhone. At the moment, touch events add their location to a list which is connected with a bunch of CGContextAddLineToPoint calls which are redrawn in every call to drawRect.
I'm running into performance issues at fairly low numbers of lines (they are transparent, though), so I tried drawing everything into a CGLayer. Now, instead of drawing each line every frame, it draws each line only once and draws the CGLayer to the screen every frame.
CGContextRef backgroundContext = CGLayerGetContext(pathBuffer);
CGContextSetLineWidth(backgroundContext, 2.0);
CGContextSetLineCap(backgroundContext, kCGLineCapButt);
CGContextSetStrokeColorWithColor(backgroundContext, [pathColor CGColor]);
if([[touchPoints objectAtIndex:0] continuesToNextPoint])
{
CGContextMoveToPoint(backgroundContext, [[touchPoints objectAtIndex:0] point].x, [[touchPoints objectAtIndex:0] point].y);
CGContextAddLineToPoint(backgroundContext, [[touchPoints objectAtIndex:1] point].x, [[touchPoints objectAtIndex:1] point].y);
CGContextStrokePath(backgroundContext);
}
//remove it from touchpoints
[touchPoints removeObjectAtIndex:0];
}
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawLayerAtPoint(context, CGPointMake(0, 0), pathBuffer);
This, if anything, is SLOWER than what I was doing before. Am I doing something wrong? Would I be better served drawing to a UIImage or something? Thanks.
What you should be doing is inserting a CALayer into one of your views, updating the layer, and then calling setNeedsDisplayInRect: with the bounds of the area that has changed on the layer, which causes it to update. If you try to update the entire screen, it's going to be slow.
Are you using Instruments to figure out what parts are slow? I recommend using it to learn about what parts are slowing you down.
Related
I have two square images in my UIVIew. Once I drag my finger from one image to another image I want to draw a straight line between them.
I have handled touchesMoved method to check when my touchLocation reaches the frame of either of the images. So I have handled the logic part of when to start drawing and between which two points.
I just cant figure out how to do that using (void)drawRect:(CGRect)rect. For one thing, I addded an NSlog in my drawRect and I wrote code to draw a line between two lines, even that's not happening.
I checked this question too, but I want to continue to drag and draw lines between multiple points.
- (void)drawRect:(CGRect)rect
{
NSLog(#"Draw Rect Entered");
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor]CGColor]);
CGContextSetLineWidth(context, 1.0);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 20, 20);
CGContextStrokePath(context);
}
In order for the view to update you need to call -setNeedsDisplay or -setNeedsDisplayInRect: on the view that needs to be redrawn. You should do this in the touch handler once you have determined you need to draw the line. This will trigger the -drawRect: method on the view- you don't call -drawRect directly. For more information, read the UIView docs. I don't know whether you want your line to exist permanently once created- if there's a possibility it might be deleted, I'd add an if statement to -drawRect: controlled by a boolean determining whether to draw the line or not. Then you can easily switch it off if necessary.
Based on your comments below, I'd create an ivar array in which to store the points for the currently traced line and then loop over them in -drawRect:, using the Core graphics functions to draw the line a segment at a time. That way the new segment and all previous segments will be drawn with each redraw. Since CGPoint isn't an obj-c object, you'll either have to create a wrapper class or use obj-C++ and std::vector. You could also use a fixed size C-Array, (you mention you have precisely 10 points)- in that case you'd have to preset the unused coordinates to some arbitrary value defined as invalid (e.g. -500,-500) and add logic to not draw line segments if those values are encountered.
Minor point- I wouldn't hardcode the line coordinates - instead you could derive them from the images' frame property. That way your code will be more readable and won't break if you change the images or resize them.
There are two issues I have run into that could cause this problem:
1) Make sure you are calling setNeedsDisplay on the main thread
2) If you are working with multiple views make sure you are calling setNeedsDisplay against the correct one.
It is easy to work with one view and forget to call setNeedsDisplay against the parent view.
I have a UIView and within it I've drawn a line using Core Graphics by overriding drawRect. This view also contains one subview which also draws a line. However, whilst both views are using pretty much the same code (for testing purposes at least), the lines drawn on them do not appear the same:
As you can see - the dashed line at the top is noticeably thicker than the bottom one and I have no idea why. Below is the code used by the two UIViews in their drawRect methods. If you have any idea why this is happening then I'd appreciate your help and advice!
First View:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGFloat dashes[] = {1,1};
CGContextSetLineDash(context, 0.0, dashes, 2);
CGContextSetLineWidth(context, 0.6);
CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect));
CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
CGContextStrokePath(context);
SubUIView *view = [[SubUIView alloc] initWithFrame:rect];
[self addSubview:view];
[view release];
The view is definitely only being drawn once. I appreciate drawRect may not be the best place for adding a subview but the problem remains even with it added in the main initWithFrame method.
Second View:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGFloat dashes[] = {1,1};
CGContextSetLineDash(context, 0.0, dashes, 2);
CGContextSetLineWidth(context, 0.6);
CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMidY(rect));
CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMidY(rect));
CGContextStrokePath(context);
It could be a result of anti-aliasing if your rect does not fall on integers. You can disable anti-aliasing with CGContextSetShouldAntialias( context, NO ). I think there's also a function for making a rect integral, but I can't remember what it is.
First, you should fix the problem of the drawing code being WET*. You say you're doing this “for testing purposes”, but this actually makes testing harder, since you have to change both pieces of code and/or keep straight which version you're working on. The worst case is when you change both pieces of code in different ways and have to merge them by hand.
I'd say move the dashed-line code to the subview, add properties for anything the two pieces of code need to do differently, and create two subviews (and not in drawRect:—seriously).
As for the actual problem: Well, I don't see a big image, I see a tiny image, and I can only guess that the greater boldness of the upper line than that of the lower line means that the upper line is thicker.
By the way, the rect is not necessarily the bounds of your image. Don't ever assume that it is, or you will get funky drawing when it isn't. Assume that it some section of the bounds—possibly, but possibly not, the whole thing. When you mean [self bounds], say [self bounds].
The problem is most likely the difference between CGRectGetMidY([self bounds]) and CGRectGetMaxY([self bounds]). One includes a fraction that splits a pixel, whereas the other is a multiple of one pixel or close to it. (Not necessarily a multiple of 1—on a Retina Display, 1 pt = 2 pixels, so 1 pixel = 0.5 pt.) Try flooring both numbers and optionally adding 0.5, and see which way you like better.
There's no way to make it work out perfectly with a 0.6-pt line width. There is simply no whole number of pixels that works out to. All you can do is work out what looks best and do that.
*Written Elsewhere Too, the opposite of DRY.
I have an application with a custom CALayer subclass. In this layer subclass i have overwritten the - (void) drawInContext:(CGContextRef)ctx method. This works fine and all my custom content is drawn.
Now I wanted to add a custom property which gets animated when it's content is changed. And I need to redraw while the animation is running. I added the property like given in the answer to the following question: Animating a custom property of CALayer subclass
And I also added an CABasicAnimation instance for this property to my layer:
CABasicAnimation* theAnimation=[CABasicAnimation animationWithKeyPath:#"moveContentToLeft"];
theAnimation.duration=1.0;
theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
theAnimation.toValue=[NSNumber numberWithFloat:10.0];
[area addAnimation:theAnimation forKey:#"moveContentToLeft"];
In my draw method I have a NSLog statement in which I output the value of my property I'm animating.
My problem is that as soon as the animation starts all the content of the layer subclass is cleared. The NSLog outputs the values of my property that gets interpolated (so the drawInContext method) is called. But somehow the things it draws are not visible during the animation. At the end of the animation the original content gets visible again.
At the moment the animated property is not yet used while drawing the layer so I would expect that the normal content would get drawn again and I get the output of the NSLog with the interpolated values.
My layer is a child of another layer (inside a UIView). I tried to redraw the super layer at the end of the drawing method (with calling _parent setNeedsDisplay [parent is a ivar to the parent view]). This did not help. And I also have the feeling that this is not a good idea to do so.
I hope somebody can help me with this problem.
Update
Thanks to the example project from Matt Long I could see that my problem lies inside the drawing method. I extended his project so it shows the same problem. I think it is simpler to show than the original code ;)
- (void)drawInContext:(CGContextRef)ctx
{
NSLog(#"Getting called: Bob: %i", [self bob]);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(50 + [self bob], 50, 100, 100));
CGContextAddPath(ctx, path);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 1.0);
CGContextStrokePath(ctx);
CGPathRelease(path);
[_test testInContext:ctx]; // here is the problem
}
The ivar _test is a custom class which contains some drawing code (at the moment it draws a green box). The problem now is that this green box will not be drawn while the animation runs. As soon as the animation is ended the green box is visible again. The extended example project: http://dl.dropbox.com/u/5426092/ArbitraryPropertyAnimationNew.zip
It's hard to say what's going wrong without seeing more code. I have an example app that animates a custom property and the position of a layer at the same time. You can take a look at my source and see what's different.
I have created a CG context that is 800 pixels wide and 1200 pixels height. I have created CGLayer over this context that has been transformed (scaled, translated and rotated). So, at some point, as the CGLayer is bigger than the context and has been translated, rotated, etc., not all parts of this CGLayer falls inside the context. See next picture:
layer and context
As you can see by the picture, some parts of the layer falls outside the context area. When I render the final composition using
CGContextDrawLayerInRect(context, superRect, objectLayer);
it will render the full layer, including those unnecessary parts outside the context.
My problem is: if I can make it draw just the relevant parts inside the context I can make it render fast and save memory.
Is there any way to do that?
NOTE: LAYER contains transparency.
Please refrain from giving solutions that don't involve CGLayers.
thanks in advance.
You can clip the context using CGContextClip/-ToMask/-ToRect.
But i think it's actually cheaper/faster to simply 'dump' pixels into a context, than to have to calculate the clipping bounds and 'draw less'.
The surplus drawing doesn't (normally) use-up extra memory.
Can you use a CATiledLayer? This should lazy-load in squares ala google maps....
+(Class)layerClass
{
return [CATiledLayer class];
}
-(id)init {
CATiledLayer *tiledLayer = (CATiledLayer *) self.layer;
tiledLayer.tileSize = CGSize(x,x);
tiledLayer.levelsOfDetail = y;
tiledLayer.levelsOfDetailBias = z;
}
I'm new to Quartz2d so I hope this is an easy question to answer.
I have a scrollview whose content frame is 1024x768. Within this I push a custom view (with frame 1024x768) that uses Quartz2d to do some drawing. The idea is, I have a large area that the user can scroll around to see different parts.
The problem I'm having is, when I scroll on the device I get memory warning errors or terrible scrolling performance. This is no doubt because I am re-drawing the entire 1024x768 field. I thought that setting the clipping path to the UIScrollView offset would help.. and it does.. until i scroll.. in which case the view does not redraw until scrolling stops. telling the view to draw during scrollViewDidScroll also results in bad performance
can anyone tell me how i can optimize my drawing routine?
i have two images.. one of which is getting masked, and both being painted to the screen (one on top of the other)
- (void)drawRect:(CGRect)dirtyRect {
CGContextRef myContext = UIGraphicsGetCurrentContext();
// get our offset (where we've scrolled to)
CGPoint offset = scrollView.contentOffset;
// clip to our offset.. uncomment for good performance but terrible scrolling
//CGContextClipToRect(myContext, CGRectMake(offset.x, offset.y, 480, 320));
// make an image from the mask context
CGImageRef aMaskImage = CGBitmapContextCreateImage (myMaskContext);
// mask the first image
CGImageRef aImage = CGImageCreateWithMask(myImageRef1, aMaskImage);
CGContextDrawImage(myContext, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), myImageRef1);
CGContextDrawImage(myContext, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), aImage);
CGImageRelease(aImage);
CGImageRelease(aMaskImage);
}
thanks in advance for any help you can provide!
Generally to optimize scrolling big stuff you'd look into CATiledLayer.
I assume somewhere you call setNeedsDisplay. You need to call setNeedsDisplayInRect. Make sure to only pass the rect that changed.