CoreGraphics same code draw different - iphone

I write a msg background in tableviewcell, but when scrolling, the view become different. seems like the "context" store some state.
The code draw a round rect with a arrow.The arrow size should be fixed,but in fact it will change sometimes then scrolling.
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
CGFloat arrowHeight = 10;
CGFloat arrowWidth = 5;
CGFloat arrowOffset = 5;
CGFloat radius = 5;
CGFloat shadowHeight = 2;
CGFloat shadowOffset = 4;
CGColorRef shadowColor = [UIColor colorWithRed:0.2f
green:0.2f
blue:0.2f
alpha:0.5f].CGColor;
CGColorRef color;
color = [UIColor whiteColor].CGColor;
CGContextSaveGState(context);
CGContextMoveToPoint(context, width/2, 0);
CGContextAddArcToPoint(context, width - arrowWidth, 0, width - arrowWidth, height - shadowOffset, radius);
CGContextAddLineToPoint(context, width - arrowWidth, arrowOffset);
CGContextAddLineToPoint(context, width, arrowOffset + arrowHeight/2);
CGContextAddLineToPoint(context, width - arrowWidth, arrowOffset + arrowHeight);
CGContextAddArcToPoint(context, width - arrowWidth, height - shadowOffset, shadowOffset, height - shadowOffset, radius);
CGContextAddArcToPoint(context, shadowOffset, height - shadowOffset, shadowOffset, 0, radius);
CGContextAddArcToPoint(context, shadowOffset, 0, width, 0, radius);
CGContextSetShadowWithColor(context, CGSizeMake(0, shadowHeight), 3.0, shadowColor);
CGContextSetFillColorWithColor(context, color);
CGContextFillPath(context);
CGContextRestoreGState(context);
}
the effect like this:

I find the problem. the view should redraw when cell is reused,or the view will use the view in last cell to show.
so, just call [theView setNeedsDisplay] to let the view call drawRect again.

Related

adding white border along a circle UIImage

I have generated a circle UIImage using a mask as following (where masked_circle is a black circle):
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
UIImage *maskImage = [UIImage imageNamed:#"masked_circle.png"];
CGImageRef maskImageRef = [maskImage CGImage];
// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGFloat ratio = 0;
ratio = maskImage.size.width/ self.image_.size.width;
if(ratio * self.image_.size.height < maskImage.size.height) {
ratio = maskImage.size.height/ self.image_.size.height;
}
CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
CGRect rect2 = {{-((self.image_.size.width*ratio)-maskImage.size.width)/2 , -((self.image_.size.height*ratio)-maskImage.size.height)/2}, {self.image_.size.width*ratio, self.image_.size.height*ratio}};
CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
CGContextDrawImage(mainViewContentContext, rect2, self.image_.CGImage);
CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage *theImage = [UIImage imageWithCGImage:newImage];
Now after this I wanted to add a 1px white border around the circle image, how can I do so?
Here's a much simpler solution to turn any view, but specifically a UIImageView into a circle with a border of varying size and color. This of course assumes you're dealing with a square image like an icon.
#import <UIKit/UIKit.h>
#interface UIView (Shapes)
- (void)makeCircle;
- (void)makeCircleWithBorderColor:(UIColor *) color Width:(CGFloat) width;
#end
#implementation UIView (Shapes)
- (void)makeCircle {
CALayer *lyr = self.layer;
lyr.masksToBounds = YES;
lyr.cornerRadius = self.bounds.size.width / 2; // assumes image is a square
}
- (void)makeCircleWithBorderColor:(UIColor *) color Width:(CGFloat) width {
[self makeCircle];
CALayer *lyr = self.layer;
lyr.borderWidth = width;
lyr.borderColor = [color CGColor];
}
#end
Here's some code that draws a border around a frame with a corner radius. Make that radius equal to half size and you've got a circle!
CGFloat strokeWidth =1.0;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
CGFloat radius = 7.0;
CGRect rrect = self.bounds;
rrect.size.width = rrect.size.width - strokeWidth*2;
rrect.size.height = rrect.size.height - strokeWidth*2;
rrect.origin.x = rrect.origin.x + (strokeWidth / 2);
rrect.origin.y = rrect.origin.y + (strokeWidth / 2);
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);
if (radius > width/2.0)
radius = width/2.0;
if (radius > height/2.0)
radius = height/2.0;
CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(context, minx, midy);
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

