Newbie Q.
I wish to subclass a UIView so that it renders a circle.
How is that done in an iPhone?
In the drawRect: method do:
- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIGraphicsPushContext(ctx);
CGContextSetRGBFillColor(ctx, 1.0f, 1.0f, 1.0f, 1.0f); // white color
CGContextFillEllipseInRect(ctx, CGRectMake(10.0f, 10.0f, 100.0f, 100.0f)); // a white filled circle with a diameter of 100 pixels, centered in (60, 60)
UIGraphicsPopContext();
}
Related
I am creating a drawing app. One of the features is multicolour line drawing. It should work like user touch up the screen and leads on it drawing a line. Colour of the line changes smoothly. Like that http://www.examples.pavelgatilov.com/Screen%20Shot%202013-09-22%20at%208.37.42%20PM.png
I tried several approaches, but haven't been lucky.
My line drawing method is below:
- (void) drawLineFrom:(CGPoint)from to:(CGPoint)to width:(CGFloat)width
{
self.drawColor = toolColor;
UIGraphicsBeginImageContext(self.frame.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextScaleCTM(ctx, 1.0f, -1.0f);
CGContextTranslateCTM(ctx, 0.0f, -self.frame.size.height);
if (drawImage != nil) {
CGRect rect = CGRectMake(0.0f, 0.0f, self.frame.size.width, self.frame.size.height);
CGContextDrawImage(ctx, rect, drawImage.CGImage);
}
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, width);
CGContextSetStrokeColorWithColor(ctx, self.drawColor.CGColor);
CGContextMoveToPoint(ctx, from.x, from.y);
CGContextAddLineToPoint(ctx, to.x, to.y);
CGContextStrokePath(ctx);
CGContextFlush(ctx);
drawImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
drawLayer.contents = (id)drawImage.CGImage;
}
Thanks for your help
Depending on exactly what colours, how they change and what effect you want / what happens with turns in the line, you may want to look at some combination of:
CGContextDrawLinearGradient with masking to the users drawn path.
colorWithPatternImage:
CGContextDrawLinearGradient drawn behind another layer and drawing transparency into the top layer with kCGBlendModeClear
I have a CGContextRef and can draw on it and specify the alpha, and if I try and use it it works perfectly. However, I am trying to colourise it (currently either red or green), but whatever blend mode I choose, the alpha is set to 1 (because I am drawing with alpha as 1). Drawing it the correct colour is not really a viable option, as I would like to be able to colour UIImages loaded from the filesystem as well, so how should I achieve this?
Edit: Example code (width and height are predefined floats, points is an array of CGPoints all of which lie inside the context and color is a UIColor with an opacity of 100%) -
UIGraphicsBeginImageContext(CGSizeMake(width,height));
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextClearRect(contextRef, CGRectMake(0.0f, 0.0f, width, height));
CGContextSetRGBStrokeColor(contextRef, 0.0f, 0.0f, 0.0f, 1.0f);
CGContextSetRGBFillColor(contextRef, 1.0f, 1.0f, 1.0f, 1.0f);
CGContextSetLineWidth(contextRef, lineWidth);
CGContextBeginPath(contextRef);
CGContextMoveToPoint(contextRef, points[0].x, points[0].y);
for (int i = 1; i < 4; i++) {
CGContextAddLineToPoint(contextRef, points[i].x, points[i].y);
}
CGContextAddLineToPoint(contextRef, points[0].x, points[0].y); // Encloses shape
CGContextDrawPath(contextRef, kCGPathFillStroke);
[color setFill];
CGContextBeginPath(contextRef);
CGContextSetBlendMode(contextRef, kCGBlendModeMultiply);
CGContextAddRect(contextRef, CGRectMake(0.0f, 0.0f, width, height));
CGContextDrawPath(contextRef, kCGPathFill);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Thank you in advance for your help,
jrtc27
The problem was I needed a CGContextClipToMask. This meant my code required the following:
CGContextTranslateCTM(contextRef, 0, height);
CGContextScaleCTM(contextRef, 1.0, -1.0);
to convert the coordinates and then
CGRect rect = CGRectMake(0.0f, 0.0f, width, height);
CGContextClipToMask(contextRef, rect, UIGraphicsGetImageFromCurrentImageContext().CGImage);
to fix it.
can anyone give me simple code to create a line in iphone using drawrect?
Go through the blog tutorial for drawing shape including line
http://howtomakeiphoneapps.com/2009/08/how-to-draw-shapes-with-core-graphics/
Edited: Below is the code for drawing line
- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();
CGFloat red[4] = {1.0f, 0.0f, 0.0f, 1.0f};
CGContextSetStrokeColor(c, red);
CGContextBeginPath(c);
CGContextMoveToPoint(c, 5.0f, 5.0f);
CGContextAddLineToPoint(c, 50.0f, 50.0f);
CGContextStrokePath(c);
}
I've been trying to build a view that looks similar to the "stocks" application (surprise). What I would like is to have the scroller bar outside of my rounded table view, shown in the image link below, but clip the cell separators. You can see how they overlap the scroller bar, which is annoying. I can't figure out how Apple put the scroller bar in a spot that looks like it is outside their table. Any ideas? (sorry, can't imbed images yet because I'm a new user).
Scroller Problem Image
You may draw your own separators in drawRect method of UITableViewCell:
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(ctx, 1.0f, 1.0f, 1.0f, 1.0f);
CGContextSetLineWidth(ctx, 1.0f);
CGContextMoveToPoint(ctx, 0, self.bounds.size.height);
CGContextAddLineToPoint(ctx, self.bounds.size.width - 20, self.bounds.size.height);
CGContextStrokePath(ctx);
[super drawRect:rect];
}
Does anyone know how to animate a radar animation like the image below?
alt text http://img197.imageshack.us/img197/7124/circle0.png
With it growing outwards? I have to draw the circle using Quartz or some other way?
To draw a static circle in a UIView subclass:
- (void)drawRect:(CGRect)rect
{
CGRect rect = { 0.0f, 0.0f, 100.0f, 100.0f };
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextSetLineWidth(context, 2.0f);
CGContextAddEllipseInRect(context, rect);
CGContextStrokePath(context);
}
From there you just need to animate it with a timer, vary the size of the rect, and add more circles.