I am writing some text to a quartz context.
I have a box of 500 x 200 pixels and I am writing some text inside. The box can have any aspect ratio but the text will always write with the font proportions as it is. What I want is to scale the font vertically and keep the horizontal scale.
See the picture. The first box represents what I am getting, the second one, what I want.
this is how I am writing it...
CGRect rect = CGRectMake(0,0,500,200);
[myText drawInRect:rect
withFont:aFont
lineBreakMode:UILineBreakModeTailTruncation
alignment:UITextAlignmentCenter];
is there a way to scale the font vertically?
NOTE: as this is being written in a PDF context, I don't want to
render the text to a image context and scale it vertically, because I
don't want to lose resolution.
thanks
- (void) scaleTextVerticallyWithContext:(CGContextRef)myContext withRect:(CGRect)contextRect
{
CGFloat w, h;
w = contextRect.size.width;
h = contextRect.size.height;
CGAffineTransform myTextTransform;
CGContextSelectFont (myContext, "Helvetica-Bold", h/10, kCGEncodingMacRoman);
CGContextSetCharacterSpacing (myContext, 10);
CGContextSetTextDrawingMode (myContext, kCGTextFillStroke);
CGContextSetRGBFillColor (myContext, 0, 1, 0, .5);
CGContextSetRGBStrokeColor (myContext, 0, 0, 1, 1);
/*
* CGAffineTransformMakeScale ( CGFloat sx, CGFloat sy );
* sx: The factor by which to scale the x-axis of the coordinate system.
* sy: The factor by which to scale the y-axis of the coordinate system.
*/
myTextTransform = CGAffineTransformMakeScale(1,8);
CGContextSetTextMatrix (myContext, myTextTransform);
CGContextShowTextAtPoint (myContext, 40, 0, "Hello There", 9);
}
- (void)drawRect:(CGRect)rect{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect viewBounds = self.bounds;
CGContextTranslateCTM(context, 0, viewBounds.size.height);
CGContextScaleCTM(context, 1, -1);
[self scaleTextVerticallyWithContext:context withRect:viewBounds];
}
Related
I'm trying to show progress by having a circle fill up with another circle inside of it. Can someone help me achieve this? I may be going about this the wrong way.
Here is my code:
- (void)drawRect:(CGRect)rect
{
rect = CGRectMake(0, 400, 500, 500);
[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 500, 500) cornerRadius:50.0] addClip];
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, 2.0);
CGContextSetRGBFillColor(contextRef, 111/255.0f, 116/255.0f, 128/255.0f, 1.0);
CGRect circlePoint = (CGRectMake(0, 0, rect.size.width, rect.size.height));
CGContextFillEllipseInRect(contextRef, circlePoint);
CGContextBeginPath(contextRef);
float c = 20; //Number that should cause the green progress to increase and decrease
CGContextAddArc(contextRef, 250, 250, 250, 0, M_PI, 0);
CGContextClosePath(contextRef); // could be omitted
UIColor *color = [UIColor greenColor];
CGContextSetFillColorWithColor(contextRef, color.CGColor);
CGContextFillPath(contextRef);
}
And here is a screenshot of how it looks right now. I basically want to be able to control the progress of the green inside using my float c; variable.
I've tried playing around with CGContextAddArc, but I can't get grow to the size of the circle as "c" increases and same when I decrease the value of "c"
use your c to say from where to where
// draw the pie part
CGContextMoveToPoint(_viewContext, centerX, centerY);
CGContextAddArc(_viewContext, centerX, centerY, pieRadius, radians(startDegrees), radians(endDegrees), 0);
CGContextClosePath(_viewContext);
CGContextFillPath(_viewContext);
startDegrees = 0
endDegress = c
_viewContext = contextRef
centerX/CenterY = center of bounds
PieRadius = radius you want :D in pixels IIRC
to convert deg to rad
#define pi 3.14159265
double radians(double percentage)
{
return (percentage/100)*360 * (pi/180);
}
I'm trying to add a text to an UIImage and I'm getting a pixelated drawing.
I have tried some other answers with no success:
Drawing on the retina display using CoreGraphics - Image pixelated
Retina display core graphics font quality
Drawing with Core Graphics looks chunky on Retina display
My code:
-(UIImage *)addText:(UIImage *)imgV text:(NSString *)text1
{
int w = self.frame.size.width * 2;
int h = self.frame.size.height * 2;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate
(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), imgV.CGImage);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1);
char* text = (char *)[text1 cStringUsingEncoding:NSASCIIStringEncoding];
CGContextSelectFont(context, "Arial", 24, kCGEncodingMacRoman);
// Adjust text;
CGContextSetTextDrawingMode(context, kCGTextInvisible);
CGContextShowTextAtPoint(context, 0, 0, text, strlen(text));
CGPoint pt = CGContextGetTextPosition(context);
float posx = (w/2 - pt.x)/2.0;
float posy = 54.0;
CGContextSetTextDrawingMode(context, kCGTextFill);
CGContextSetRGBFillColor(context, 255, 255, 255, 1.0);
CGContextShowTextAtPoint(context, posx, posy, text, strlen(text));
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return [UIImage imageWithCGImage:imageMasked];
}
Like Peter said, use UIGraphicsBeginImageContextWithOptions. You might want to pass image.scale to the scale attribute (where image.scale is the scale of one of the images you're drawing), or simply use [UIScreen mainScreen].scale.
This code can be made simpler overall. Try something like:
// Create the image context
UIGraphicsBeginImageContextWithOptions(_baseImage.size, NO, _baseImage.scale);
// Draw the image
CGRect rect = CGRectMake(0, 0, _baseImage.size.width, _baseImage.size.height);
[_baseImage drawInRect:rect];
// Get a vertically centered rect for the text drawing
rect.origin.y = (rect.size.height - FONT_SIZE) / 2 - 2;
rect = CGRectIntegral(rect);
rect.size.height = FONT_SIZE;
// Draw the text
UIFont *font = [UIFont boldSystemFontOfSize:FONT_SIZE];
[[UIColor whiteColor] set];
[text drawInRect:rect withFont:font lineBreakMode:NSLineBreakByClipping alignment:NSTextAlignmentCenter];
// Get and return the new image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
Where text is an NSString object.
I was facing the exact same problem and posted a question last night to which no-one replied. I have combined fnf's suggested changes with Clif Viegas's answer in the following question:
CGContextDrawImage draws image upside down when passed UIImage.CGImage
to come up with the solution. My addText method is slightly different from yours:
+(UIImage *)addTextToImage:(UIImage *)img text:(NSString *)text1{
int w = img.size.width;
int h = img.size.height;
CGSize size = CGSizeMake(w, h);
if (UIGraphicsBeginImageContextWithOptions != NULL) {
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
} else {
UIGraphicsBeginImageContext(size);
}
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0,h);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1);
char* text = (char *)[text1 cStringUsingEncoding:NSASCIIStringEncoding];// \"05/05/09\";
CGContextSelectFont(context, "Times New Roman", 14, kCGEncodingMacRoman);
CGContextSetTextDrawingMode(context, kCGTextFill);
CGContextSetRGBFillColor(context, 0, 0, 0, 1);
//rotate text
CGContextSetTextMatrix(context, CGAffineTransformMakeRotation( -M_PI/8 ));
CGContextShowTextAtPoint(context, 70, 88, text, strlen(text));
CGColorSpaceRelease(colorSpace);
UIGraphicsEndImageContext();
return newImg;
}
In summary, what I have done is add
if (UIGraphicsBeginImageContextWithOptions != NULL) {
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
} else {
UIGraphicsBeginImageContext(size);
}
Remove
// CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
and put
CGContextRef context = UIGraphicsGetCurrentContext();
instead. But this causes the image to be upside down. Hence I put
CGContextTranslateCTM(context, 0,h);
CGContextScaleCTM(context, 1.0, -1.0);
just before
CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);
This way you can use CG functions instead of using drawInRect etc.
Don't forget
UIGraphicsEndImageContext
at the end. Hope this helps.
I'm trying to simply draw some text with a stroke and then apply a drop shaddow, but the stroke is being applied to drop shadow. How do I prevent this?
// Setup context
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
// draw photo into context
CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);
// Set Text Font
CGContextSelectFont(context, font.fontName.UTF8String, fontSize, kCGEncodingMacRoman);
// Set Text Drawing Mode
CGContextSetTextDrawingMode(context, kCGTextFillStroke);
// Set text fill color
CGColorRef tmpColor = color.CGColor;
CGFloat newComponents[4] = {};
memcpy(newComponents, CGColorGetComponents(tmpColor), sizeof(newComponents));
CGContextSetRGBFillColor(context, newComponents[0], newComponents[1], newComponents[2], newComponents[3]);
// Calculate Height
UIFont *testFont = [UIFont fontWithName:font.fontName size:fontSize];
CGSize size = [text sizeWithFont:testFont];
// Setup Font Shadow
CGSize shadowSize = CGSizeMake(6, 6);
CGContextSetShadowWithColor(context, shadowSize, 1.0, [[UIColor darkGrayColor] CGColor]);
// Set Stroke Color
CGContextSetRGBStrokeColor(context, 0, 255, 0, 1);
CGContextSetLineWidth(context, 2.0);
// draw text at location centered based on width.
CGContextShowTextAtPoint(context, (w / 2) - (textWidth / 2), h - size.height, ctext, strlen(ctext));
// Render Bitmap
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
UIImage *returnImage = [UIImage imageWithCGImage:imageMasked];
Because your text drawing mode is kCGTextFillStroke, CGContextShowTextAtPoint is first drawing the fill (and generating a shadow for it), and then drawing the stroke (which gets its own shadow).
To fix it, use a transparency layer.
Note that it will draw much faster if you use CGContextBeginTransparencyLayerWithRect() and pass in as small a rect as you can.
Alternatively: if it's a good enough approximation, you might consider drawing your text in two steps:
fill, with shadow
stroke, with no shadow
If your stroke is small, the difference will not be very perceptible, and it will draw considerably faster.
i am creating an iphone app for creating pdf. I am using the following code:
[self drawRect:CGRectMake(0, 0, 100, 20 )text:#"last Name"xVal:10 yVal:-30 len:9];
[self drawRect:CGRectMake(0, 0, 100, 20 )text:#"First Name"xVal:180 yVal:30 len:10];
[self drawRect:CGRectMake(0, 0, 100, 20 )text:#"Middle Name"xVal:330 yVal:-30 len:11];
+ (void) drawRect:(CGRect)rect text:(NSString *)string xVal:(int)x yVal:(int)y len:(int)length{
CGContextRef theContext = UIGraphicsGetCurrentContext();
CGRect viewBounds = rect;
CGContextTranslateCTM(theContext, 0, viewBounds.size.height);
CGContextScaleCTM(theContext, 1, -1);
// Draw the text using the MyDrawText function
MyDrawText(theContext, viewBounds,string, x, y,length);
}
void MyDrawText (CGContextRef myContext, CGRect contextRect, NSString *textToDraw, int x, int y, int len){
float w, h;
w = contextRect.size.width;
h = contextRect.size.height;
CGAffineTransform myTextTransform;
CGContextSelectFont (myContext,"Helvetica-Bold", h, kCGEncodingMacRoman);
CGContextSetCharacterSpacing (myContext, 3);
CGContextSetTextDrawingMode (myContext, kCGTextFill);
CGContextSetRGBFillColor(myContext, 0, 0, 0, 1);
CGContextSetRGBStrokeColor (myContext, 0, 0, 0, 0);
myTextTransform = CGAffineTransformMakeRotation(0.0);
CGContextSetTextMatrix (myContext, myTextTransform);
const char *str = [textToDraw UTF8String];
CGContextShowTextAtPoint (myContext, x, y,str, len);
}
When I use this code I am getting the output like, first and third word is fine but the second one is coming like inverted (head down). Why so? Any idea?
The issue was with CGContextRef theContext = UIGraphicsGetCurrentContext();, when each time the function calls, the CGContext taking the last state, that's why getting the inverting output. So, i added,
CGContextRef theContext = UIGraphicsGetCurrentContext();
CGContextSaveGState(theContext);
//code to draw....
CGContextRestoreGState(theContext);
this solved the issue. Thanks :)
Core Graphics considers Bottom-Left corner as the origin for drawing.(In UIKit its Top-Left).
Here in your method call for second string you are providing yVal as 30 and other values as -30.
Thanks,
I try to draw a string in this texture:
http://picasaweb.google.it/lh/photo/LkYWBv_S_9v2d6BAfbrhag?feat=directlink
but the green numbers seem vertical flipped.
I've created my context in this way:
colorSpace = CGColorSpaceCreateDeviceRGB();
data = malloc(height * width * 4);
context = CGBitmapContextCreate(data, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
and i've draw the strings:
UIGraphicsPushContext(context);
for(int i=0;i<packs.size();++i)
{
CGPoint points[4] =
{
gltextures[i].texCoords[0] * size.width, //0
gltextures[i].texCoords[1] * size.height, //1
gltextures[i].texCoords[2] * size.width, //2
gltextures[i].texCoords[3] * size.height, //3
gltextures[i].texCoords[4] * size.width, //4
gltextures[i].texCoords[5] * size.height, //5
gltextures[i].texCoords[6] * size.width, //6
gltextures[i].texCoords[7] * size.height //7
};
CGRect debugRect = CGRectMake
(
gltextures[i].texCoords[0] * size.width,
gltextures[i].texCoords[1] * size.height,
gltextures[i].width,
gltextures[i].height
);
CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
CGContextAddLines(context, points, 4);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathStroke);
NSString* s = [NSString stringWithFormat:#"%d",gltextures[i].texID];
UIFont* font = [UIFont fontWithName:#"Arial" size:12];
CGContextSetRGBFillColor(context, 0, 1, 0, 1);
[s drawAtPoint:points[0] withFont:font];
}
UIGraphicsPopContext();
The transformation matrix seems the Identity matrix... no CGAffineTransform is applied to THIS context.
If the string is flipped, maybe, all my images are flipped!
Any suggestion?
PS: sorry for my english ;)
As describe here, the coordinate system for a context within a UIView or its layer is inverted when compared to the normal Quartz drawing space. However, when using Quartz to draw to an image, this is no longer the case. The UIStringDrawing Cocoa Touch category on NSString that gives you the -drawAtPoint:withFont: method assumes an inverted layout, and that's why you're seeing the flipped text in your image.
One way to work around this would be to save the graphics state, apply an invert transform to the image, draw the text, and restore the old graphics state. This would look something like the following:
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0f, self.bounds.size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
[text drawAtPoint:CGPointMake(0.0f, 0.0f) withFont:font];
CGContextRestoreGState(context);
This is a fairly crude example, in that I believe it just draws the text at the bottom of the image, but you should be able to adjust the translation or the coordinate of the text to place it where it's needed.
Better save the text 's matrix before draw, otherwise it will affect other text draw by CoreGraphic:
CGContextSaveGState(ctx);
CGAffineTransform save = CGContextGetTextMatrix(ctx);
CGContextTranslateCTM(ctx, 0.0f, self.bounds.size.height);
CGContextScaleCTM(ctx, 1.0f, -1.0f);
[str drawAtPoint:point withFont:font];
CGContextSetTextMatrix(ctx, save);
CGContextRestoreGState(ctx);