How can I create a part of a filled circle using Core Graphics/Quartz

I have made a subclass of UIView and I am trying to draw part of a circle in my drawRect method.
I have tried using bezierPathWithArcCenter and filling it but that only result in a pie shape (image 3) and that's not what i'm after. I want to draw what you see in image 1 and 2.
Maybe I can clip a full circle somehow? The area around the circle needs to be transparent.
TompaLompas answer pointed me in the right direction (with the arc drawing part). However the complete solution and answer is like this:
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef ctx = UIGraphicsGetCurrentContext();
int radius = self.frame.size.width / 2;
CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
//Image 2
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextAddArc(ctx, center.x, center.y, radius, DEGREES_TO_RADIANS(225), DEGREES_TO_RADIANS(315), NO);
CGContextDrawPath(ctx, kCGPathFill);
}
try overriding drawRect with this:
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
float radius = 50.0f;
float x_left = rect.origin.x;
float x_left_center = x_left + radius;
float y_top = rect.origin.y;
float y_top_center = y_top + radius;
/* Begin path */
CGFloat white[4] = {0.0f, 204.0f/255.0f, 1.0f, 0.8f};
CGContextSetFillColor(context, white);
CGContextSetLineWidth(context, 1.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, x_left, y_top_center);
CGContextAddArcToPoint(context, x_left, y_top, x_left_center, y_top, radius);
CGContextAddLineToPoint(context,x_left, y_top + radius);
CGContextFillPath(context);
}
It will draw a rotated image number 2

How to create Hexagon in iPhone/iPad

I want to make UIView which is originally rectangular to Hexagon shape to be used in my application.
Please help me something on this.
Thanks in advance.
Subclass UView and override drawRect to draw a hexagon like so:
- (void)drawRect:(CGRect)rect
{
float polySize = 60; // change this
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform t0 = CGContextGetCTM(context);
t0 = CGAffineTransformInvert(t0);
CGContextConcatCTM(context, t0);
//Begin drawing setup
CGContextBeginPath(context);
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
CGContextSetLineWidth(context, 2.0);
CGPoint center;
//Start drawing polygon
center = CGPointMake(160, 90.0);
CGContextMoveToPoint(context, center.x, center.y + polySize);
for(int i = 1; i < 6; ++i)
{
CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
CGContextAddLineToPoint(context, center.x + x, center.y + y);
}
//Finish Drawing
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathStroke);
CGContextRestoreGState(context);
}
You can create a subclass of UIView and in it's -(void)drawRect: method draw a hexagon. Or Use UIImageView with image of hexagon

Can draw on only half of UIView

