2017年3月9日木曜日

VS WPF アイコン表現(画像利用)を PNG で

WPF のパーツとして、 .png 形式の画像を利用する場合も多いと思います。
既成のもの流用では、著作権がありますから、弄れない場合が多いですが、
自家製でしたら、 透過率(或いは 不透明度) 0 % or 100 % の2種類だけなんて、
もったいない!


とある WPF プログラミングで、文字の部分をアイコン表示にしました。
Windows 7 用に書き下ろした もの が、 Windows 10 になり、システムフォント変更の煽りを喰って、
可笑しな 絵文字 に化けたのです。
それ故の アイコン化  (アイコン表現 画像利用) でした。
その後、故あって、背景を弄る事になり、
背景が、 大雑把な表現をするなら、 白と黒の2種類からのユーザー選択 になる事に。

このアイコン画像、自家製です。
アイコン(画像)の背景は透過率 100 % で作ってありました。
所謂、アイコンファイル .ico 等では、 透過率 70 % とか、20 % とか、アルファ値のグラデーションとか、 も使っています。

さて、元々、白基調の背景を想定して作ってあった 黒い線画 のアイコン表現。

これが、 黒背景に化けると ... 。
言わずもがな! ですよね。
さぁ、 どうしよう ... 。
背景別に2種類の画像を用意し切り替えるのも アホ みたい だし ... 。
!。
そうだ、 .png だったんだ! あれ。


はい。
.png 、 アルファ値は 可変です。 0 & 1 の世界ではありません。
少し薄めの白を その背景に取れば、
黒い線が 黒い背景に 飲まれる事は ありません。  ね。
その場合、 灰色に 黒線 表示に なる様に、 白の透明度を操作すれば良い事です。

VS と言うよりは、 画像編集の世界ですね、 これ。

絵でご覧戴きましょう。




こんな感じで調整します。


この画像は、実際に 実行させた プログラムの 画面コピーを取り、 必要箇所を切り取って並べたものです。
画像編集ソフト GIMP です。
そこに、 Project に Resources として登録してある .png をレイヤーとして幾つも開いています。
不透明度を どの位の値 にすれば良いのか を考えている処。


既に出来ている .png に 白無地レイヤー を追加し、
そのレイヤーの 不透明度を弄っている様子です。  T の後の数字が 不透明度。  Opacity 。.
この中に 14 のレイヤーが犇めいて (ひしめいて) います。
   不可視属性の2つも含む。  この2つは 潰れた1つのアイコンと同じ位置にあります。  最終確認用。.

左端の 黒背景に置いた アイコン が 当初のもの。  透明背景に黒の線画 です。.
見事に 潰れて、 何が何だか 分かりません!。
                                原因は、アイコンそのものの背景(余白)を透明にしていたから。


どの位の値にするかを決めたら、 レイヤー統合して、 別画像に切り出し、
元のファイルに上書きすれば おしまい!。


斯くして、 Trigger-Setter を使う訳でもなく、 2種類の色違いを用意するでもなく、
安易な 逃げの手 を打って 事態収拾 と相成りました。



0 件のコメント:

コメントを投稿