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	543	184796	239416
drawLine(1度)	81318	1912	137310
drawLine(2度)	41187	1956	97223
drawLine(3度)	27800	1983	83863
drawLine(4度)	21050	1995	77125
drawLine(10度)	8900	2006	64986
drawLine(12度)	7550	2006	63636
drawLine(20度)	4850	2008	60938

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

テキストの描画

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