I am trying to draw grid on a UIView on a UIScrollView.
The width of UIView is about 1000 pixels. However, I can draw lines only
about first 340 pixels of the UIView. Can anyone help me on this?
The drawGrid function is
- (void)drawRect:(CGRect)rect
{
NSInteger width = 25 * 5 * 10;
NSInteger height = (10 * 2 + 10) * 12;
NSInteger i;
//Get the CGContext from this view
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw rectangle with a blue stroke color and white fill color
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextSetLineWidth(context, 2.0);
CGContextAddRect(context, CGRectMake(0.0, 0.0, width, height));
CGContextFillPath(context);
// Draw grid with red color
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
// Set the width of the pen mark
CGContextSetLineWidth(context, 0.2);
for (i = 0; i < height; i += 5)
{
if (i % 25 == 0)
{
CGContextSetLineWidth(context, 0.4);
// Draw a line
CGContextMoveToPoint(context, i, 0.0);
CGContextAddLineToPoint(context, i, width);
CGContextStrokePath(context);
CGContextSetLineWidth(context, 0.2);
}
else
{
// Draw a line
CGContextMoveToPoint(context, i, 0.0);
CGContextAddLineToPoint(context, i, width);
CGContextStrokePath(context);
}
}
for (i = 0; i < width; i += 5)
{
if (i % 25 == 0)
{
CGContextSetLineWidth(context, 0.4);
// Draw a line
CGContextMoveToPoint(context, 0.0, i);
CGContextAddLineToPoint(context, height, i);
CGContextStrokePath(context);
CGContextSetLineWidth(context, 0.2);
}
else
{
// Draw a line
CGContextMoveToPoint(context, 0.0, i);
CGContextAddLineToPoint(context, height, i);
CGContextStrokePath(context);
}
}
}
I am also setting up the UIScrollView and UIView as follows:
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
waveScrollView = [[WaveScrollView alloc] initWithFrame:frame];
CGRect waveframe = CGRectMake(0, 0, 25 * 5 * 10, (10 * 2 + 10) * 12);
EKGWaveView *ekgWaveView = [[EKGWaveView alloc] initWithFrame:waveframe];
waveScrollView.contentSize = CGSizeMake(waveframe.size.width, waveframe.size.height);
waveScrollView.maximumZoomScale = 4.0;
waveScrollView.minimumZoomScale = 0.75;
waveScrollView.clipsToBounds = YES;
waveScrollView.aView = ekgWaveView;
[waveScrollView addSubview:ekgWaveView];
waveScrollView.delegate = self;
[self.view addSubview:waveScrollView];
}
I appreciate any help. Thanks.
I'm pretty sure you've got some of your variables mixed up.
You're looping i from 0 to height but then you're using i as your x parameter when creating lines, and using width as your y parameter.

Smoothing a rounded stroke in Core Graphics

I am creating my own UITableViewCells with a gradient background. I have all the logic and drawing worked out, but one thing I want to fix is the "chunkiness" around the corners of my custom cell:
alt text http://grab.by/27SM
If you zoom in on the corners, you can see what I am talking about. Here is the code I a using to generate the cell:
CGContextRef c = UIGraphicsGetCurrentContext();
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef myGradient = nil;
CGFloat components[8] = TABLE_CELL_BACKGROUND;
CGContextSetStrokeColorWithColor(c, [[UAColor colorWithWhite:0.7 alpha:1] CGColor]);
CGContextSetLineWidth(c, 2);
CGContextSetAllowsAntialiasing(c, YES);
CGContextSetShouldAntialias(c, YES);
CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, minx, miny);
CGPathAddArcToPoint(path, NULL, minx, maxy, midx, maxy, kDefaultMargin);
CGPathAddArcToPoint(path, NULL, maxx, maxy, maxx, miny, kDefaultMargin);
CGPathAddLineToPoint(path, NULL, maxx, miny);
CGPathAddLineToPoint(path, NULL, minx, miny);
CGPathCloseSubpath(path);
// Fill and stroke the path
CGContextSaveGState(c);
CGContextAddPath(c, path);
CGContextClip(c);
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat mycomponents[8] = TABLE_CELL_BACKGROUND;
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents(myColorspace, mycomponents, locations, 2);
CGContextDrawLinearGradient(c, myGradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), 0);
CGContextRestoreGState(c);
CGContextAddPath(c, path);
CGContextStrokePath(c);
What can I do to smooth the edges while keeping a consistent edge thickness across all cells?
Your line width is set to 2 points. What's happening is that your code is calculating your bounding rect without understanding the width of the line. The result is that for every straight segment of your shape, only half of the stroke's width is visible. On the arc, the full stroke width is visible.
Here's the relevant segment of code from my app, Funversation, to draw the playing cards with rounded corners similar to what you have.
CGRect rect = [self bounds];
rect.size.width -= lineWidth;
rect.size.height -= lineWidth;
rect.origin.x += lineWidth / 2.0;
rect.origin.y += lineWidth / 2.0;
Add that before your calculation for minx, midx, maxx, etc. and the strokes for your shape should be uniform.
The other way to make the stroke consistent would be to move the AddPath and StrokePath calls up above the RestoreGState call—that is, stroke while clipped.
For a truly 2-pt-wide stroke with this solution, simply double the line width you put in the graphics state (i.e., set it to 4 pt), since half of it will be clipped out.