LoginSignup
19
19

More than 5 years have passed since last update.

watchkitで秒針を表示する(CGContextStrokePath)

Last updated at Posted at 2015-01-17

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

完成イメージ

最初の数秒のイメージです(実際にはぐるぐる回ります)。
watch.gif

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

19
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
19