watchkitで秒針を表示する（CGContextStrokePath）

WatchKitの時計（アナログ表示）に関するサンプルが少なかったので
迷えるエンジニア達のためにアップします。 => Githubはコチラ
※今回のアプリは秒針のみ表示しているシンプル版です

完成イメージ

最初の数秒のイメージです（実際にはぐるぐる回ります）。 

0.準備

・WatchKit ExtensionをAdd Targetします ※Xcode6.2beta以上である必要があります Target > Add Target > メニュー内のApple WatchにあるWatchKit Appを選択してNext > Finish ・Interface.Storyboardにimageを設置してIBOutletします ```@IBOutlet weak var dynamicImage: WKInterfaceImage!```

1.タイマー

1秒ごとに表示を更新するためタイマーを利用します

InterfaceController.swift

    override func willActivate() {
        super.willActivate()

        // タイマー（1秒毎）
        var timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "update", userInfo: nil, repeats: true)
    }

    // 1秒毎に行う処理
    func update() {

    }

2.秒針の座標を計算

日付（秒）の値とradian,sin,cosを使って計算します。 時計のサイズを(100px,100px)とし、中心を(50px, 50px)としています。 update()内に記載します。

InterfaceController.swift

        let now = NSDate() // 現在日時の取得
        
        let dateFormatter = NSDateFormatter()
        dateFormatter.locale = NSLocale(localeIdentifier: "en_US") // ロケールの設定
        dateFormatter.dateFormat = "ss" // 日付フォーマットの設定
        var sec = dateFormatter.stringFromDate(now) // 現在時刻の取得
        
        // 秒針の設定
        var angle: Double = Double(sec.toInt()!)    // 数値に変換
        var mRad = -90 * M_PI / 180;    // ベースの針の長さ
        var pi:Double = M_PI * 2    // 直径
        var x = 50 + 50.0 * cos(angle * pi / 60.0 + mRad)   // x座標（時計の中心座標50 + 秒針の長さ50.0 * cos）
        var y = 50 + 50.0 * sin(angle * pi / 60.0 + mRad)   // y座標（時計の中心座標50 + 秒針の長さ50.0 * sin）
        var x_float:CGFloat = CGFloat(x)    // 表示用の型に変換
        var y_float:CGFloat = CGFloat(y)    // 表示用の型に変換

3.描画

CGContextStrokePathとUIGraphicsGetImageFromCurrentImageContextを使います。 描画を画像化してimageに表示しています。 update()内に追記します。

InterfaceController.swift

        // コンテキストを設定
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(100, 100), false, 0)
        let context = UIGraphicsGetCurrentContext()
        
        // 秒針（直線）の描画
        CGContextSetLineWidth(context, 1.0);   // 線の太さ
        CGContextSetRGBStrokeColor(context, 1, 1, 1, 1) // 線の色(白)
        CGContextMoveToPoint(context, 50, 50);  // 始点（中心点）
        CGContextAddLineToPoint(context, x_float, y_float);  // 終点（計算した値）
        CGContextStrokePath(context);  // 描画
        
        // 描画した画像をスクリーンショットとして保存
        let secondHandImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        // 1秒毎に画像（秒針）を更新
        dynamicImage.setImage(secondHandImage)

参考サイト

Obj−Cで書かれている方です。座標計算部分を参考にさせていただきました。 Apple Watchの開発が出来るようになったので「Watchkit」でアナログ時計を作ってみた | 丸ノ内テックブログ

Github

下記よりダウンロードできます。 https://github.com/TECHFUND/Watch