Currently I am developing an Expense Management App. In this app, I want retrive data from the local database and make a pdf file for it in a tabular format.Guidance needed on how should I proceed on doing this.
Thanks.
You can create table in PDF by following below steps:
Step 1. Create UIGraphics PDF Context:
UIGraphicsBeginPDFContextToFile(filePath, CGRectZero, nil);
UIGraphicsBeginPDFPageWithInfo(CGRectMake(0, 0, kPageWidth, kPageHeight), nil);
[self drawTableAt:CGPointMake(6,38) withRowHeight:30 andColumnWidth:120 andRowCount:kRowsPerPage andColumnCount:5];
UIGraphicsEndPDFContext();
Step 2. Add these two helper functions to the same file (or same class implementation):
-(void)drawTableAt: (CGPoint)origin withRowHeight: (int)rowHeight andColumnWidth: (int)columnWidth andRowCount: (int)numberOfRows andColumnCount:(int)numberOfColumns{
for (int i = 0; i <= numberOfRows; i++) {
int newOrigin = origin.y + (rowHeight*i);
CGPoint from = CGPointMake(origin.x, newOrigin);
CGPoint to = CGPointMake(origin.x + (numberOfColumns*columnWidth), newOrigin);
[self drawLineFromPoint:from toPoint:to];
}
for (int i = 0; i <= numberOfColumns; i++) {
int newOrigin;
if(i==0){
newOrigin = origin.x ;
}
if(i==1){
newOrigin = origin.x + 30;
}
if(i==2){
newOrigin = origin.x + 150;
}
if(i==3){
newOrigin = origin.x + 270;
}
if(i==4){
newOrigin = origin.x + 480;
}
// newOrigin = origin.x + (columnWidth*i);
CGPoint from = CGPointMake(newOrigin, origin.y);
CGPoint to = CGPointMake(newOrigin, origin.y +(numberOfRows*rowHeight));
[self drawLineFromPoint:from toPoint:to];
}
}
-(void)drawLineFromPoint:(CGPoint)from toPoint:(CGPoint)to
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.2, 0.2, 0.2, 0.3};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextMoveToPoint(context, from.x, from.y);
CGContextAddLineToPoint(context, to.x, to.y);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}
How about this tutorial. Exactly what you needed. Create the Table format
http://www.raywenderlich.com/6581/how-to-create-a-pdf-with-quartz-2d-in-ios-5-tutorial-part-1
http://www.raywenderlich.com/6818/how-to-create-a-pdf-with-quartz-2d-in-ios-5-tutorial-part-2
Related
I used CGContext to draw dashed lines in iOS.
My code is as follow.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGFloat dashes[] = {5,5};
CGContextSetLineDash(context, 0, dashes, 2);
float startx = x_percentileValues[0];
float starty = orgy-numskipPixels_v*(3-minWeight);
for(int i=0; i<[MeasuredInfos.retval count]; i++) {
float x = numskipPixels_h*hoursBetweenDates*3+orgx;
float y = orgy-([[MeasuredInfos.retval objectAtIndex: i] getWeight] - minWeight)*numskipPixels_v;
CGContextMoveToPoint(context, startx, starty);
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
startx = x;
starty = y;
}
It is fine if the slope of the line is steep. If not steep, the dashed line has problem as shown in the attached pictures.
I checked in this link, nothing much discussion for the CGContextSetLineDash.
I found the problem. The problem is that I used two CGContextRef in two separate functions. One is in
- (void)drawRect:(CGRect)rect {
//Get the CGContext from this view
CGContextRef context = UIGraphicsGetCurrentContext();
//Set the stroke (pen) color
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
//Set the width of the pen mark
CGContextSetLineWidth(context, 2.0);
float startx = x_percentileValues[0];
float starty = orgy-numskipPixels_v*(3-minWeight);
for(int i=0; i<[MeasuredInfos.retval count]; i++) {
float x = numskipPixels_h*hoursBetweenDates*3+orgx;
float y = orgy-([[MeasuredInfos.retval objectAtIndex: i] getWeight] - minWeight)*numskipPixels_v;
CGContextMoveToPoint(context, startx, starty);
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
startx = x;
starty = y;
[self drawStar_atX:x andatY:y];
}
}
Another one in drawStar_atX
-(void)drawStar_atX:(float)xCenter andatY:(float)yCenter
{
int aSize = 5.0;
CGFloat color[4] = { 1.0, 0.0, 0.0, 1.0 }; // Red
CGColorRef aColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), color);
CGContextRef context1 = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context1, aSize);
float w = 15.0;
double r = w / 2.0;
float flip = -1.0;
CGContextSetFillColorWithColor(context1, aColor);
CGContextSetStrokeColorWithColor(context1, aColor);
double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees
CGContextMoveToPoint(context1, xCenter, r*flip+yCenter);
for (NSUInteger k=1; k<5; k++)
{
float x = r * sin(k * theta);
float y = r * cos(k * theta);
CGContextAddLineToPoint(context1, x+xCenter, y*flip+yCenter);
}
CGContextClosePath(context1);
CGContextFillPath(context1);
return;
}
I called drawStar_atX from drawRect. context and context1 in two functions have some problems and start from the second segment the dashed line's width becomes bigger. Actually they are declared in different functions with different widths, shouldn't have any relationship. Now I solved the problem as context and context1 has same width. Still learning why they have some relations.
I am trying to create the circles below in my iOS app. I know how to make the circles but am not entirely sure on how to get the points along the arc. It has to be in code not an image. Below is also the code I currently have.
- (void)drawRect:(CGRect)rect
{
CGPoint point;
point.x = self.bounds.origin.x + self.bounds.size.width/2;
point.y = self.bounds.origin.y + self.bounds.size.height/2;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect circle = CGRectMake(point.x/2,point.y-point.x/2,point.x,point.x);
CGContextAddEllipseInRect(context, circle);
CGContextStrokePath(context);
for (int i = 0; i<8; i++) {
CGRect circleMini = CGRectMake(??????,??????,point.x/4,point.x/4);
CGContextAddEllipseInRect(context, circleMini);
CGContextStrokePath(context);
}
}
UPDATED TO ANSWER
float cita = 0;
for (int i = 0; i<8; i++) {
CGPoint pointCir = CGPointMake(point.x/2 + radius * cos(cita) , (point.y-point.x/2) + radius * sin(cita) );
CGRect circleMini = CGRectMake(pointCir.x,pointCir.y,radius/4,radius/4);
CGContextAddEllipseInRect(context, circleMini);
CGContextStrokePath(context);
cita += M_PI / 4.0;
}
If (x,y) is the center and r is the radius of your big circle, the center of the i-th external circle will be:
center(i) = ( x + r * cos(cita) , y + r * sin(cita) )
Start cita in 0 and increment it PI/4 radians for the next circle (or 45 degrees)
Working implementation
CGFloat cita = 0;
CGFloat bigCircleRadius = point.x / 2.0;
CGFloat smallCircleRadius = bigCircleRadius / 4.0;
for (int i = 0; i < 8; i++) {
CGPoint smallCircleCenter = CGPointMake(point.x + bigCircleRadius * cos(cita) - smallCircleRadius/2.0 , point.y + bigCircleRadius * sin(cita) - smallCircleRadius / 2.0 );
CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);
CGContextAddEllipseInRect(context, smallCircleRect);
CGContextStrokePath(context);
cita += M_PI / 4.0;
}
Edit: Added implementation and renamed variables.
- (void)drawRect:(CGRect)rect
{
const NSUInteger kNumCircles = 8u;
CGFloat height = CGRectGetHeight(rect);
CGFloat smallCircleRadius = height / 10.0f;
CGRect bigCircleRect = CGRectInset(rect, smallCircleRadius / 2.0f, smallCircleRadius / 2.0f);
CGFloat bigCircleRadius = CGRectGetHeight(bigCircleRect) / 2.0f;
CGPoint rectCenter = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0f);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextAddEllipseInRect(context, bigCircleRect);
CGContextStrokePath(context);
CGFloat alpha = 0;
for (NSUInteger i = 0; i < kNumCircles; i++)
{
CGPoint smallCircleCenter = CGPointMake(rectCenter.x + bigCircleRadius * cos(alpha) - smallCircleRadius/2.0f , rectCenter.y + bigCircleRadius * sin(alpha) - smallCircleRadius / 2.0f );
CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);
CGContextAddEllipseInRect(context, smallCircleRect);
CGContextStrokePath(context);
alpha += M_PI / (kNumCircles / 2.0f);
}
}
I have a for loop and within the for loop i do the following, this creates a line graph on the background of my chart, however it displays the same image of a line on each background exactly the same even though the data is different.
UIGraphicsBeginImageContext(test.size);
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextFlush(c);
CGContextSetAllowsAntialiasing(c, true);
CGContextTranslateCTM(c, 0, test.size.height);
CGContextScaleCTM(c, 1.0, -1.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(c, color);
CGContextMoveToPoint(c, 0, 0);
if(maxPoints > 0)
{
float xSpacing = (float)330.0f/(float)[allScorePointsSubset count];
int currentPoint;
float currentX;
float currentY;
for (int j = 0; j < [allScorePointsSubset count]; j++)
{
NSString *currentPointString = [allScorePointsSubset objectAtIndex:j];
currentPoint = (int)[currentPointString intValue];
if(currentPoint < 0)
currentPoint = 0;
currentX = (j+1)*xSpacing;
currentY = currentPoint / 100.0f * 200.0f;
CGContextAddLineToPoint(c, (int)currentX, (int)currentY);
}
}
CGContextStrokePath(c);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
UIImage *graphImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CCSprite* answerMenuNormalSprite = [CCSprite spriteWithCGImage:graphImage.CGImage key: [NSString stringWithFormat:#"answerMenuNormalSprite_%f", i]];
[answerMenuNormalSprite setPosition:ccp(176,66)];
[[background objectAtIndex:0] addChild:answerMenuNormalSprite z:0 tag:i];
Has anyone got any ideas what i am doing wrong and does this have to be in the following method
-(void)draw
{
[super draw];
}
Thanks
It turns out that my counter was not incrementing properly and the problem was simply down to not giving the image a unique key in the following line
CCSprite* answerMenuNormalSprite = [CCSprite spriteWithCGImage:graphImage.CGImage key: [NSString stringWithFormat:#"answerMenuNormalSprite_%f", i]];
iOS 5 changed the way the built-in Google Maps App draws routes:
I would now like to replicate the design of the route overlay in my own app but I am currently only able to draw a plain blue line. I would like to add the 3D-effect with the gradient, borders and the glow. Any ideas on how to accomplish this?
Currently I'm using the following code:
CGContextSetFillColorWithColor(context, fillColor.CGColor);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextAddPath(context, path);
CGContextReplacePathWithStrokedPath(context);
CGContextFillPath(context);
Resulting in a rather ugly line:
Thanks!
Update: The solution should work on iOS 4.0 and up.
I think that #ChrisMiles is correct in that the segments are probably being drawn individually. (I initially thought that this might have been doable using CGPatternRef but you don't have any access to the CTM or path endpoints inside the pattern drawing callback.)
With this in mind, here is an exceedingly crude, back-of-the-envelope example of how you might begin such an effort (filling the segments individually). Note that:
gradient colors are guessed
end caps are nonexistent and will need to be separately implemented
some aliasing artifacts remain
not a great deal of attention was paid to performance
Hopefully this can get you started at least (and works through some of the analytic geometry).
- (CGGradientRef)lineGradient
{
static CGGradientRef gradient = NULL;
if (gradient == NULL) {
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGColorRef white = [[UIColor colorWithWhite:1.f
alpha:0.7f] CGColor];
CGColorRef blue = [[UIColor colorWithRed:0.1f
green:0.2f
blue:1.f
alpha:0.7f] CGColor];
CGColorRef lightBlue = [[UIColor colorWithRed:0.4f
green:0.6f
blue:1.f
alpha:0.7f] CGColor];
CFMutableArrayRef colors = CFArrayCreateMutable(kCFAllocatorDefault,
8,
NULL);
CFArrayAppendValue(colors, blue);
CFArrayAppendValue(colors, blue);
CFArrayAppendValue(colors, white);
CFArrayAppendValue(colors, white);
CFArrayAppendValue(colors, lightBlue);
CFArrayAppendValue(colors, lightBlue);
CFArrayAppendValue(colors, blue);
CFArrayAppendValue(colors, blue);
CGFloat locations[8] = {0.f, 0.08f, 0.14f, 0.21f, 0.29f, 0.86f, 0.93f, 1.f};
gradient = CGGradientCreateWithColors(colorSpace,
colors,
locations);
CFRelease(colors);
CGColorSpaceRelease(colorSpace);
}
return gradient;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetAllowsAntialiasing(context, YES);
CGContextSetShouldAntialias(context, YES);
// Fill background color
[[UIColor whiteColor] setFill];
UIRectFill(rect);
// Build a path
CGFloat strokeWidth = 10.f;
CGContextSetLineWidth(context, strokeWidth);
CGGradientRef gradient = [self lineGradient];
CGPoint points[9] = {
CGPointMake(10.f, 25.f),
CGPointMake(100.f, 100.f),
CGPointMake(100.f, 150.f),
CGPointMake(22.f, 300.f),
CGPointMake(230.f, 400.f),
CGPointMake(230.f, 200.f),
CGPointMake(300.f, 200.f),
CGPointMake(310.f, 160.f),
CGPointMake(280.f, 100.f)
};
for (NSUInteger i = 1; i < 9; i++) {
CGPoint start = points[i - 1];
CGPoint end = points[i];
CGFloat dy = end.y - start.y;
CGFloat dx = end.x - start.x;
CGFloat xOffset, yOffset;
// Remember that, unlike Cartesian geometry, origin is in *upper* left!
if (dx == 0) {
// Vertical to start, gradient is horizontal
xOffset = 0.5 * strokeWidth;
yOffset = 0.f;
if (dy < 0) {
xOffset *= -1;
}
}
else if (dy == 0) {
// Horizontal to start, gradient is vertical
xOffset = 0.f;
yOffset = 0.5 * strokeWidth;
}
else {
// Sloped
CGFloat gradientSlope = - dx / dy;
xOffset = 0.5 * strokeWidth / sqrt(1 + gradientSlope * gradientSlope);
yOffset = 0.5 * strokeWidth / sqrt(1 + 1 / (gradientSlope * gradientSlope));
if (dx < 0 && dy > 0) {
yOffset *= -1;
}
else if (dx > 0 && dy < 0) {
xOffset *= -1;
}
else if (dx < 0 && dy < 0) {
yOffset *= -1;
xOffset *= -1;
}
else {
}
}
CGAffineTransform startTransform = CGAffineTransformMakeTranslation(-xOffset, yOffset);
CGAffineTransform endTransform = CGAffineTransformMakeTranslation(xOffset, -yOffset);
CGPoint gradientStart = CGPointApplyAffineTransform(start, startTransform);
CGPoint gradientEnd = CGPointApplyAffineTransform(start, endTransform);
CGContextSaveGState(context);
CGContextMoveToPoint(context, start.x, start.y);
CGContextAddLineToPoint(context, end.x, end.y);
CGContextReplacePathWithStrokedPath(context);
CGContextClip(context);
CGContextDrawLinearGradient(context,
gradient,
gradientStart,
gradientEnd,
kCGGradientDrawsAfterEndLocation | kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);
}
CGContextRestoreGState(context);
}
I would say they are drawing a CGPath around the original line, stroking the edges and gradient filling it. The ends are capped by adding a semi circle to the CGPath.
Would be a bit more work than simply drawing a single line and stroking it, but gives them full control over the style of the rendered path.
I'm trying to find a way to display the borders of some CGRects in my iOS program for debugging purposes. Is there a fairly simple way to do this? I just need to see where the program is creating these rectangles, so I can track down some odd touch behaviors (or lack thereof).
My class init method:
// Initialize with points and a line number, then draw a rectangle
// in the shape of the line
-(id)initWithPoint:(CGPoint)sP :(int)w :(int)h :(int)lN :(int)t {
if ((self = [super init])) {
startP = sP;
lineNum = lN;
width = w;
height = h;
int type = t;
self.gameObjectType = kPathType;
// Draw the path sprite
path = [CCSprite spriteWithFile: #"line.png" rect:CGRectMake(0, 0, 5, height)];
ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
[path.texture setTexParameters:¶ms];
if(type == 1) {
path.position = ccp(startP.x, startP.y);
} else {
path.rotation = 90;
path.anchorPoint = ccp(0, 0);
path.position = ccp(startP.x, startP.y-2);
}
[self addChild:path];
// Draw the "bounding" box
pathBox = CGRectMake(path.position.x - (path.contentSize.width/2), path.position.y - (path.contentSize.height/2), path.contentSize.width * 10, path.contentSize.height);
}
return self;
}
pathBox is the rect in question.
This can be handled within drawRect:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect aRect=[myPath bounds];
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor ].CGColor);
CGContextStrokeRect(context, aRect);
}
I'm going to take a stab and assume this is an iOS project, since that's what I know.
If these rectangles are being used for UIView or a CALayer then you can set the border for them.
Add #import <QuartzCore/QuartzCore.h> in your file and use view.layer.borderColor, view.layer.borderWidth add what you want.
If it's just a layer remove the view part of it.
I figured out more-or-less how to do it: just extended the draw method in my class like so:
-(void) draw {
glColor4f(0, 1.0, 0, 1.0);
glLineWidth(2.0f);
[super draw];
CGRect pathBox = CGRectMake(path.position.x - (path.contentSize.width/2), path.position.y - (path.contentSize.height/2), path.contentSize.width * 10, path.contentSize.height);
CGPoint verts[4] = {
ccp(pathBox.origin.x, pathBox.origin.y),
ccp(pathBox.origin.x + pathBox.size.width, pathBox.origin.y),
ccp(pathBox.origin.x + pathBox.size.width, pathBox.origin.y + pathBox.size.height),
ccp(pathBox.origin.x, pathBox.origin.y + pathBox.size.height)
};
ccDrawPoly(verts, 4, YES);
}
Thanks to Blue Ether over at the Cocos2D site for the heads-up:
http://www.cocos2d-iphone.org/forum/topic/21718?replies=5#post-120691
You can try something simple like this method here. This uses an actual CGRect structure as oppose to a UIView and CLayer.
-(void) drawBorderForRect:(CGRect)rect usingColor:(UIColor*)uiColor{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, uiColor.CGColor);
CGContextSetLineWidth(context, 1.0f);
CGFloat x = rect.origin.x;
CGFloat y = rect.origin.y;
CGFloat width = abs(rect.size.width);
CGFloat height = abs(rect.size.height);
// ---
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x + width, y);
// |
CGContextMoveToPoint(context, x + width, y);
CGContextAddLineToPoint(context, x + width, y - height);
// ---
CGContextMoveToPoint(context, x + width, y - height);
CGContextAddLineToPoint(context, x - width, y - height);
// |
CGContextMoveToPoint(context, x, y - height);
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
}
In swift, it's easy. You can construct a BezierPath from a CGRect:
let dp = UIBezierPath.init(rect: myRect)
dp.stroke()