グループ化後の変形とグループ化解除のテスト
前回からの続き、テストばっかりで本番前に力尽きそう
赤枠はグループの範囲の境界線、青マスは1マス50
見た目の位置とサイズは水色のこと
前提
グループを回転や拡大率の指定をするときの中心点は各Thumb(四角)の中心ではなくグループ範囲の中心にする
初期状態は
水色と桃色をグループ化した後にさらに黄色をグループ化した状態グループB
┣黄色
┗グループA
┣水色
┗桃色
これを1回解除すると
グループA
┣水色
┗桃色
黄色
こうなって
もう一回解除すると
水色
桃色
黄色
ってバラバラになる
難しいのが解除した時に解除前の位置や回転や拡大率とかの変形の引き継ぎ
回転の場合
実際に位置やサイズを指定するのは内部のものになる
グループ解除で中心点の変化
内部の位置を変更して見た目の位置を変化させないようにしている
って今気づいたけど見た目の位置の表示がおかしい、変化しているｗ
→見た目の位置取得前に再描画する必要があったみたい
デザイン画面とXAML
VBのコード
前回のこれ
A:自身のRenderTransformの中からRotateTransformを探しだして、その中のAngleプロパティを変更する前回はBの方法だったけど今回はまともなAの方法にすることになったけどグループ化後に回転すると位置がずれる！
B:新たにRotateTransformを作って自身のRenderTransformのGroupに追加する
このどちらかになると思う
Aはムダがないけどちょっとめんどくさい
Bはラクだけど回転の変更する度に追加するからかなりのムダ、きりがない
これはグループ化の前後で回転軸の位置が変わるのが原因
例えば
グループ化前の時に10度回転、その後グループ化してグループを10度回転で合計20度回転
これが回転の変化で回転軸の変化が
グループ化前の回転軸は(0,0)、グループ化によって回転軸の位置が(50,30)になった場合
RotateTransform(10,0,0)から
RotateTransform(20,50,30)に変更することになるけど
これだと位置がずれる
追加方式のBなら
RotateTransform(10,0,0) + RotateTransform(10,50,30)
これならズレることはない、けど回転の変更する度に増えるから
RotateTransform(10,0,0) + RotateTransform(10,50,30) + RotateTransform(10,50,30) + RotateTransform(10,50,30) + RotateTransform(10,50,30)…
ってきりがないのは前回
なので
1回だけ追加(B方式)して、それ以降は追加したものに変更を加える(A方式)
RotateTransform(10,0,0) + RotateTransform(10,50,30)
こうして1回だけ追加して、ここからさらに10度回転して合計30度にするときは
RotateTransform(10,0,0) + RotateTransform(20,50,30)
こうする
変形用のTransformは回転以外に3つ用意されていて合計4つ
これをまとめたもの(Collection)を記録しておく入れ物が必要
同じグループ内でもThumbによって中心点は違ってくるからThumbに持たせる必要がある
ってことで前回同様Thumbを継承したクラスを作ってこんな感じになった
グループ化したものをさらに別のものとグループ化すると中心点も変化するから、また新しい4つのTransformを作成してgtCollectionを今のものと入れ替える
この時古い方は捨てないで取っておくとグループ化解除した時にまた使えるので、それの入れ物が493行目のgtStack
494行目は自身がどのグループに属しているかの目印用、Group2を入れておく
この辺りのStack型のCollectionの使い方は
WPFとVB.NET、エクセルのグループ化とグループ化解除を真似したい3 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログこの時と同じ感じ
http://blogs.yahoo.co.jp/gogowaten/14187560.html
Group2、グループの情報用クラス
WPFとVB.NET、エクセルのグループ化とグループ化解除を真似したい4 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログこの時とだいたい同じ感じ
http://blogs.yahoo.co.jp/gogowaten/14203583.html
違うのは516行目、CenterPointにはグループの中心点を記録しておく
中に入っている順番は固定していてその順番に合わせてある
上から0，１，２，３
ScaleTransformを取り出したい時に
gtCollection(0)でもいいけど数値だけだとわかりにくいかなと
gtCollection(GTransform.Scale)
Thumbのグループ化
WPFとVB.NET、エクセルのグループ化とグループ化解除を真似したい4 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14203583.html
ここで終わっているので違うところは
変形に使うTransformを設定しているあたり
198行目で新たなTransformを作成、このTransformの中心軸、基準点っていうのかな、この点の位置は
グループの中心点 - 自身の中心点(197行目)
これを指定している
175，125グループの中心
125，125水色の中心
なので
175－125＝50、125-125＝0で
50，０
これを新しいTransformの軸に指定する
4つのTransformを作成するGetTransformGroup2
これに50，0を渡すと
ScaleTransform(1,1,50,0)
とかになる
この新しいTransformを198行目でtgCollectionに入れて
200から203行目でRenderTransformに追加している(B方式)
RenderTransformの中を見てみる
4のScaleTransformを見てみると
4から7の4つ全てのCenterXとCenterYは同じになっているはず
グループを変形するときはこれらを取り出して値を指定することになる
最初はこのとり出す方法がわからなかった
グループの拡大率を変えたいときは4番のScaleTransformが目的のものになるけど
0番にもScaleTransformがあるのでScaleTransformを探すってのは使えない
追加する順番や個数は決まっているから番号を覚えておけばできるけどわかりにくい
ってことで今回の方法
新しく作ったTransformはこのgtCollectionとRenderTransformのTransformGroupの両方に入れる、この両方の入れ物はCollectionでCollectionに入れたものは実際の値ではなくて参照(リンクみたい)になるのでどちらかに変更があるともう片方も変更される
gtCollectionには今のグループのTransformだけを入れておくので0から3番までの4つを覚えておけばいい
これなら簡単に目的のTransformを取得できるので、こっちで取得して値を変更する、両者は参照(リンク)関係なのでRenderTransformの方も変更される
グループの回転
gtCollectionにGTransform.Rotate(は2番)を指定して取得
448行目で角度変更
これでRenderTransformの中の今のグループに関係あるRotateTransformも変更されるので期待通りの動作になる
15度回転
この時の水色のgtCollectionとRenderTransformを見てみると
gtCollectionのRotateTransform
RenderTransformのRotateTransform
グループ化解除
移動
2から3へは見た目の位置に変化はないけど変化しないように移動している
2の時点では1の時と全く同じ位置にあって、回転によって見た目の位置が変化しているだけ
3でグループ化解除して単体になる黄色はグループの回転から外れるので位置を変更しないと
どのグループにも属さないで単体になるThumbの移動
前の位置 + 移動距離 = 期待する位置
二度手間な感じだけどこうなった
今の見た目の中心点を取得する
GetCenterPointLocate
自身の元の中心点をTransformToVisualを使って得たGeneralTransformのTransformで変換して取得している
指定した距離分移動させる
OffsetLocate
1階層下のグループの中のThumbすべての移動
これも移動させないと
この2つの点の差
これの分だけ移動させると自然な位置になる
グループ化解除時の
回転とかの変形(Transform)の引き継ぎと削除
引き継ぎと削除する
InheritsTransform
これにそれぞれ4つの値を引き継ぐ、って今回は回転と拡大率しか使っていないから2つしか書いてなかった
回転角度は足す、拡大率は掛け算でいいみたい(271行目まで)
引き継いだら今のをRenderTransformから削除(273から276行目)
gtCollectionも入れ替える(278行目)
これをグループ化解除の移動が終わった後のここで実行している
これでやっとグループ化解除の処理が終わる
エクセルでのグループ化→回転→グループ化解除
グループ化したものを回転するとかは
めったに使わないんだよねｗ
エクセルでグループ化→拡大率150%
基準点の切り替えできるようにしたいけどこのままかなあ
やっとできたグループ化解除で不自然にならないようにつじつま合わせ
以前の方法のグループ化するときにはThumbのなかにThumbを入れる、っていうのだとこれができなさそうで諦めて今のThumbはThumbのままで擬似的なグループ化っていう方法を試していたんだけど、なんとかできたっぽい
グループ化のテストは次で最後になるかなあ
前々回の範囲をマウスで指定してグループ化するのと移動を今回のに付け足す感じ
今回のコード全部
Wpf_test128_TransformGroup - Visual Studio Team Servicesどうやら↑ここに載っけたコードはMicrosoftのアカウントがないと見れないみたい？
https://gogowaten.visualstudio.com/WPF/_git/WPF_test7?path=%2FWpf_test128_TransformGroup&version=GBmaster&_a=contents
GitHubとかなら誰でも見れるようなんだけど使い方がわからん
ヤフーブログの2万文字制限が無くなるか緩和してくれないかしら
前々回
WPFとVB.NET、エクセルのグループ化とグループ化解除を真似したい4 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14203583.html
前回
WPFとVB.NET、エクセルのグループ化とグループ化解除を真似したい5 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
http://blogs.yahoo.co.jp/gogowaten/14209863.html