I have custom mapOverlayView that display a text on a map using this code:
- (void)drawMapRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale
inContext:(CGContextRef)ctx
{
[super drawMapRect:mapRect zoomScale:zoomScale inContext:ctx];
NSString *t=text2display;
CGPoint point = CGPointMake(0,30);
CGFloat fontSize = (3 * MKRoadWidthAtZoomScale(zoomScale));
UIFont *font = [UIFont fontWithName:#"Helvetica-Bold" size:fontSize];
// Draw outlined text.
CGContextSetTextDrawingMode(ctx, kCGTextStroke);
// Make the thickness of the outline a function of the font size in use.
CGContextSetLineWidth(ctx, fontSize/18);
CGContextSetStrokeColorWithColor(ctx, [[UIColor blackColor] CGColor]);
[t drawAtPoint:point withFont:font];
CGContextRestoreGState(ctx);
UIGraphicsPopContext();
I have also a corresponding mapOverlay that create the rectangle area of the text:
- (MKMapRect)boundingMapRect
{
MKMapRect bounds = MKMapRectMake(upperLeft.x, upperLeft.y-Z , 2000, 2000);
return bounds;
}
I need the bottom line of text to always stay at same level. Thus, I need to change the value of Z in the above code depending on the size of text to be drawn.
The size of text depends on zoomScale of the map. Is there away to know the zoom scale of the map? so that I could calculate the size of the text.
Related
Our app contains several MKPolyline boundaries that all create a closed in polygon. These are primarily to display as an MKOverlay on a MKMapView but I'm looking for a solution to display these polygons as small thumbnails to be visible not on the MKMapView but instead as a standard UIImage or UIImageView.
Just to be clear, I'm wanting these small thumbnails would just be displayed as small shapes that have a stroke color and a fill color but without any map background.
Could anyone help me with this?
Here you go.
+ (UIImage *)imageNamed:(NSString *)name withColor:(UIColor *)color{
// load the image
UIImage *img = [UIImage imageNamed:name];
// begin a new image context, to draw our colored image onto
UIGraphicsBeginImageContext(img.size);
// get a reference to that context we created
CGContextRef context = UIGraphicsGetCurrentContext();
// set the fill color
[color setFill];
// translate/flip the graphics context (for transforming from CG* coords to UI* coords
CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// set the blend mode to color burn, and the original image
CGContextSetBlendMode(context, kCGBlendModeColorBurn);
CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
CGContextDrawImage(context, rect, img.CGImage);
// set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
CGContextClipToMask(context, rect, img.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context,kCGPathFill);
// generate a new UIImage from the graphics context we drew onto
UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//return the color-burned image
return coloredImg;
}
Please check this original post for detail description.
I had to do exactly the same in my own app. Here is my solution : I generate a UIView which represents path's shape. In your case the path is a MKPolyline.
Here is my code :
+ (UIView *)createShapeForGPX:(GPX *)gpx
withFrameSize:(CGSize)frameSize
lineColor:(UIColor *)lineColor {
// Array of coordinates (Adapt this code with your coordinates)
// Note : in my case I have a double loops because points are in paths
// and I can have many paths for one route. So I concact all points
// into one array to simplify the code for your case. If you also have
// many paths, you have to change a little bit next code.
NSMutableArray<NSValue *> *dataPoints = [NSMutableArray new];
for (NSArray *path in gpx.paths) {
for (NSDictionary *point in path) {
double latitude = [point[#"latitude"] doubleValue];
double longitude = [point[#"longitude"] doubleValue];
[dataPoints addObject:[NSValue valueWithCGPoint:CGPointMake(longitude, latitude)]];
}
}
// Graph bounds (You need to calculate topRightCoordinate and bottomleftCoordinate. You can do it in previous for loop)
double lngBorder = gpx.topRightCoordinate.longitude - gpx.bottomLeftCoordinate.longitude;
double latBorder = gpx.topRightCoordinate.latitude - gpx.bottomLeftCoordinate.latitude;
double middleLng = gpx.bottomLeftCoordinate.longitude + (lngBorder / 2.f);
double middleLat = gpx.bottomLeftCoordinate.latitude + (latBorder / 2.f);
double boundLength = MAX(lngBorder, latBorder);
// *** Drawing ***
CGFloat margin = 4.f;
UIView *graph = [UIView new];
graph.frame = CGRectMake(0, 0, frameSize.width - margin, frameSize.height - margin);
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *linePath = [UIBezierPath bezierPath];
float xAxisMin = middleLng - (boundLength / 2.f);
float xAxisMax = middleLng + (boundLength / 2.f);
float yAxisMin = middleLat - (boundLength / 2.f);
float yAxisMax = middleLat + (boundLength / 2.f);
int i = 0;
while (i < dataPoints.count) {
CGPoint point = [dataPoints[i] CGPointValue];
float xRatio = 1.0-((xAxisMax-point.x)/(xAxisMax-xAxisMin));
float yRatio = 1.0-((yAxisMax-point.y)/(yAxisMax-yAxisMin));
float x = xRatio*(frameSize.width - margin / 2);
float y = (1.0-yRatio)*(frameSize.height - margin);
if (i == 0) {
[linePath moveToPoint:CGPointMake(x, y)];
} else {
[linePath addLineToPoint:CGPointMake(x, y)];
}
i++;
}
// Line
line.lineWidth = 0.8;
line.path = linePath.CGPath;
line.fillColor = [[UIColor clearColor] CGColor];
line.strokeColor = [lineColor CGColor];
[graph.layer addSublayer:line];
graph.backgroundColor = [UIColor clearColor];
// Final view (add margins)
UIView *finalView = [UIView new];
finalView.backgroundColor = [UIColor clearColor];
finalView.frame = CGRectMake(0, 0, frameSize.width, frameSize.height);
graph.center = CGPointMake(CGRectGetMidX(finalView.bounds), CGRectGetMidY(finalView.bounds));
[finalView addSubview:graph];
return finalView;
}
In my case GPX class contains few values :
- NSArray<NSArray<NSDictionary *> *> *paths; : contains all points of all paths. In your case I think it is your MKPolyline.
- topRightCoordinate and bottomLeftCoordinate : Two CLLocationCoordinate2D that represent top right and bottom left virtual coordinates of my path (you have to calcul them also).
You call this method like that :
UIView *shape = [YOURCLASS createShapeForGPX:gpx withFrameSize:CGSizeMake(32, 32) lineColor:[UIColor blackColor]];
This solution is based on this question how to draw a line graph in ios? Any control which will help me show graph data in ios which gives a solution to draw a graph from points.
Maybe all this code is not usefull for you (like margins) but it should help you to find your own solution.
Here is how it displays in my app (in a UITableView) :
I want to know how could I add an activity indicator (in the middle of a HUD) to this drawrect method (i'm trying to create a hud with the activity on it)
- (void)drawRect:(CGRect)rect {
// Sets the rectangle to be 96 X 96.
const CGFloat boxWidth = 120.0f;
const CGFloat boxHeight = 120.0f;
// This method is used to calculate the position of the rectangle.
CGRect boxRect = CGRectMake( roundf(self.bounds.size.width - boxWidth) / 2.0f, roundf(self.bounds.size.height - boxHeight) / 2.0f, boxWidth,boxHeight);
// This draws the rectangle with rounded corners.
UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:boxRect cornerRadius:10.0f];
[[UIColor colorWithWhite:0.0f alpha:0.75] setFill];
[roundedRect fill];
[[UIColor whiteColor] set]; // Sets the color of the font to white.
UIFont *font = [UIFont boldSystemFontOfSize:16.0f]; // Sets the size of the font to 16.
CGSize textSize = [self.text sizeWithFont:font];
// Calculates where to draw the text.
CGPoint textPoint = CGPointMake( self.center.x - roundf(textSize.width / 2.0f), self.center.y - roundf(textSize.height / 2.0f) + boxHeight / 4.0f);
// Draws the text on the rectangle.
[self.text drawAtPoint:textPoint withFont:font];
}
Thanks!
You don't. Activity indicator is a type of view, so you'd add it as a subview of your HUD and it will draw itself.
This is the first time I've used core graphics and text so could be doing something very simple thats incorrect. I've been reading the documentation to try and see where i'm going wrong but can't see it so wonder if someone can help me spot the issue.
I'm trying to draw a simple little banner of information at the top of the screen but the text i want to appear in the banner is not drawn in the correct place.
In my view i'm creating my control as follows:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.banner = [[Banner alloc] initWithFrame:CGRectMake(0,20,768,200)];
[self.view addSubview:self.banner];
}
The controls code is as follows:
#import <CoreText/CoreText.h>
#import "Banner.h"
#implementation Banner
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Get the graphics context.
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw the banner border.
CGContextSaveGState(context);
UIColor *strokeColor = [UIColor blackColor];
CGContextSetStrokeColorWithColor(context, strokeColor.CGColor);
CGContextSetLineWidth(context, 5);
CGContextStrokeRect(context, CGRectMake(2,2,self.frame.size.width -4,100));
CGContextRestoreGState(context);
// Setup the text label & value.
NSString *addressLabelText = #"Address";
NSString *addressValue = #"123 Letsby Avenue\nSome Place\nSome City\nSome County\nSome Postcode";
UIFont *font = [UIFont fontWithName:#"Helvetica" size:14.0];
CGSize labelSize = [self getBoundsForString:addressLabelText usingFont:font];
CGSize valueSize = [self getBoundsForString:addressValue usingFont:font];
// So I want to Draw the label at X:10 Y:10 and the Value At X:65 Y:10
// So we get Something like:
// =============================
// || Address 123 letsby avenue
// || Some Place
// || Some City
// || Some County
// || Some Postcode
// =============================
CGRect labelBounds = CGRectMake(10,10,labelSize.width,labelSize.height);
// Move the address value over the margin width(10) + the label width + some spacing(5)
CGRect valueBounds = CGRectMake(10 + labelSize.width + 5, 10, valueSize.width, valueSize.height);
[self drawString: addressLabelText withFont: font inRect:labelBounds usingContext:context];
[self drawString: addressValue withFont: font inRect:valueBounds usingContext:context];
// The text hasn't drawn where i thought it should. Draw a rect there to make sure i had the right bounds
UIColor *rectFillColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.3];
CGContextSaveGState(context);
CGContextSetFillColorWithColor(context, [rectFillColor CGColor]);
CGContextFillRect(context, labelBounds);
CGContextFillRect(context, valueBounds);
CGContextRestoreGState(context);
//Hmm that is drawing in the right place. Whats going wrong with drawing the text.
[self setNeedsDisplay];
}
-(void) drawString:(NSString*) string withFont:(UIFont*)font inRect:(CGRect)rect usingContext:(CGContextRef) context
{
CGContextSaveGState(context);
// flipping the coordinate system.
CGContextTranslateCTM(context, 0, 200); // The control is rendered in a frame 200 high.
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
// Define the path we are going to draw the text on.
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, rect);
CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
CFAttributedStringReplaceString (attrString, CFRangeMake(0, 0), (CFStringRef)string);
// Create the framesetter with the attributed string.
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
CFRelease(attrString);
// Create a frame.
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);
// Draw the specified frame in the given context.
CTFrameDraw(frame, context);
CGContextRestoreGState(context);
CFRelease(frame);
CFRelease(path);
CFRelease(framesetter);
}
-(CGSize) getBoundsForString:(NSString *)string usingFont:(UIFont *)font
{
return [string boundingRectWithSize:CGSizeMake(999,999)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:[NSDictionary dictionaryWithObject:font forKey:NSFontAttributeName]
context:nil].size;
}
#end
The result of this is some blue rects drawn in the banner where i would expect the text to be but the text actually appears outside of the banner and I'm puzzled why.
https://www.dropbox.com/s/q2ap9tl4okaka49/Banner.png
I've found what seems to work for my code above... changing this:
-(void) drawString:(NSString*) string withFont:(UIFont*)font inRect:(CGRect)rect usingContext:(CGContextRef) context
{
CGContextSaveGState(context);
// flipping the coordinate system.
CGContextTranslateCTM(context, 0, 200); // The control is rendered in a frame 200 high.
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
to
-(void) drawString:(NSString*) string withFont:(UIFont*)font inRect:(CGRect)rect usingContext:(CGContextRef) context
{
CGContextSaveGState(context);
// flipping the coordinate system.
CGContextTranslateCTM(context, 0, rect.size.height+(2*rect.origin.y));
CGContextScaleCTM(context, 1.0, -1.0);
The line following line doesn't seem to change anything.
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
And changing this line:
CGContextTranslateCTM(context, 0, 200);
to
CGContextTranslateCTM(context, 0, rect.size.height+(2*rect.origin.y));
places the text correctly where i'd expect it to be.... using Xamarin and the equivalent c# I have to invert the result of the height + 2Y result :-S
I have one UIScrollView with a UIImageView inside from where I obtain a cropped UIImage (considering scale, offset, bounds,...). On the other hand, I have a UILabel which I can rotate, pinch and pan anywhere over the UIScrollView. The problem comes when I try to generate the final image with the label text inside (with it's original/equivalent position, rotation,...) on the cropped UIImage (bigger than screen size).
I've tried everything. This is my last attempt trying to position the text, but it's always misplaced.
// Compute rect to draw the text inside
CGSize imageSize = inImage.size;
NSDictionary *attr = #{NSForegroundColorAttributeName: fontColor, NSFontAttributeName: textFont};
CGSize textSize = [text sizeWithAttributes:attr];
CGRect textRect = CGRectMake(labelCenterPoint.x, labelCenterPoint.y, textSize.width, textSize.height);
// Create the image
UIGraphicsBeginImageContext(imageSize);
[inImage drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
// Rotate text from center
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM( context, 0.5f * textSize.width, 0.5f * textSize.height ) ;
CGContextRotateCTM(context, rotation);
[text drawInRect:CGRectIntegral(textRect) withAttributes:attr];
UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I think the problem is the textRect origin. Do I have to make the UILabel a subView of the UIScrollView too and make the textRect origin relative to the UIScrollView parameters? or am I missing something?. Is there a better way?.
Thanks in advance!.
Edit:
I have finally found an acceptable solution (although is not too much precise). I think the problem was about the two existing coordinate systems, so I tried a different approach:
// Calculate the relative position of the UILabel with respect
// to the ScrollView that contains the image
float xPosition = label.frame.origin.x - scrollView.frame.origin.x;
float yPosition = label.frame.origin.y - scrollView.frame.origin.y;
// Calculate the proportion to apply to the position
// (the image is bigger than screen)
float xProportion = image.frame.size.width / scrollView.frame.size.width;
float yProportion = image.frame.size.height / scrollView.frame.size.height;
UIImageView *testView = [[UIImageView alloc] initWithImage:image];
UILabel *tempLabel = [[UILabel alloc] initWithFrame:
CGRectMake((xPosition*xProportion),
(yPosition*yProportion),
label.frame.size.width*xProportion,
label.frame.size.height*yProportion)];
tempLabel.text = label.text;
tempLabel.font = [UIFont fontWithName:label.font.fontName
size:label.font.pointSize*3];
tempLabel.textColor = label.textColor;
tempLabel.textAlignment = NSTextAlignmentCenter;
tempLabel.transform = CGAffineTransformMakeRotation(rotation);
tempLabel.adjustsFontSizeToFitWidth = YES;
tempLabel.minimumScaleFactor = 0.05;
[testView addSubview:tempLabel];
UIGraphicsBeginImageContext(testView.image.size);
[testView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *imageWithText = UIGraphicsGetImageFromCurrentImageContext();
I hope this may help someone. All suggestions are welcome of course.
I have placed a view on a viewController and I want to draw a rectangle in this view, but with a custom height. I determine the height based on a parameter in my viewController.
So for example. If my parameter is 50, I want the rectangle to have the height of 50% of the UIView.
2 questions:
how can I pass the height to the custom drawRect?
how do I make the rectangle be placed on the bottom of the UIView?
I have placed the view using Interface Builder and I have implemented the drawRect in a subclass of UIView and used this as Custom Class for my UIView.
So in the custom class I have:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
UIColor * lightGrayColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0 blue:230.0/255.0 alpha:1.0];
CGRect paperRect = self.bounds;
drawLinearGradient(context, paperRect, lightGrayColor.CGColor, [UIColor clearColor].CGColor);
}
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = #[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextSaveGState(context);
CGContextAddRect(context, rect);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}
This draws a nice gradient rectangle in my view but it fills the complete UIView.
This is because of the self.bounds.
I have added a property *height to my custom class, but I don't know how to fill this from my viewController. So I want it to start at the bottom off the UIView, and make it as high as I have determined (a % of the real height).
Anybody knows how I can achieve this?
have you set your custom view class in identity inspector in interface builder?
you can set the height property from your viewController:
((MyViewClass *) self.myView).height = myCalculatedValue;
then implement drawRect:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
UIColor * lightGrayColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0 blue:230.0/255.0 alpha:1.0];
CGRect paperRect = self.bounds;
paperRect.origin.y = paperRect.size.height - self.height;
paperRect.size.height = self.height;
//assuming your height property is of CGFloat type
drawLinearGradient(context, paperRect, lightGrayColor.CGColor, [UIColor clearColor].CGColor);
}
this will draw your gradient from (height) points above the bottom to the bottom
I think you can get calculate 50% of screen height and then substract new view height from the full screen Height
youParameter = 50; // Lets assume this is your parametere
int heightOfView = ([UIScreen mainScreen].bounds.size.height * yourParameter) / 100;
// For placing the view to the bottom;
CGRect newFrame;
frame.origin.y = [UIScreen mainScreen].bounds.size.height - heightOfView;
frame.origin.x = 0;
frame.size.width = [UIScreen mainScreen].bounds.size.width; // assuming it will take full width
frame.size.height = heightOfView;
youViewToChange.frame = newFrame; // normally do this or
To pass the value to drawRect you can do:
[self drawRect:newFrame];