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

イースターホーム【ホーム画面定期コンテスト】
DeviceMemoryWidget:ストレージやRAM使用率を表示するシンプルでミニマムなウィジェット
格安SIM (MVNO) の速度測定:2018年9月 その2 mineoソフトバンク回線は出だし好調…?
C94新刊 「アンドロイドのホーム画面をカスタマイズする本10」のお知らせ
第2回ホーム画面カスタマイズ定期コンテスト 投票結果発表! 1位は水滴と透明度のホーム画面
Pixel Home+【あなたのホーム画面見せてください 2018】
約8時間の稼働時間で長時間使用OKが嬉しい! aptX対応 Bluetoothイヤホン dodocool DA109
Twitterの3時間300postレート制限、Androidの主要Twitterアプリの対応状況
BlackBerry KEY2 レポート:ホーム画面とプリインアプリ、設定画面にベンチマーク
LINEモバイル「友だち招待」スタート!招待URLからの登録で登録事務手数料が最大無料に!
「アンドロイドのホーム画面をカスタマイズする本10」PDF版および書店委託販売のご案内
作業机のUSB環境を改善するためにサンワサプライのクランプ式USB充電器を導入
FREETELのスマートコミコミ+がやっぱりわけわからなくて近寄りたくない
One Touch RAM Cleaner Widget:タップ1つでメモリを解放してくれるウィジェット
左右に優しい 【あなたのホーム画面見せてください 2018】