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

Language Navi:「日本語じゃないので☆1です」なんてもう言えない!アプリ画面を翻訳してくれるアプリ
格安SIM (MVNO) 速度比較 : 2018年5月その2 ほかより少しだけいいOCN系が気になる?
OMAKER M7 Bluetoothスピーカー レビュー:小さくても意外とパワフルで部屋中に音が響く
私の思い出のAndroid端末:スマホを使っているとオタクに見られた頃から使っていたGALAXY S SC-02B
タブでサクサク切り替えできる、あのウェブサイト風ホーム【ホーム画面企画2016】
Foldery Multicon Folder Widget:アイコンパックも適用できるフォルダーウィジェット
太いバンドでガッチリホールド!鍵やカードも収納できるOmakerのスマホ収納アームバンド
Wiko View レビューその2:カメラをチェック! 低速度撮影や手ぶれ補正で動画撮影は楽しいかも
Ulefone Gemini レビュー:ダブルカメラのボケは独特で、多機能なホームキーなど全体的にそこそこ
【アンケート企画】あなたのスマホの持ち方教えてください!2017【結果と考察編】
b-mobile S 190PadSIMを新規契約!Androidでも使えるし使った分だけ支払いだから開幕SIMより安い場合も
Simple better home 【あなたのホーム画面見せてください 2018】
てのひらに彩りを【ホーム画面定期コンテスト】
Xperia X 京都【ホーム画面コンテスト2017】
LINEモバイルのソフトバンク回線が低速化! 18日夕方をめどに増強し、改善を約束