Hiển thị biểu đồ đường kẻ trên Apple Watch bằng watchOS 2

Question

Tôi đang cố hiển thị biểu đồ đường/bước trên Apple Watch bằng watchOS 2. Không giống như iOS 9, watchOS 2 không hỗ trợ Quartz. Nó chỉ hỗ trợ Core Graphics. Tôi đã thử viết một số mã để vẽ một biểu đồ đường nhưng tôi gặp lỗi "CGContextRestoreGState: ngữ cảnh không hợp lệ 0x0. Đây là một lỗi nghiêm trọng. Ứng dụng này hoặc thư viện mà nó sử dụng, đang sử dụng ngữ cảnh không hợp lệ và do đó đóng góp vào tổng thể sự xuống cấp của sự ổn định và độ tin cậy của hệ thống. Thông báo này là lịch sự: hãy sửa lỗi này. Nó sẽ trở thành một lỗi nghiêm trọng trong bản cập nhật sắp tới. "

Dưới đây là đoạn mã tôi đã sử dụng:

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

kết quả cuối cùng của tôi nên một cái gì đó giống như cổ phiếu ứng dụng có mặt trên Apple Watch. Bất cứ khi nào người dùng nhấp vào cổ phiếu cụ thể, anh ấy sẽ có thể xem/trực quan hóa số liệu thống kê của cổ phiếu đó. Ai có thể giúp tôi trong việc đạt được điều này.

Answer 1

tôi đã thành công để render dòng với các bước sau:

• Tạo một bối cảnh đồ họa bitmap dựa trên và làm cho nó bối cảnh hiện nay sử dụng UIGraphicsBeginImageContext.
• Vẽ vào ngữ cảnh.
• Trích xuất CGImageRef từ ngữ cảnh và chuyển đổi nó thành đối tượng UIImage.
• Hiển thị hình ảnh trên WKInterfaceGroup hoặc 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 là tài sản WKInterfaceImage. Nó làm việc cho tôi.

Ngoài ra tôi có thể rút ra sử dụng UIBezierPath trên watchos như sau:

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

Bạn có thể kiểm tra các mã mẫu here.

Answer 2

Ngữ cảnh ở đây không phải là CGContext, do đó bạn có vấn đề. Tôi không nghĩ bạn có thể sử dụng Core Graphics trực tiếp trên Apple Watch.

Answer 3

Đây là dự án ví dụ cho thấy làm thế nào để làm biểu đồ động trên WatchKit 2,0

https://github.com/vlm/ExampleWatchGraph

Các ý chính của nó là trong GraphPainter.swift tập tin, nơi CoreGraphics được sử dụng để vẽ thành một đệm off-screen (như @ shu223 đề xuất), sau đó hiển thị bộ đệm này trong WKInterfaceImage.

Animated Watch Interface GIF.

Answer 4

Dưới đây là mã trong watchos 3

// Create a graphics context 
     let size = CGSize(width:self.contentFrame.size.width, height:100) 


     UIGraphicsBeginImageContext(size) 
     let context = UIGraphicsGetCurrentContext() 

     // Setup for the path appearance 
     context!.setStrokeColor(UIColor.white.cgColor) 
     context!.setLineWidth(4.0) 

     // Draw lines 
     context!.beginPath(); 

     context?.move(to: CGPoint()) 
     context?.addLine(to: CGPoint(x: 100, y: 100)) 
     context?.addLine(to: CGPoint(x: 0, y: 100)) 
     context?.addLine(to: CGPoint(x: 100, y: 0)) 

     context!.strokePath(); 

     // Convert to UIImage 
     let cgimage = context!.makeImage(); 
     let uiimage = UIImage(cgImage: cgimage!) 

     // End the graphics context 
     UIGraphicsEndImageContext() 

     self.graphGroup.setBackgroundImage(uiimage) 

Answer 5

Graph render được thực hiện bằng sự giúp đỡ của bezierPath và được chuyển đổi sang hình ảnh để gắn liền với Apple Watch

// Swift-3 Xcode-8.1

nhập khẩu UIKit lớp InterfaceController: WKInterfaceController {

@IBOutlet var graphImage: WKInterfaceImage! 
override func awake(withContext context: Any?) { 
    super.awake(withContext: context) 

    // Configure interface objects here. 
} 
override func willActivate() { 

    super.willActivate() 
    let path = createBeizePath() 

    //Change graph to image 
    let image:UIImage = UIImage.shapeImageWithBezierPath(bezierPath: path, fillColor: .red, strokeColor: .black) 
    graphImage.setImage(uiimage) 
} 

//Draw graph here 
func createBeizePath() -> UIBezierPath 
{ 
    let path = UIBezierPath() 
    //Rectangle path Trace 
    path.move(to: CGPoint(x: 20, y: 100)) 
    path.addLine(to: CGPoint(x: 50 , y: 100)) 
    path.addLine(to: CGPoint(x: 50, y: 150)) 
    path.addLine(to: CGPoint(x: 20, y: 150)) 
    return path 
    } 
} 

extension UIImage { 
     class func shapeImageWithBezierPath(bezierPath: UIBezierPath, fillColor: UIColor?, strokeColor: UIColor?, strokeWidth: CGFloat = 0.0) -> UIImage! { 
      bezierPath.apply(CGAffineTransform(translationX: -bezierPath.bounds.origin.x, y: -bezierPath.bounds.origin.y)) 
      let size = CGSize(width: 100 , height: 100) 
      UIGraphicsBeginImageContext(size) 
      let context = UIGraphicsGetCurrentContext() 
      var image = UIImage() 
      if let context = context { 
       context.saveGState() 
       context.addPath(bezierPath.cgPath) 
       if strokeColor != nil { 
        strokeColor!.setStroke() 
        context.setLineWidth(strokeWidth) 
       } else { UIColor.clear.setStroke() } 
       fillColor?.setFill() 
       context.drawPath(using: .fillStroke) 
       image = UIGraphicsGetImageFromCurrentImageContext()! 
       context.restoreGState() 
       UIGraphicsEndImageContext() 
      } 
      return image 
     } 
    }