ios - 使用 watchOS 2 在 Apple Watch 上渲染折线图

Question

我正在尝试使用 watchOS 2 在 Apple Watch 上呈现线条/步进图。与 iOS 9 不同，watchOS 2 不支持 Quartz。它只支持 Core Graphics。我尝试编写一些代码来绘制折线图，​​但出现错误“CG​​ContextRestoreGState:无效的上下文 0x0。这是一个严重的错误。此应用程序或其使用的库正在使用无效的上下文，从而导致整体错误系统稳定性和可靠性下降。此通知是礼貌的:请修复此问题。它将成为即将到来的更新中的 fatal error 。”

以下是我使用的代码片段:

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

我的最终结果应该是类似于 Apple Watch 上的“股票”应用程序。每当用户点击特定股票时，他将能够查看/可视化该股票的统计数据。任何人都可以帮助我实现这一目标。

Answer 1

我通过以下步骤成功渲染了线条:

• 创建一个基于位图的图形上下文，并使用 UIGraphicsBeginImageContext 使其成为当前上下文。
• 融入上下文。
• 从上下文中提取 CGImageRef 并将其转换为 UIImage 对象。
• 在 WKInterfaceGroup 或 WKInterfaceImage 上显示图像。

代码:

// 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 是 WKInterfaceImage 属性。它对我有用。

我还可以在 watchOS 上使用 UIBezierPath 进行绘制，如下所示:

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

您可以查看示例代码here .