如何在 Apple Watch 上绘制自定义图形?

Posted

技术标签:

【中文标题】如何在 Apple Watch 上绘制自定义图形?【英文标题】:How can I draw custom graphics on Apple Watch? 【发布时间】:2016-01-23 08:01:51 【问题描述】:

如果我理解正确的话,我们只能在 Apple Watch 上使用图像和标准控件。如果是这样,是否可以在内存中的图像上绘制自定义图形,然后将这些图像放在屏幕上?

【问题讨论】:

【参考方案1】:

watchOS2 中,您可以使用一些 CoreGraphics 来绘制 WKInterfaceImage

作为参考,请查看很棒的watchOS2 Sampler

画图示例:

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

使用贝塞尔路径的示例:

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

最后用PocketSVG显示SVG

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

【讨论】:

以上是关于如何在 Apple Watch 上绘制自定义图形?的主要内容,如果未能解决你的问题,请参考以下文章

自定义时复杂功能会冻结 Apple Watch

如何识别 Apple Watch 应用中的手势?

如何隐藏或删除Apple Watch状态栏中的时间?

Apple Watch的UI

WatchKit 通知:38 毫米 Apple Watch 上的视图被截断?

Apple Watch Glance 将如何显示