deepthi toopran deepthi toopran - 3 months ago 22
Swift Question

Render a line graph on Apple Watch using watchOS 2

I am trying to render a line/step graph on Apple Watch using watchOS 2. Unlike iOS 9, watchOS 2 doesn't support Quartz. It only supports Core Graphics. I tried writing some code to draw a line graph but I am getting an error "CGContextRestoreGState: invalid context 0x0. This is a serious error. This application, or a library it uses, is using an invalid context and is thereby contributing to an overall degradation of system stability and reliability. This notice is a courtesy: please fix this problem. It will become a fatal error in an upcoming update."

Following is the piece of code I used:

import WatchKit
import Foundation
import UIKit

class InterfaceController: WKInterfaceController{
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
let path = UIBezierPath()
let startPoint = CGPointMake(0.0, 0.0)
path.moveToPoint(startPoint)
let nextPoint = CGPointMake(20.0, 20.0)
path.addLineToPoint(nextPoint)
path.lineWidth = 1.0
UIColor.whiteColor().setStroke()
path.stroke()
}

override func willActivate() {
super.willActivate()

}

override func didDeactivate() {
super.didDeactivate()
}
}


My end result should be something like Stocks app present on Apple Watch. Wwhenever user clicks on particular stock, he will be able to view/visualize the statistics of that stock. Can anybody please help me in achieving this.

Answer

I succeeded to render lines with following steps:

  • Create a bitmap-based graphics context and makes it the current context using UIGraphicsBeginImageContext.
  • Draw into the context.
  • Extract CGImageRef from the context and convert it to UIImage object.
  • Show the image on WKInterfaceGroup or WKInterfaceImage.

Code:

// Create a graphics context
let size = CGSizeMake(100, 100)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()

// Setup for the path appearance
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextSetLineWidth(context, 4.0)

// Draw lines
CGContextBeginPath (context);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 100, 100);
CGContextMoveToPoint(context, 0, 100);
CGContextAddLineToPoint(context, 100, 0);
CGContextStrokePath(context);

// Convert to UIImage
let cgimage = CGBitmapContextCreateImage(context);
let uiimage = UIImage(CGImage: cgimage!)

// End the graphics context
UIGraphicsEndImageContext()

// Show on WKInterfaceImage
image.setImage(uiimage)

image is WKInterfaceImage property. It works for me.

Also I can draw using UIBezierPath on watchOS as follow:

// Create a graphics context
let size = CGSizeMake(100, 100)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
UIGraphicsPushContext(context!)

// Setup for the path appearance
UIColor.greenColor().setStroke()
UIColor.whiteColor().setFill()

// Draw an oval
let rect = CGRectMake(2, 2, 96, 96)
let path = UIBezierPath(ovalInRect: rect)
path.lineWidth = 4.0
path.fill()
path.stroke()

// Convert to UIImage
let cgimage = CGBitmapContextCreateImage(context);
let uiimage = UIImage(CGImage: cgimage!)

// End the graphics context
UIGraphicsPopContext()
UIGraphicsEndImageContext()

image.setImage(uiimage)

You can check the sample codes here.

Comments