Drawing simple lines on iPhone with CoreGraphics - ios

Question

I would like to draw a straight line between where a user touches the screen, and where the touch ends. i need multiple lines, for if the user repeats the touch-drag-release action, and I also need a button to clear all of the lines. So far I have this code below, but once it is called again, I receive the errors: CGContextSetStrokeColor: invalid context 0x0. This error repeats for: CGContextBeginPath, CGContextMoveToPoint, CGContextAddLineToPoint, CGContextDrawPath.
Any ideas?
- (void)drawRect:(CGRect)rect {
c = UIGraphicsGetCurrentContext();
CGFloat black[4] = {0, 0,
0, 1};
CGContextSetStrokeColor(c, black);
CGContextBeginPath(c);
CGContextMoveToPoint(c, 100, 100);
CGContextAddLineToPoint(c, 100, 200);
CGContextStrokePath(c);
}

Answer 1

The complete code is as below.
/* Set the color that we want to use to draw the line */
[[UIColor brownColor] set];
/* Get the current graphics context */
CGContextRef currentContext =UIGraphicsGetCurrentContext();
/* Set the width for the line */
CGContextSetLineWidth(currentContext,5.0f);
/* Start the line at this point */
CGContextMoveToPoint(currentContext,50.0f, 10.0f);
/* And end it at this point */
CGContextAddLineToPoint(currentContext,100.0f, 200.0f);
/* Use the context's current color to draw the line */
CGContextStrokePath(currentContext);

Answer 2

You haven't defined the type for c:
CGContextRef c = UIGraphicsGetCurrentContext();

Answer 3

The Problem is that UIGraphicsGetCurrentContext() will return a null-reference.
If you want to draw into an UIImage you can get the CGContextRef as follows:
UIGraphicsBeginImageContext(anUIImage);
now calling UIGraphicsGetCurrentContext() will not longer return a null-reference.
... drawing goes here
UIImage* drawnImage = UIGraphicsGetImageFromCurrentImageContext();
// display the image on an view
UIGraphicsEndImageContext();

Answer 4

I know this is an old question, but based on the answer I wrote the following in Swift:
override func drawRect(rect: CGRect) {
super.drawRect(rect)
UIColor.blackColor().setStroke() // update with correct color
let path = UIBezierPath()
path.lineWidth = UIScreen.mainScreen().scale > 1 ? 0.5 : 1
// change the points to what you need them to be
let leftPoint = CGPointMake(0, CGRectGetHeight(rect))
let rightPoint = CGPointMake(CGRectGetWidth(rect), CGRectGetHeight(rect))
path.moveToPoint(leftPoint)
path.addLineToPoint(rightPoint)
path.stroke()
}

Answer 5

Swift 3
Here is a full example for drawing lines (a grid) in a separate image and then added this image (as an overlay) to an existing image, in this case called 'boardImage' .
// ----------------------------------------------------------------------------------------
// DRAW LINES ON THE BOARD IMAGE
// ----------------------------------------------------------------------------------------
private func drawLinesOnBoard() {
// 1. DEFINE AN OFFSET AND THE SIZE OF ONE GRIDFIELD
let offSet : CGFloat = 20
let fieldWidth : CGFloat = 60
// 2. CREATE A IMAGE GRAPHICS CONTEXT AND DRAW LINES ON IT
UIGraphicsBeginImageContext(boardImage.boundsSize)
if let currentContext = UIGraphicsGetCurrentContext() {
currentContext.setLineWidth(1) // set strokeWidth
currentContext.setStrokeColor(UIColor.init(colorLiteralRed: 0.85, green: 1, blue: 0.85, alpha: 0.85).cgColor)
currentContext.setLineJoin(.round)
currentContext.setLineDash(phase: 1, lengths: [offSet / 4, offSet / 5])
// VERTICAL LINES
for multiplyer in (1...5) {
let startPoint : CGPoint = CGPoint(x: offSet + CGFloat(multiplyer) * fieldWidth, y: offSet)
let endPoint : CGPoint = CGPoint(x: startPoint.x, y: boardImage.frame.height - offSet)
/* Start the line at this point */
currentContext.move(to: startPoint)
/* And end it at this point */
currentContext.addLine(to: endPoint)
}
// HORIZONTAL LINES
for multiplyer in (1...5) {
let startPoint : CGPoint = CGPoint(x: offSet, y: offSet + CGFloat(multiplyer) * fieldWidth)
let endPoint : CGPoint = CGPoint(x:boardImage.frame.width - offSet, y: startPoint.y)
/* Start the line at this point */
currentContext.move(to: startPoint)
/* And end it at this point */
currentContext.addLine(to: endPoint)
}
currentContext.strokePath()
// 3. CREATE AN IMAGE OF THE DRAWN LINES AND ADD TO THE BOARD
if let linesImage : UIImage = UIGraphicsGetImageFromCurrentImageContext() {
let linesImageView : UIImageView = UIImageView(image: linesImage)
let theCenter : CGPoint = CGPoint(x: boardImage.bounds.width / 2, y: boardImage.bounds.height / 2)
boardImage.addSubview(linesImageView)
linesImageView.center = theCenter
isBoardLinesDrawn = true
}
}
// 4. END THE GRAPHICSCONTEXT
UIGraphicsEndImageContext()