I've got an MKAnnotation subclass representing a cluster of map pins, with the number of pins in the cluster retrievable from the MKAnnotation subclass. For these annotations, I would like to display a grey circle with a black bold number representing the number of pins in the cluster. I've made an MKAnnotationView subclass which implements initWithAnnotation:reuseIdentifier and drawRect: methods, and this is my implementation of the drawRect: method:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 0.7f, 0.7f, 0.7f, 0.5f);
CGContextFillEllipseInRect(context, rect);
UIFont *font = [UIFont boldSystemFontOfSize: [UIFont smallSystemFontSize]];
NSString *label = [NSString stringWithFormat:#"%i", [(LocationGroupAnnotation *)self.annotation locationCount]];
CGPoint labelLocation;
if ([label length] == 1)
{
labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
} else if ([label length] == 2) {
labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
} else {
labelLocation = CGPointMake(rect.size.width / 2.0f, (rect.size.height / 2.0f) - (font.capHeight / 2.0f));
}
[label drawAtPoint:labelLocation withFont:font];
NSLog(#"Drawn label at (%f,%f)", labelLocation.x, labelLocation.y);
}
Ignore the values for labelLocation in the if statement, I'm going to adjust that according to how much space each letter takes up so that the number is centered. What I am getting at the moment is a translucent grey circle, but no text. I assume the text is being drawn in the wrong location. Also how do I specify that the text should appear in front of the circle rather than behind it?
Right before calling drawAtPoint, set the color that you want the text in otherwise it uses the color set by the CGContextSetRGBFillColor call above:
[[UIColor blackColor] set]; //or some color that contrasts with background
[label drawAtPoint:labelLocation withFont:font];
If you draw the text after the circle, it should appear above the circle and vice versa.
Related
I know that it is possible to add a transparent/translucent overlay view on a UIImagePickerController by using the drawrect method and by adjusting the alpha value of a CGRect UIColor for example. But is it possible to get a blurry effect instead of the translucent one ? I hope I am clear enough...
Thanks !
EDIT (add code)
- (void)drawRect:(CGRect)rect{
CGFloat toolbarSize = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ? 0 : 80;
CGFloat width = CGRectGetWidth(self.frame);
CGFloat height = CGRectGetHeight(self.frame) - toolbarSize;
CGFloat heightSpan = floor(height / 2 - self.cropSize.height / 2);
CGFloat widthSpan = floor(width / 2 - self.cropSize.width / 2);
//fill outer rect
[[UIColor colorWithRed:0. green:0. blue:0. alpha:0.5] set];
UIRectFill(self.bounds);
//fill inner border
[[UIColor colorWithRed:1. green:1. blue:1. alpha:0.5] set];
UIRectFrame(CGRectMake(widthSpan - 1, heightSpan - 1, self.cropSize.width + 2, self.cropSize.height + 2));
//fill inner rect
[[UIColor clearColor] set];
UIRectFill(CGRectMake(widthSpan, heightSpan, self.cropSize.width, self.cropSize.height));
}
}
I used this framework to achieve a blurry view, worked really well for me
FXBlurView
I have this picture, represented in red on the following image. I am trying to create this "hairlines" on the corners of the picture. When printed, the lines are intended to have 1 point of width and 15 points of length.
this is the code I am using...
1) the first thing I do is to create a context that is 60 points larger horizontally and vertically, so I can draw the black lines.
CGFloat newWidth = 60.0f + redImage.size.width;
CGFloat newHeight = 60.0f + redImage.size.height;
UIGraphicsBeginImageContextWithOptions(CGSizeMake( newWidth, newHeight),
YES,
[redImage scale]);
Then, I define the lines start...
NSArray *startOfPoints = [NSArray arrayWithObjects:
[NSValue valueWithCGPoint:CGPointMake(15, 0)],
[NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width, 0.0f)],
[NSValue valueWithCGPoint:CGPointMake(15, 15 + redImage.size.height)],
[NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width, 15 + redImage.size.height)],
[NSValue valueWithCGPoint:CGPointMake(0, 15)],
[NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width,15)],
[NSValue valueWithCGPoint:CGPointMake(0, 15 + redImage.size.height)],
[NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width,
15 + redImage.size.height)],
nil];
// these points define, in order, the start of each of the four vertical line and the start of each of the horizontal lines
Then, I draw the lines
CGContextRef c = UIGraphicsGetCurrentContext();
// go to the beginning of each vertical line and draw the line down
for (int i=0; i<4; i++) {
CGPoint aPoint = [[startOfPoints objectAtIndex:i] CGPointValue];
CGContextBeginPath(c);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextSetLineWidth(c, 1.0f);
CGContextMoveToPoint(c, aPoint.x, aPoint.y);
CGContextAddLineToPoint(c, aPoint.x, aPoint.y + 15.0f);
CGContextStrokePath(c);
}
// go to the beginning of each horizontal line and draw the line right
for (int i=5; i<9; i++) {
CGPoint aPoint = [[startOfPoints objectAtIndex:i] CGPointValue];
CGContextBeginPath(c);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextSetLineWidth(c, 1.0f);
CGContextMoveToPoint(c, aPoint.x, aPoint.y);
CGContextAddLineToPoint(c, aPoint.x + 15.0f, aPoint.y );
CGContextStrokePath(c);
}
but I end with a huge black square...
what am I missing?
NOTE: this code doesn't show the red image being drawn, this because I want to get the lines right. I am obtaining a huge black square, instead of the lines. The huge square has the size of the context and is the same I would obtain if I simply create the context and fill it with black... :(
When you create a bitmap graphics context using UIGraphicsBeginImageContextWithOptions, every pixel in the bitmap is initialized to all zeros, which is black (if you set opaque to YES, which you did) or transparent (if you set opaque to NO).
You can fill the bitmap with white before drawing anything else by doing this right after UIGraphicsBeginImageContextWithOptions returns:
[[UIColor whiteColor] setFill];
UIRectFill(CGRectMake(0, 0, newWidth, newHeight));
I setup a custom UITableViewCell and am subclassing it from UITableViewCell.
I am using it in my table and everything works except when I select the cell, it highlights the default blue but the text is gone. Once I diselect the text is back. Does anyone know how to fix it?
This is the custom cell code I am using
#import "TableViewCell.h"
#implementation TableViewCell
#synthesize text;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
}
return self;
}
- (void)setText:(NSString *)string {
text = [string copy];
[self setNeedsDisplay];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
}
- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();
CGGradientRef myGradient;
CGColorSpaceRef myColorspace;
size_t num_locations = 2;
CGFloat locations[2] = {0.0, 1.0};
CGFloat components[8] = {0.8f, 0.8f, 0.8f, 1.0f, // Bottom Colour: Red, Green, Blue, Alpha.
0.9f, 0.9f, 0.9f, 1.0}; // Top Colour: Red, Green, Blue, Alpha.
myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components,
locations, num_locations);
CGColorSpaceRelease(myColorspace);
CGPoint startPoint, endPoint;
startPoint.x = 0.0;
startPoint.y = self.frame.size.height;
endPoint.x = 0.0;
endPoint.y = 0.0;
CGContextDrawLinearGradient (c, myGradient, startPoint, endPoint, 0);
const CGFloat topSepColor[] = { 0.8f, 0.8f, 0.8f, 1.0f }; // Cell Seperator Colour - Top
CGGradientRelease(myGradient);
CGContextSetStrokeColor(c, topSepColor);
CGContextMoveToPoint(c, 0.0, 0.0);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, 0.0);
CGContextStrokePath(c);
const CGFloat bottomSepColor[] = { 0.5f, 0.5f, 0.5f, 1.0f }; // Cell Seperator Colour - Bottom
CGContextSetStrokeColor(c, bottomSepColor);
CGContextMoveToPoint(c, 0.0, self.frame.size.height);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, self.frame.size.height);
CGContextStrokePath(c);
[[UIColor blackColor] set];
[text drawInRect:CGRectMake(10, self.frame.size.height / 3.5, self.frame.size.width - 20, self.frame.size.height - 10) withFont:[UIFont boldSystemFontOfSize:15] lineBreakMode:UILineBreakModeWordWrap];
}
- (void)dealloc {
[super dealloc];
[text release];
}
#end
Apple advises againts overriding UITableViewCell's -drawRect. If you really want to do custom drawing, do it in UIView subclass and then add the instance of that class as UITableViewCell's content view. Also Apple encourages using UIImageView as cell's background view instead of custom-drawn UIView subclasses (where possible, of course). That applies not only to cell's background view. As far as I see it, it's possible to use UIImageView in your case since drawing code in -drawRect is not parametrized in any way, that is, doesn't have external dependencies.
May be you should take a look at that: http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
But if you don't want to take another approach, there's a highlightedTextColor property of UILabel
See: UITableViewCell: How to prevent blue selection background w/o borking isSelected property?
Check your settings for UITableViewCellStyle, and UITableViewCellSelectionStyle. They're explained in the UITableViewCell Class Reference. The default selection style has a blue background which may be "masking" your text while in that state.
Given a rectangular area, I want to render some text using a specific font and have the rendered text fill out the rectangle. As in the image below:
This is not the same as just changing font size
Rendering it as a bitmap and then scale it is not an option (it looks horrible)
Vector graphics is the way to do it
Solution
I came up with the following which seems to work for my purposes. The code draws a single line of text scaling to fill the bounds. Subclass UIView and replace drawRect as follows.
- (void)drawRect:(CGRect)rect
{
[self drawScaledString:#"Abcde"];
}
- (void)drawScaledString:(NSString *)string
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
NSAttributedString *attrString = [self generateAttributedString:string];
CFAttributedStringSetAttribute((CFMutableAttributedStringRef)attrString, CFRangeMake(0, string.length),
kCTForegroundColorAttributeName, [UIColor redColor].CGColor);
CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef) attrString);
// CTLineGetTypographicBounds doesn't give correct values,
// using GetImageBounds instead
CGRect imageBounds = CTLineGetImageBounds(line, context);
CGFloat width = imageBounds.size.width;
CGFloat height = imageBounds.size.height;
CGFloat padding = 0;
width += padding;
height += padding;
float sx = self.bounds.size.width / width;
float sy = self.bounds.size.height / height;
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 1, self.bounds.size.height);
CGContextScaleCTM(context, 1, -1);
CGContextScaleCTM(context, sx, sy);
CGContextSetTextPosition(context, -imageBounds.origin.x + padding/2, -imageBounds.origin.y + padding/2);
CTLineDraw(line, context);
CFRelease(line);
}
- (NSAttributedString *)generateAttributedString:(NSString *)string
{
CTFontRef helv = CTFontCreateWithName(CFSTR("Helvetica-Bold"),20, NULL);
CGColorRef color = [UIColor blackColor].CGColor;
NSDictionary *attributesDict = [NSDictionary dictionaryWithObjectsAndKeys:
(id)helv, (NSString *)kCTFontAttributeName,
color, (NSString *)kCTForegroundColorAttributeName,
nil];
NSAttributedString *attrString = [[[NSMutableAttributedString alloc]
initWithString:string
attributes:attributesDict] autorelease];
return attrString;
}
Example usage:
CGRect rect = CGRectMake(0, 0, 50, 280);
MyCTLabel *label = [[MyCTLabel alloc] initWithFrame:rect];
label.backgroundColor = [UIColor whiteColor];
[self addSubview:label];
You can set the UILabel transform property and scale the width:
[myLabel sizeToFit];
myLabel.transform = CGAffineTransformMakeScale(0.5, 1.0);
You could try CoreText. Get a CTFramesetter, calculate its rect, then calculate the affine transform necessary to compress that rect into the bounds you want and set that as the CTM. Then when you draw the text, it should stretch it appropriately at full quality.
you can also try with the UILabel's #property(nonatomic) BOOL adjustsFontSizeToFitWidth and #property minimumFontSize
Initially you can set the much higher value for font property and also initialize the minimumFontSize with a minimum font value.
For an iPhone application I want to draw a circle, that is only for an x percentage filled.
Something like this:
I have no problems calculating the radius, the degrees or the radians, that is no problem. Also drawing the circle is already done. But how do I get the iPhone SDK to draw the part that is filled.
I can draw a rectangle that size, but not part of a circle.
I just want to draw that on a a normal context.
Hope someone can give me any pointers here.
A lot of people have showed you how this can be done in Core Graphics but it can also be done with Core Animation which gives the big addition of easily being able to animate the percentage of the pie shape.
The following code will create both the ring and the partly filled layers (even though you said that you already can draw the ring) since its nice to have both the ring and the pie shape to be drawn using the same method.
If you animate the strokeStart or strokeEnd properties of the pieShape layer you will have the percentage animate. As with all Core Animation code you will need to add QuartzCore.framework to your project and include <QuartzCore/QuartzCore.h> in your code.
// Create a white ring that fills the entire frame and is 2 points wide.
// Its frame is inset 1 point to fit for the 2 point stroke width
CGFloat radius = MIN(self.frame.size.width,self.frame.size.height)/2;
CGFloat inset = 1;
CAShapeLayer *ring = [CAShapeLayer layer];
ring.path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(self.bounds, inset, inset)
cornerRadius:radius-inset].CGPath;
ring.fillColor = [UIColor clearColor].CGColor;
ring.strokeColor = [UIColor whiteColor].CGColor;
ring.lineWidth = 2;
// Create a white pie-chart-like shape inside the white ring (above).
// The outside of the shape should be inside the ring, therefore the
// frame needs to be inset radius/2 (for its outside to be on
// the outside of the ring) + 2 (to be 2 points in).
CAShapeLayer *pieShape = [CAShapeLayer layer];
inset = radius/2 + 2; // The inset is updated here
pieShape.path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(self.bounds, inset, inset)
cornerRadius:radius-inset].CGPath;
pieShape.fillColor = [UIColor clearColor].CGColor;
pieShape.strokeColor = [UIColor whiteColor].CGColor;
pieShape.lineWidth = (radius-inset)*2;
// Add sublayers
// NOTE: the following code is used in a UIView subclass (thus self is a view)
// If you instead chose to use this code in a view controller you should instead
// use self.view.layer to access the view of your view controller.
[self.layer addSublayer:ring];
[self.layer addSublayer:pieShape];
Use CGContext's arc functions:
CGContextAddArc(context,
centerX,
centerY,
radius,
startAngleRadians,
endAngleRadians,
clockwise ? 1 : 0);
See the documentation for CGContextAddArc().
Try this:
CGContextMoveToPoint(the center point)
CGContextAddLineToPoint(the starting point of the fill path on the circumference)
CGContextAddArcToPoint(the ending point of the fill path on the circumference)
CGContextAddLineToPoint(the center point)
CGContextFillPath
I implemented a pie progress view that looks similar to what you are doing. It's open source. Hopefully the source code will help.
SSPieProgressView.h source
SSPieProgressView.m source
CircleViewController.h
#import <UIKit/UIKit.h>
#interface CircleViewController : UIViewController
#end
CircleViewController.m
#import "CircleViewController.h"
#import "GraphView.h"
#interface CircleViewController ()
#end
#implementation CircleViewController
- (void)viewDidLoad {
[super viewDidLoad];
GraphView *graphView = [[GraphView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
graphView.backgroundColor = [UIColor whiteColor];
graphView.layer.borderColor = [UIColor redColor].CGColor;
graphView.layer.borderWidth = 1.0f;
[self.view addSubview:graphView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
GraphView.h
#import <UIKit/UIKit.h>
#interface GraphView : UIView
#end
GraphView.m
#import "GraphView.h"
#implementation GraphView
- (void)drawRect:(CGRect)rect {
CGPoint circleCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
[self drawCircleWithCircleCenter:(CGPoint) circleCenter radius:80 firstColor:[UIColor blueColor].CGColor secondeColor:[UIColor redColor].CGColor lineWidth:2 startDegree:0 currentDegree:90];
//[self drawCircleWithCircleCenter2:(CGPoint) circleCenter radius:80 firstColor:[UIColor blueColor].CGColor secondeColor:[UIColor redColor].CGColor lineWidth:2 startDegree:0 currentDegree:90];
}
- (void)drawCircleWithCircleCenter:(CGPoint) circleCenter
radius:(CGFloat)radius
firstColor:(CGColorRef)firstColor
secondeColor:(CGColorRef)secondeColor
lineWidth:(CGFloat)lineWidth
startDegree:(float)startDegree
currentDegree:(float)endDegree {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, lineWidth);
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegree], [self radians:endDegree], 0);
CGContextSetFillColorWithColor(context, firstColor);
CGContextFillPath(context);
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
CGContextAddArc(context, circleCenter.x, circleCenter.y, radius, [self radians:endDegree], [self radians:startDegree], 0);
CGContextSetFillColorWithColor(context, secondeColor);
CGContextFillPath(context);
}
- (void)drawCircleWithCircleCenter2:(CGPoint) circleCenter
radius:(CGFloat)radius
firstColor:(CGColorRef)firstColor
secondeColor:(CGColorRef)secondeColor
lineWidth:(CGFloat)lineWidth
startDegree:(float)startDegree
currentDegree:(float)endDegree {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, lineWidth);
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegree], [self radians:endDegree], 0);
CGContextSetFillColorWithColor(context, firstColor);
CGContextFillPath(context);
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
CGContextAddArc(context, circleCenter.x, circleCenter.y, radius, [self radians:endDegree], [self radians:startDegree], 0);
CGContextSetStrokeColorWithColor(context, secondeColor);
CGContextStrokePath(context);
}
-(float) radians:(double) degrees {
return degrees * M_PI / 180;
}
#end
note: you can use one of the 2 methods:
"drawCircleWithCircleCenter" or "drawCircleWithCircleCenter2"
this code if you want to split cell on 2 parts only
if you want to split cell on more than 2 parts you can check this : "Drawing a circle ,filled different parts with different color" and check the answer start with this Phrase "we have 6 class"
Well, since nobody used NSBezierPath so far, I figured I could provide the solution I recently used for the same problem:
-(void)drawRect:(NSRect)dirtyRect
{
double start = -10.0; //degrees
double end = 190.0; //degrees
NSPoint center = NSMakePoint(350, 200);
double radius = 50;
NSBezierPath *sector = [NSBezierPath bezierPath];
[sector moveToPoint:center];
[sector appendBezierPathWithArcWithCenter:center radius:radius startAngle:start endAngle:end];
[sector lineToPoint:center];
[sector fill];
}
Below is a full method I am using that does this with Core Graphics, adapting and expanding on mharper's comment above.
This code is for OSX Cocoa, but could easily be changed to iOS, by modifying how you get the context.
- (void)drawPieShapedCircleWithRadius:(CGFloat)radius
strokeColor:(CGColorRef)strokeColor
fillColor:(CGColorRef)fillColor
lineWidth:(CGFloat)lineWidth
currentDegrees:(float)currentDegrees
startDegrees:(float)startDegrees {
// get the context
CGContextRef context = [[NSGraphicsContext currentContext] graphicsPort];
// Set the color of the circle stroke and fill
CGContextSetStrokeColorWithColor(context, strokeColor);
CGContextSetFillColorWithColor(context, fillColor);
// Set the line width of the circle
CGContextSetLineWidth(context, 1);
// Calculate the middle of the circle
CGPoint circleCenter = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
// Move the bezier to the center of the circle
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); // move to the center point
// Draw the arc from the start point (hardcoded as the bottom of the circle) to the center
CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y + radius);
// Draw the arc around the circle from the start degrees point to the current degrees point
CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegrees], [self radians:startDegrees + currentDegrees], 0);
// Draw the line back into the center of the circle
CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y);
// Fill the circle
CGContextFillPath(context);
// Draw the line around the circle
CGContextStrokePath(context);
}
Try this code in a UIView, Example "MyChartClass"...
- (void)drawRect:(CGRect)rect {
int c=(int)[itemArray count];
CGFloat angleArray[c];
CGFloat offset;
int sum=0;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetAllowsAntialiasing(context, false);
CGContextSetShouldAntialias(context, false);
for(int i=0;i<[itemArray count];i++) {
sum+=[[itemArray objectAtIndex:i] intValue];
}
for(int i=0;i<[itemArray count];i++) {
angleArray[i]=(float)(([[itemArray objectAtIndex:i] intValue])/(float)sum)*(2*3.14);
CGContextMoveToPoint(context, radius, radius);
if(i==0)
CGContextAddArc(context, radius, radius, radius, 0,angleArray[i], 0);
else
CGContextAddArc(context, radius, radius, radius,offset,offset+angleArray[i], 0);
offset+=angleArray[i];
CGContextSetFillColorWithColor(context, ((UIColor *)[myColorArray objectAtIndex:i]).CGColor);
CGContextClosePath(context);
CGContextFillPath(context);
}
}
Implementation in your UIViewController
MyChartClass *myChartClass=[[MyChartClass alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
myChartClass.backgroundColor = [UIColor clearColor];
myChartClass.itemArray=[[NSArray alloc]initWithObjects:#"75",#"25", nil];
myChartClass.myColorArray=[[NSArray alloc]initWithObjects:[UIColor blackColor],[UIColor whiteColor], nil];
myChartClass.radius=100;
[self.view addSubview:myChartClass];
Regards.