Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CGContext to draw line

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?

like image 472
aherlambang Avatar asked Feb 23 '12 01:02

aherlambang


People also ask

What is CGContext in Swift?

The CGContext type represents a Quartz 2D drawing destination. A graphics context contains drawing parameters and all device-specific information needed to render the paint on a page to the destination, whether the destination is a window in an application, a bitmap image, a PDF document, or a printer.


2 Answers

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.

like image 98
QED Avatar answered Sep 28 '22 04:09

QED


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.

like image 34
Abizern Avatar answered Sep 28 '22 05:09

Abizern