Drawing simple lines on iPhone with CoreGraphics

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

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 2

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 3

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 4

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()

Answer 5

You haven't defined the type for c:

CGContextRef c = UIGraphicsGetCurrentContext();