使用watchOS 2在Apple Watch上渲染折线图 [英] Render a line graph on Apple Watch using watchOS 2
问题描述
我正在尝试使用watchOS 2在Apple Watch上渲染线条/步骤图。与iOS 9不同,watchOS 2不支持Quartz。它只支持Core Graphics。我尝试编写一些代码来绘制折线图但我得到一个错误CGContextRestoreGState:无效的上下文0x0。这是一个严重的错误。这个应用程序,或它使用的库,正在使用无效的上下文,从而有助于整体系统稳定性和可靠性降低。此通知是礼貌的:请解决此问题。在即将发布的更新中,这将成为致命错误。
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."
以下是我使用的代码:
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上的Stocks app。每当用户点击特定股票时,他将能够查看/可视化该股票的统计数据。任何人都可以帮助我实现这一目标。
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.
推荐答案
我成功地使用以下步骤渲染线条:
I succeeded to render lines with following steps:
- 创建一个基于位图的图形上下文,并使用
UIGraphicsBeginImageContext
使其成为当前上下文。 - 绘制上下文。
- 从上下文中提取CGImageRef并将其转换为UIImage对象。
- 在WKInterfaceGroup或WKInterfaceImage上显示图像。
- 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.
代码:
// 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属性。它适用于我。
image
is WKInterfaceImage property. It works for me.
此外,我可以在watchOS上使用UIBezierPath进行绘制,如下所示:
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)
您可以查看示例代码其他。
这篇关于使用watchOS 2在Apple Watch上渲染折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!