Hi i am making a sample app in which i wanto create a square for which i used the following code
- (void)viewDidLoad {
[super viewDidLoad];
[self drawRect:CGRectMake(0, 0, 300, 200)];
[[self view] setNeedsDisplay];
}
- (void) drawRect:(CGRect)rect
{
NSLog(#"drawRect");
CGFloat centerx = rect.size.width/2;
CGFloat centery = rect.size.height/2;
CGFloat half = 100/2;
CGRect theRect = CGRectMake(-half, -half, 100, 100);
// Grab the drawing context
CGContextRef context = UIGraphicsGetCurrentContext();
// like Processing pushMatrix
CGContextSaveGState(context);
CGContextTranslateCTM(context, centerx, centery);
// Uncomment to see the rotated square
//CGContextRotateCTM(context, rotation);
// Set red stroke
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
{
CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 1.0);
}
// Draw a rect with a red stroke
CGContextFillRect(context, theRect);
CGContextStrokeRect(context, theRect);
// like Processing popMatrix
CGContextRestoreGState(context);
[[self view] setNeedsDisplay];
}
But nothing is drawn on screen , dont know wheres the issue is .When i debug it the CGContextRef context was always 0x0 , i dont know why its 0x0 always am i missing something in my code.
It looks like you're trying to draw in a subclass of UIViewController. You need to subclass UIView to override the drawRect: method, which is then called automatically with a valid graphics context in place. You almost never call this method yourself.
To quote the Apple docs:
"To draw to the screen in an iOS application, you set up a UIView object and implement its drawRect: method to perform drawing. The view’s drawRect: method is called when the view is visible onscreen and its contents need updating. Before calling your custom drawRect: method, the view object automatically configures its drawing environment so that your code can start drawing immediately. As part of this configuration, the UIView object creates a graphics context (a CGContextRef opaque type) for the current drawing environment. You obtain this graphics context in your drawRect: method by calling the UIKit function UIGraphicsGetCurrentContext."
So essentailly, your code is on track, you just need to get it in the right place. It needs to be in the View object.
Related
i need to draw two lines. can i use the same UIView subclass to make both draws? after i create the UIView
draw2D *myView = [[draw2D alloc] initWithFrame:myRect];
if i change the method to use variables, can i change those values and recall the drawRect method to draw a different line?
- (void)drawRect:(CGRect)rect
{
CGContextRef context01 = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context01, 1.0);
CGContextSetStrokeColorWithColor(context01, [[UIColor blackColor]CGColor]);
CGContextMoveToPoint(context01, 0, 0);
CGContextAddLineToPoint(context01, 800, 0);
CGContextStrokePath(context01);
CGContextRef context02 = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context02, 1.0);
CGContextSetStrokeColorWithColor(context02, [[UIColor blackColor]CGColor]);
CGContextMoveToPoint(context02, 453, 0);
CGContextAddLineToPoint(context02, 453, 800);
CGContextStrokePath(context02);
}
Just call setNeedsDisplay on a view to force its drawRect method to be called again.
It doesn't redraw the view immediately, but it flags it as needing to be drawn again in the next view update cycle (updates happen roughly every 60th second). That means you can call setNeedsDisplay multiple times with no performance penalty.
can i use the same UIView subclass to make both draws?
sure
if i change the method to use variables, can i change those values and recall the drawRect method to draw a different line?
normally, you'd just create a new function or method with parameters for those variables:
static inline void imp_DrawLine(CGContextRef gtx, CGPoint start, CGPoint end) {
CGContextMoveToPoint(gtx, start.x, start.y);
CGContextAddLineToPoint(gtx, end.x, end.y);
CGContextStrokePath(gtx);
}
- (void)drawRect:(CGRect)rect
{
CGContextRef gtx = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(gtx, 1.0);
CGContextSetStrokeColorWithColor(gtx, [UIColor blackColor].CGColor);
imp_DrawLine(gtx, CGPointMake(0, 0), CGPointMake(800, 0));
imp_DrawLine(gtx, CGPointMake(453, 0), CGPointMake(453, 800));
}
I am animating an object along a path on the iPhone. The code works great using CAKeyframeAnimation. For debugging purposes, I would like to draw the line on the screen. I can't seem to do that using the current CGContextRef. Everywhere I look it says you need to subclass the UIView then override the drawRect method to draw on the screen. Is there anyway around this? If not, how do I pass data to the drawRect method so it knows what do draw?
EDIT:
Ok. I ended up subclassing UIView and implementing the drawing in the drawRect method. I can get it to draw to the screen by creating another method in the subclassed view (called drawPath) that sets an instance variable then calls setNeedsDisplay. That in turn fires the drawRect method which uses the instance variable to draw to the screen. Is this the best practice? What happens if I want to draw 20+ paths. I shouldn't have to create properties for all of these.
In your drawRect method of UIView put some code like this
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0,0 , 0.0);
CGContextSetLineWidth(context, 3.f);
CGContextBeginPath(context);
CGContextMoveToPoint(context,x1,y1);
CGContextAddLineToPoint(context, x2 , y2);
CGContextStrokePath(context);
If you want to use Core Graphics drawing use CALayer. If you do not want to subclass it, delegate drawing to the view.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
CALayer* myLayer = [CALayer new];
myLayer.delegate = self;
self.layer = myLayer;
}
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
// draw your path here
}
Do not forget to call [self.layer setNeedsDisplay]; when you need to redraw it.
I'v got this piece of code :
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] = {
1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
};
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors) / (sizeof(colors[0]) * 4));
CGColorSpaceRelease(rgb);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = theCell.backgroundView.bounds;
CGPoint start = CGPointMake(rect.origin.x, 0);
CGPoint end = CGPointMake(rect.origin.x, rect.size.height/2);
CGContextDrawLinearGradient(context, gradientRef, start, end, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
And I wonder how I can make it draw into a designated view and a clipping rect passed in parameters to my function. Tip: I don't mind about drawRect, I'm not subclassing anything.
Tip 2: I don't want to insert any layers that I won't be able to remove later.
Tip 3: This piece of code does not draw anything that my eyes could see..... :-( Missing a graphic port ?
Tip 4: I'd like to erase the draw simply changing the background color, and it's done...
CGContextRef context = UIGraphicsGetCurrentContext(); will get the graphics context for the current view, so if you call this in the drawRect: method of a UIView it will draw.
I don't understand what you mean by:
I don't mind about drawRect, I'm not
subclassing anything
but if you want to do custom drawing you must either override the drawRect: method or use layers. To use layers you would call CGContextRef context = CGLayerGetContext(theLayer); instead of CGContextRef context = UIGraphicsGetCurrentContext();.
Ok, so I looked at the documentation and it says that you can get a CGContextRef by calling UIGraphicsGetCurrentContext() from the drawRectMethod. Here's what it says: In an iOS application, you set up a UIView object to draw to and implement the drawRect: method to perform drawing. Before calling your custom drawRect: method, the view object automatically configures its drawing environment so that your code can start drawing immediately. As part of this configuration, the UIView object creates a graphics context (a CGContextRef opaque type) for the current drawing environment. You obtain this graphics context by calling the UIKit function UIGraphicsGetCurrentContext. You save and restore graphics contexts using the functions UIGraphicsPushContext and UIGraphicsPopContext.
You can create custom graphics context objects in situations where you want to draw somewhere other than your view. For example, you may want to capture a series of drawing commands and use them to create an image or a PDF file. To create the context, you use the CGBitmapContextCreate or CGPDFContextCreate function. After you have the context, you can pass it to the drawing functions needed to create your content.
When creating custom contexts, the coordinate system for those contexts is different from the native coordinate system used by iOS. Instead of the origin being in the upper-left corner of the drawing surface, it is in the lower-left corner and the axes point up and to the right. The coordinates you specify in your drawing commands must take this into consideration or the resulting image or PDF file may appear wrong when rendered. See “Creating a Bitmap Graphics Context” and “Creating a PDF Graphics Context” for details on using CGBitmapContextCreate and CGPDFContextCreate.
Might I recommend you look into the CAGradientLayer, and add it as a sublayer of your view? Lots simpler, and it will be hardware accelerated which matters for table cells.
Example stolen partly from here:
http://tumbljack.com/post/188089679/gpu-accelerated-awesomeness-with-cagradientlayer
#import <QuartzCore/QuartzCore.h> // Also import this framework
......
CAGradientLayer grad = [CAGradientLayer layer];
UIColor *colorOne = [UIColor colorWithHRed:1.0f Green:1.0f Blue:1.0f alpha:1.0f];
UIColor *colorTwo = [UIColor colorWithHRed:0.0f Green:0.0f Blue:0.0f alpha:1.0f];
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
grad.colors = colors;
CGRect rect = theCell.backgroundView.bounds;
rect.size.height = rect.size.height / 2;
grad.frame = rect;
[self.layer addsublayer:grad]
You may have to play with the colors a bit, not sure if you had the gradient tilted or not...
I have two UIScrollView instances and I want to draw a vertical line between them (not 100% height, more like 80%). How can I achieve this?
Use Core Graphics. Nest the two UIScrollViews inside another view and override the drawRect method on the parent. See Apple's UIView documentation for drawRect for more detail and the Core Graphics Context Reference for more information about drawing.
- (void) drawRect: (CGRect) rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw divider
UIGraphicsPushContext(context);
// Fill the background, this must happen if the view is not opaque.
if (self.opaque)
{
[[UIColor whiteColor ] set];
CGContextFillRect(context, rect);
}
[[UIColor grayColor] set];
CGContextSetLineWidth(context, 1);
CGContextBeginPath(context);
CGContextMoveToPoint(context, rect.size.width * 0.5, 0.1 * rect.size.height);
CGContextAddLineToPoint(context, rect.size.width * 0.5, 0.9 * rect.size.height);
CGContextStrokePath(context);
UIGraphicsPopContext();
}
edit
To address my oversight, there is no simple way that I know of to draw on top of subviews.
This behavior can be simulated using the same basic view hierarchy as above. Subclass UIView to create a completely transparent view that does not accept any touch events. Place the drawing code (I added a conditional for opacity in the code above) in the custom view and then insert an instance of the custom view at the front of the view hierarchy.
A vertical line between your views could also just be a thin, tall UIView (on top of the scroll views) with, say, a solid background color. This would mean you don't need to worry about custom drawing code. This also lets you lay it out in Interface Builder, use autosizing, etc.
in my application I use have the following views hierarchy:
UIView
----UIScrollView
--------TiledView (UIView subclass, uses CATiledLayer for drawing)
----OverlayView (UIView subclass)
In short - TiledView displays large tiled image I also apply custom rotation to that view:
tiledView.transform = CGAffineTransformMakeRotation(angle);
Drawing method for TiledView:
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
...
NSString *fileName = [NSString stringWithFormat:#"tile_%d_%d.jpg", y + 1, x + 1];
UIImage *image = [UIImage imageNamed:fileName];
[image drawInRect:rect];
}
UIScrollView allows both scrolling and zooming of its contents.
Overlay view lays over UIScrollView, has transparent background and performs some custom drawing. I use separate view to make sure that line width and font size are not affected by zoom scale in scroll view.
Drawing method for OverlayView:
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
// Custom drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0, 1);
CGContextSetLineWidth(context, lineWidth);
CGContextBeginPath(context);
CGContextMoveToPoint(context, (int)startPoint.x,(int) startPoint.y);
if (usesMidPoint)
CGContextAddLineToPoint(context, (int)midPoint.x, (int)midPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextStrokePath(context);
}
Initially everything works ok, but after some playing with the view (e.g. scrolling it to and fro etc) it crashes on some random line in one of the drawing functions. As an example app crashes on line:
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0, 1);
with stack:
#0 0x00503088 in CGColorEqualToColor
#1 0x00505430 in CGGStateSetStrokeColor
#2 0x005053b6 in setStrokeColorWithComponents
#3 0x0056150f in CGContextSetRGBStrokeColor
#4 0x000764ab in -[GADrawView drawRect:] at GADrawView.m:38
#5 0x016a7a78 in -[UIView(CALayerDelegate) drawLayer:inContext:]
#6 0x0077c007 in -[CALayer drawInContext:]
Am I missing any synchronization required between several graphics contexts? Or may be there's better way to do what I'm trying?
Found solution to the problem. As described in Apple's technical note CATiledLayer uses separate thread to fetch the contents for its tiles:
The CATiledLayer implements its
drawing by using a background thread
to fetch the contents of each tile,
however the drawing functions provided
by UIKit rely on a global context
stack, and as such when a CATiledLayer
starts rendering, using any of UIKit's
drawing functions can result in a race
condition.
So the solution is to move all drawing code from -drawRect: method to -drawLayer:inContext: and draw using only Core Graphics functions. Drawing with CoreGraphics also requires some transformations between coordinates systems - this post from apple forums helped with them (see drawLayer: method implementation).
So the correct drawing code for TiledView:
- (void)drawRect:(CGRect)rect {
//Still need to have this method implemented even if its empty!
}
-(void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx
{
// Do all your drawing here. Do not use UIGraphics to do any drawing, use Core Graphics instead.
// convert the CA coordinate system to the iPhone coordinate system
CGContextTranslateCTM(ctx, 0.0f, 0.0f);
CGContextScaleCTM(ctx, 1.0f, -1.0f);
CGRect box = CGContextGetClipBoundingBox(ctx);
// invert the Y-coord to translate between CA coords and iPhone coords
CGPoint pixelTopLeft = CGPointApplyAffineTransform(box.origin, CGAffineTransformMakeScale(1.0f, -1.0f));
NSString *tileUrlString = [self urlForPoint:pixelTopLeft];
UIImage *image = [UIImage imageNamed:tileUrlString];
CGContextDrawImage(ctx, box, [image CGImage]);
}