午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

WPFとVB.NETでカラーピッカーその2、HSVとRGBで色指定

VB.NET #ソフトウェア WPF

前回からの続き

gogowaten.hatenablog.com

WPFとVB.NETでカラーピッカーその1 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14018045.html
 
HSVだけからだったのをRGBからも色を選べるようにした

今回のカラーピッカー動作

 
デザイン画面、XAML

f:id:gogowaten:20191025120736p:plain

f:id:gogowaten:20191025120751p:plain


 
色の選択のマーカー
イメージ 4
どこの色を選択しているかの目印の丸いマーカーは
ControlTemplateを使って見た目を変更したThumb
透明色を指定したGridの中に黒と白のEllipseを描いただけのもの
Ellipseの中心が選択した色になるのでEllipseの大きさは中心ができるように
奇数
 
UpdateSourceTrigger
イメージ 5
スライダーの値とテキストボックスの表示テキストをBindingしている時に
テキストを入力中にもスライダーに反映させるときは
BindingのUpdateSourceTriggerをPropertyChangedに指定する
 
 

 
MainWindoww.xaml.VBコード

f:id:gogowaten:20191025120810p:plain

 
前回からの変更や追加したところ
 
横の色相画像の作成
イメージ 7
イメージ 6
前回は縦だったけど横のほうがいいかなって
作るのは縦のほうがラクなので縦で作ったのを
TransformBitmapクラスっていうBitmap画像を回転させる便利なのがあったので
これを使って270度回転させて横向き画像にした
 
例の透明画像
イメージ 8
透明度のアルファ値も指定できるようにしたので
どれだけ透明なのかわかるようによくある市松模様を真似してみた
この市松模様画像も画像を用意しておくのではなくて
アプリ起動時に作成するようにしてみた
 
イメージ 9

最初の
Dim grid As Integer = imgTransparent.Height / 10
でマスの大きさを指定している、ここでは画像の大きさの1/10にしている
これはこれで問題なさそうなんだけど、4にすると
イメージ 10
こんなふうに崩れてしまうのは
 
イメージ 11
ここが間違っているんだろうけどよくわからん
 
 
Sliderを動かした時の処理
HSVとARGBの各値はそれぞれのSliderとtextboxで変更と表示をする
Sliderの値とtextboxのTextはBindingで同期
HSVどれかの値が変更されたらRGBの値も変更する
RGBどれかの値が変更されたらHSVの値も変更する
このままだと処理が無限ループするのでそれぞれフラグ(目印)をつける
イメージ 12
HSVの値が変更中ならIsChangeHSVをTrueにしておいて
変更終了したらFalseに戻す
RGBも同様で
↓RGBのSliderのValueChangedイベントの時の処理
イメージ 13
最初にHSVの処理中かどうかの判定をして処理中ならなにもしないで終了
If IsChangeHSV Then Return
 
HSVの処理中ではなかったらRGBの処理中をTrueにして処理続行
        IsChangeRGB = True
 
いろいろ処理して終わったら最後にRGBの処理中フラグをFalseにする
        IsChangeRGB = False
 
これで無限ループしないようにしているけど不格好な気がする
もっとまともな方法があるはずだけどわからん
 
 
SV画像クリックしたとき
SV画像ってのは適当につけた名前で
イメージ 14
↑だと大きな緑の四角画像のこと
これをクリックした時にクリックした場所に○マーカーをその場所に移動させる処理
 
SV画像をクリックしたとき
イメージ 15
imgSVがSV画像を表示しているImageコントロール
e.GetPositionでクリックした位置(Point)を取得して設置
SとVのスライダーの値も変更、SV画像の大きさとSVスライダーの最大値は
同じにしてあるからクリック位置そのままの値を指定している
 
○マーカーを移動させる処理、moveThumb
イメージ 16
IsDragはマーカーの移動中フラグ、ドラッグ移動中ならここからの処理は必要ない
Dim t As Thumb = thumb1
これほとんど意味ないなｗ
ConvertThumbPointに位置を渡してマーカーの左上の位置を受け取って
SetLeftとSetTopで位置指定完了
 
ConvertThumbPoint
イメージ 17
クリックした位置がマーカーの中心になるように設置する位置は
クリックした位置の左上にする
クリックした位置と設置する位置の差はマーカーになるEllipseの半径
だから直径/2を切り捨て
 
うーん、MoveThumbとこれをThumbPointは1つにまとめてもいい気がする
なんで分けたんだろ
 
 
 
Sliderとtextboxの上でマウスホイールを回転した時の処理
イメージ 18
MouseWheelイベントで
上回転で値を+1、下回転で-1
 
 
市松模様画像の表示非表示切り替え処理
イメージ 19
非表示っていうプロパティが見当たらなかったので
サイズを0x0にして非表示に見せかけているだけ
 
 
 
マーカーの移動時の処理
イメージ 20
マウスの動きに合わせてマーカーを移動させているだけ
ドラッグ移動中フラグのIsDragをTrue
マウスカーソルとマーカーの位置のズレがwとhで直径の半分とかは
さっきと同じで、あとは画像からはみ出ないように規制しているのが
        If nx < -w Then nx = -w
        If nx > MaxSV - w Then nx = MaxSV - w
        If ny < -h Then ny = -h
        If ny > MaxSV - h Then ny = MaxSV - h
横縦が0以下にならないように、SとVの最大値を超えないようにしている
 
ドラッグ終了時
イメージ 21
ドラッグ移動中フラグをFalse
 
マーカーの移動時の処理はSV画像クリック時の処理とほとんど同じで冗長だなあ
 
不満なのはSV画像クリックしてマーカーを動かしてそのままドラッグ移動できなくて、もう1回クリックする必要があること
処理がもたつく、SV画像が100なら気にならないけど255とかにして
スライダーを動かすと気になる
作りがWPFっぽくない、WPFっぽいところはSliderとtextboxのBindingと
マーカーの表示と移動だけかな、ほんとはDataContextとか使いたかったけど
まだよくわからん
 
今回の説明画像で使ったフォント
イメージ 22
 
教科書っぽいけど楷書体もかっこいいね
 
 
 
コード貼り付けようとしたら文字数制限に引っかかったので分割
 
WPFとVB.NETでカラーピッカーその2、HSVとRGBで色指定のコード後半部分 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14025951.html
後半部分

gogowaten.hatenablog.com 

WPFとVB.NETでカラーピッカーその2、HSVとRGBで色指定のコード前半部分 - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14025948.html
 
 
 
 
コード全体？
 
 
この記事の続き

gogowaten.hatenablog.com

 
WPFとVB.NETでカラーピッカーその3、元の色の明るさ(輝度)に合わせた別の色(色相)を選びたい ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14039932.html