How can I draw custom graphics on Apple Watch?

Question

How can I draw custom graphics on Apple Watch?

If I understand it correctly, we can only use images and standard controls on Apple Watch. If so, is it possible to draw custom graphics on images in the memory and then put these images on the screen?

Answer 1

In watchOS2 you can draw on WKInterfaceImage using some CoreGraphics.

For reference, check out awesome watchOS2 Sampler

Example of drawing image:

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

    image.setImage(uiimage)

Example of using Bezier Path:

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

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

    image.setImage(uiimage)

And finally displaying SVG with PocketSVG

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

    // Setup for the path appearance
    UIColor.yellowColor().setFill()

    // Convert SVG -> CGPath -> UIBezierPath
    let pocketSvg = PocketSVG(fromSVGFileNamed: "sample")
    let path = pocketSvg.bezier
    print(path)
    path.fill()

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

    // End the graphics context
    UIGraphicsEndImageContext()

    image.setImage(uiimage)