テキストの描画:背景色の設定

使用しているウォッチフェイスで、テキストが重なった部分の調整のため、文字にハイフン”-“を使った箇所があり、その部分をもうちょっとスマートに解決することができないか、ちょっと調べてみた。

結果としては、テキスト描画時の背景色の指定をCOLOR_TRANSPARENTにすることで対応できた。

該当する問題個所

それがこの部分。
目標歩数と現在の歩数をハイフンでつなげている部分。

当初は、スラッシュ”/”を使おうと思ったのだが、そうした場合、以下の様にスラッシュの一部が欠けてしまった。

これは、該当箇所を拡大したものだのだが、スラッシュの下側がちょっとだけかけている。

原因

テキストを描画する際の背景色を黒に設定しており、かつ、描画エリアの節約？のために、テキストの描画をちょっと上に詰め気味に描画していたため。
実際には、スラッシュの下の日没・日の出時刻のテキストの背景色で塗りつぶされてしまっていた。

テキストの描画では、前景色と背景色を設定でき、作成したウォッチフェイスでは、背景色に黒を設定していた。
この設定で描画すると、テキストの表示領域は一度背景色で塗りつぶされてからテキストの位置は前景色で描画される。
簡単なもので表すと、以下のような結果になる。

これは、画面全体を白で塗りつぶしてから、FONT_NUMBER_HOTのテキストで描画したもの。
テキストが描画される場所以外かなりの領域が黒で塗りつぶされているのが分かる。

これと同様のことが、日没・日の出時刻の描画時に発生し、スラッシュの一部が欠けてしまった。

初期対応

スラッシュだとかけるので、単純にハイフンを使うことにした。

それで、上記のような表示になった。

対応としては、ちょっと安直だったかもしれない。

本当の対応方法

最近ちょっと調べていたところ、色の設定に、COLOR_TRANSPARENTというのがあるのが分かった。
以前、ウォッチフェイスを作っていた時にもそういえばあったな、という程度の認識で、調べて使わなかったのは、サンプルで提供されているものにCOLOR_TRANSPARENTを使ったものを見なかったから。

一応、これを背景色に使うことで、背景色での塗りつぶしを実施しないことが分かった。

描画結果としては、次のような感じ。
背景を白で塗りつぶしている関係、前景色を黒に、背景色をCOLOR_TRANSPARENTにしてある。