Using CGContext to draw line

Question

I wanted to draw a line using CGContext and what I have so far is:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextSetLineWidth(context, 1.0f);
CGContextMoveToPoint(context, 10, 10); 
CGContextAddLineToPoint(context, 100, 50);
CGContextStrokePath(context);

It always draws from the top left corner to the top bottom right corner. How can I adjust the start and end origin of this line? How do I adjust the length of the line?

Solution 1

These two lines are responsible for the start and end points:

CGContextMoveToPoint(context, 10, 10);    // This sets up the start point
CGContextAddLineToPoint(context, 100, 50); // This moves to the end point.

By adjusting these two x, y points you can adjust the line. The length of the line depends on the start and end points.

Following on from psoft's answer - here's a basic example project of drawing, including creating a path and stroking it.

This is explained in more detail with more sample code in the Quartz 2D guide for paths.

Solution 2

CoreGraphics == Good Times.

It's been a while since I did anything freehand as it were, what I do these days is to build everything ahead of drawing operations. Remember that there is an implicit 'cursor', from the days of Logo, and you can move it without making the move a drawing operation, but you have to specify it. I think a good approach (at least for static figures) is to create those paths you will have to draw first, then using the path over and over for things like fill, stroke, shading.

   CGColorRef fillColor = // yadda
   CGColorRef strokeColor = // yadda

   const CGFloat radius = 5.0;

   // Create the path first - rounded rectangle
   CGMutablePathRef path = CGPathCreateMutable();
   CGPathMoveToPoint(path, NULL, 100.0 - radius, 10.0);
   CGPathAddLineToPoint(path, NULL, 10.0 + radius, 10.0);
   CGPathAddArcToPoint(path, NULL, 10.0, 10.0, 10.0, 10.0 + radius, radius);
   CGPathAddLineToPoint(path, NULL, 10.0, 100.0 - radius);
   CGPathAddArcToPoint(path, NULL, 10.0, 100.0, 10.0 + radius, 100.0, radius);
   CGPathAddLineToPoint(path, NULL, 100.0 - radius, 100.0);
   CGPathAddArcToPoint(path, NULL, 100.0, 100.0, 100.0, 100.0 - radius, radius);
   CGPathAddLineToPoint(path, NULL, 100.0, 10.0 + radius);
   CGPathAddArcToPoint(path, NULL, 100.0, 10.0, 100.0 - radius, 10.0, radius);
   CGPathCloseSubpath(path);

   // Then use it in your draw commands
   CGContextSetStrokeColor(context, CGColorGetComponents(strokeColor));
   CGContextSetFillColor(context, CGColorGetComponents(fillColor));
   CGContextSetLineJoin(context, kCGLineJoinMiter);
   CGContextSetLineWidth(context, strokeWidth);

   CGContextAddPath(context, path);
   CGContextDrawPath(context, kCGPathFillStroke);
   CGPathRelease(path); 

Etc. You can release the path at the end if you want, or keep the reference around for use later on.

Comments

[tobinjim]

Thank you for posting some working code. Every time I have needed CGPathAddArcToPoint I had to figure things out by trial an error, which didn't lead to understanding. Apple's documentation calls the values endpoints, but then in the Figure 3.5 talks about Tangent Points. By plotting out on paper what your first parameter, (10,10) was doing, I now see that's essentially the corner point, or in terms of a quadratic bezier curve, it's the control point. Working that understanding into the shape I was working on turned it from a skewed rectangle to a nice rounded rectangle.

[Gene De Lisa]

Dont you need CGPathRelease(path); at the end?