Glaeja小ネタ5

1年ぶりのGlaejaの小ネタです。

この間書いたOperaMaxですが、そのアプリ内の円グラフが気になったんです。
140618-1

これですね。

いや、別にOperaMaxがなんか変とかではなく、こういう色の境目が抜き取られているみたいな円グラフが、時々使いたくなるのです。さて、これをどうやって作ろうか?

普通の円グラフ

140618-2

まずは普通に円グラフ(バッテリー残量)を作ってみました。
デフォルトのものを位置と色を変えただけですね。

開始位置と終了位置を変えてみる

140618-3

レイヤーをコピーしてサークルを2つにしました。
1つは背景部分だけを表示して、現在値部分は透明色にします。
もう1つは背景色を透明にして、現在値だけ表示します。

現在値だけ表示のほうのサークルで、レベル開始位置を1%に、終了位置を-1%にします。
すると1%分の空白が生まれます。

成功っぽい?

140618-4

線が細い時は目立たないのですが、この方法だと空白になった部分も扇型というか、直線で削られないんですよね。線幅を太くするとちょっとイヤンな感じになります。

転送モードで削る

140618-5 140618-6

ならば、円グラフは最初の普通の円グラフで描画し、抜く部分はハンドで作り、転送モードでその部分を消去することにしました。
ハンド(中心から0%へ延びる線)を転送モード(対象からこのレイヤーの形を消去)で抜きます。
同じく
ハンド(中心から現在値%へ延びる線)を転送モード(対象からこのレイヤーの形を消去)で抜きます。

これはキレイに直線で抜くことができました。

140618-7

ただこれだと抜くのに4つもレイヤー使っているんですよね。
まぁハンドじゃなくて多角形を使えば1つのレイヤーで抜くための線を描画できるのでレイヤー2つで済みますけど、ちょっとその頂点を求める計算式が面倒…。

まとめ

こういった、ほんのちょっと違う円グラフ、というのもさり気なく使うとオシャレだと思います。
やり方も、いろいろあると思います。なにかいい方法があったら教えてください!

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE