2015年10月31日土曜日

VB WPF お勉強 09 Image にファイルから画像を ボヤける!

WPF に移行して感じるのは、画像がクリヤーに表示されていない点です。
最初は気付きませんでしたが、 分ってしまうと、 画像に煩い 私 は、これが 不満 でした。
静止画像内の文字等は、それは それは、酷いものです。
対処法を、やっと、見付けました。


先ずは、基本と思われる 事柄。
画像をビットマップに展開して、Control に結び付けますね。
この時、展開されるサイズは、標準で無指定の場合、画像そのもののサイズです。
例えば、写真の場合、カメラで撮影した 横 4000 とか 5000 とか 6000 とか そんな大きさです。.
これを Contorol のサイズに自動縮小しています。

ですから、根本的には、必要とするサイズで 最初から指定して展開させる事で、 多少は、結果が好転する事になります。
恐らく、以下の数行を書き加える事で、改善されるでしょう。

Hint : bi を BitmapImage とした場合、 bi.DecodePixelWidth = Me.Image1.Width  '(etc).


さて、 恐らく、WPF で書かれていると思われる、
Windows に付随する Windows Media Player の プレイビューモード で アルバムの画像 を見て見て下さい。
何か、ぼやけて 見えませんか?。


WPF は、どうも、ベクターイメージ を基本にしている様です。
それに対して、冒頭に書いた様に、 写真等に代表される画像は ビットマップ に展開されますね。 (ラスター)
標準では、このビットマップに対しても、ベクトル描画のアンチエイリアシングが有効 になっている みたい です。
シャギーの無い斜めの線を綺麗に表現する為なのでしょうが、
スムージングは 画像には 不要! です。  そうした処理をした上でファイルに収まっている筈ですから。

RenderOptions.SetBitmapScalingMode(Me.Image1, BitmapScalingMode.NearestNeighbor)

この おまじない が、全てを解決してくれます。  全てとは 大袈裟 ですね。  そんなケースもあります。.
Image1 と命名された Image (Form で言う処の PictureBox) Control に対して指定します。

HighQuarity の筈の Unspecified(Fant) が仇となっています。
画像に関しては、逆効果! です。
わざわざ、ボカして いる様なものです。

msdn の解説 BitmapScalingMode.NearestNeighbor から引用します。
最近傍ビットマップ スケーリングを使用します。ソフトウェア ラスタライザーを使用する場合は、LowQuality モードよりもパフォーマンスが向上します。 このモードは、ビットマップの拡大によく使用されます。
 下線部分の下線は ShiroYuki_Mot が加飾   


拡大だけでなく、縮小時にも、 いえいえ、原寸時にさえ。

でも、きっと、ちゃぁんと、 コードを書いていれば ぼやけ ないのかも知れません。
きっと、きっと、 コードが何か足らないから、この様なボヤける! 羽目 になるのだろうとも思っています。             
だって、WPF は画像の処理も 強力 との触れ込みですからね。


さてさて、問題は。
元の画像サイズから縮小したサイズで取得して一旦は表示させるが、これをユーザー操作で拡大する場合 です。
困りましたね。
  と言うのは、大元は精細な情報を持つファイルでも、サムネイル状に取得した結果から拡大する訳ですから。
  この場合の結果は、言わずもがな ... 。
どうすれば、 って、答えは幾通りか考えられますね。
ん~、まぁ、 一番簡単なのは、 
BitmapScalingMode.NearestNeighbor で初期表示したら、 BitmapScalingMode.Fant に切り替えて置く でしょうか。
面倒を厭わなければ、サイズに応じたビットマップを数種類用意して切り替えるのでしょうかね?。  ふぅ、いやらしい。.
そして、最後の手段は、きっと、アイコンと同じ様に、サイズに応じた元画像を数種類用意して、切り替えるのでしょうね。  お~、溜息。.



どうしても、ボケてしまう 絵 に悩まされたら一度は試して見て下さい。



次の投稿の最後にシリーズのリンクを纏めてあります。   VB WPF お勉強 01 印象



[2016/11/27] Code 訂正 Me.Image1.ActualWidth > Me.Image1.Width

1 件のコメント:

  1. こちらに戴いたコメントは、関連投稿を新規作成したので、そちらに移動しました。

    返信削除