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つで済みますけど、ちょっとその頂点を求める計算式が面倒…。

まとめ

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

Random Posts

Mirco USBとType-Cが混在する今、これが便利! dodocool 3in1 USBケーブル DA120
Simple Memory Widget:RAM、内部ストレージ、SDカードの空き容量をサークル表示
ABOATの両端リバーシブルmicroUSBケーブル-長さの違う3本セットなので用途で使い分けられる
snow_mt【ホーム画面定期コンテスト】
CHOETECH 2in1 USBケーブル:バネのように伸びるケーブルとType-Cアダプタ付が便利
KLWPのテーマ特集:カードUIが軽快に動くテーマ8選 (2016.11.29)
コミックマーケットC91(Androidのホーム画面をカスタマイズする本7)用に作ったホーム画面
2017年に買った・手に入れたスマホや周辺機器:振り返ればいろいろあるがいまいち消化不良
UMi SUPERレビュー:スペックは充分、それでいて安価、ただしカメラと重さには注意が必要
「Androidのホーム画面をカスタマイズする本7」PDF版および書店委託販売のご案内
Android 8.0で通知に表示される「バックグラウンドで実行中です」を消す
電子マネーをもう少しちゃんと使ってみようと思ったのでAndroid Payを使ってみる
薄く小さく軽い!スマホとBluetooth接続で発着信もできるカードフォン「SOYES H1」
格安SIM (MVNO) 速度比較 : 2016年10月その1 ロケットモバイルとDTIが昼でも「使える」SIMに
KLWPでタブ切り替え表示(タップでパネル内容の切り替え)を作る