Garminウォッチフェイスの作成:パフォーマンス3

実装の内容によって、パフォーマンスがどのように変化があるのか調査してみた。

調査対象

Garminウォッチフェイスの作成:デジタル時計2でゲージを表示しただけで、かなり時間がかかるのが分かったので、ゲージ表示の円弧表示と、テキスト描画時のパラメータでどのように変化があるのか2点調べた。

円弧の描画

drawArcを使った描画

画面の中心を中心に、上半分に半円を描画するもの。

	function useDrawArc(dc) {
    	dc.drawArc(center[0], center[1], center[0] - 3,
    		Graphics.ARC_COUNTER_CLOCKWISE,
    		0.0, 180.0);
	}

drawLineを使って描画

drawArcと同じような仕様で、頂点をsin/cosで計算して線分描画したもの。
線分頂点を1, 2, 3, 4, 10, 12, 20度単位で計算してみた。

		var radius = center[0] - 3;
		var prev = [center[0] + radius, center[1]];
		var baseAngle = Math.PI / 180.0;
		for (var i = 1; i < 180; i++) {
			var angle = baseAngle * i;
			var now = [center[0] + radius * Math.cos(angle), center[1] - radius * Math.sin(angle)];
			dc.drawLine(prev[0], prev[1], now[0], now[1]);
			prev = now; 
		}
		dc.drawLine(prev[0], prev[1], 3, center[1]);

drawTextを使っての描画

drawArc/drawLineが同じ形状を描画しているが、こちらは画面中央にテキスト88:88を描画した。

	function useDrawText(dc) {
		dc.drawText(center[0], center[1], Graphics.FONT_NUMBER_THAI_HOT, "88:88", Graphics.TEXT_JUSTIFY_CENTER);
	}

フォント名とjustificationを変えてみた、実行時間を計測してみた。

計測結果

円弧の描画

drawArc、drawLineの結果を、コード時間、グラフィック時間、トータル時間の各時間とその時の描画内容を示す。ちなみに表示時間は、すべて54080なので表には記載せず。

drawArcは圧倒的にグラフィック時間が長い。drawLineを使用した場合、分割する数が多くなれば処理時間が長くなる傾向がある。一応分割単位が12度位であれば、実際の円弧との形状の際は1ドット程度なので、そこらあたりが使用時の許容範囲なのかもしれない。

テキストの描画

justificationに関しては、LEFT/RIGHTともにCENTERとコード処理時間は同じだったので、表には不掲載。VCENTERとのORの組み合わせは、OR処理のため、若干処理時間が増えたのか。
グラフィックに関しては、フォントが大きく、実際の描画エリアが増えたことにより、処理時間が増えたものと思われる。(描画面積に比例しているのかな？)