7

watchOS 2 を使用して Apple Watch で線/ステップ グラフをレンダリングしようとしています。iOS 9 とは異なり、watchOS 2 は Quartz をサポートしていません。コア グラフィックスのみをサポートします。折れ線グラフを描画するコードを書いてみましたが、「CGContextRestoreGState: 無効なコンテキスト 0x0。これは重大なエラーです。このアプリケーション、またはそれが使用するライブラリは、無効なコンテキストを使用しているため、全体的なエラーに寄与しています」というエラーが表示されます。システムの安定性と信頼性の低下. この通知は礼儀です: この問題を修正してください. 今後のアップデートで致命的なエラーになります."

以下は、私が使用したコードです。

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 アプリのようなものになるはずです。ユーザーが特定の株をクリックするたびに、その株の統計を表示/視覚化できます。誰でもこれを達成するのを手伝ってくれませんか。

4

5 に答える 5

11

次の手順で線をレンダリングすることに成功しました。

  • ビットマップ ベースのグラフィックス コンテキストを作成し、 を使用して現在のコンテキストにし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)

imageWKInterfaceImage プロパティです。わたしにはできる。

また、次のように、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)

サンプルコードはこちらで確認できます。

于 2015-07-14T11:19:46.387 に答える
0

ここでのコンテキストは CGContext ではないため、問題があります。Apple Watch で Core Graphics を直接使用できるとは思えません。

于 2015-07-08T03:27:27.017 に答える
0

グラフのレンダリングは bezierPath の助けを借りて行われ、画像に変換されて Apple Watch に添付されます

// Swift-3 Xcode-8.1

import UIKit クラス 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
        }
    }
于 2016-12-02T11:19:48.090 に答える