前回からの続きで
今回の目的は
変形した要素がピッタリ収まる四角枠の4辺をグリッドスナップするマウスドラッグ移動
今回のアプリのダウンロード先
青枠がぴったり枠で水色罫線がグリッド
どんな処理をすればいいのかエクセル方眼紙を使って考えてみた
エクセル方眼紙は便利なんだよなあ
これで横の位置は決められる
上下移動で縦の位置も左右を上下に入れ替えれば同じようにできる
横移動の場合の目標グリッドの選択
両辺それぞれの左右にグリッドがあって、どちらのグリッドに合わせたらいいのかはマウスの移動方向で決める
マウスが右方向に移動していたら辺の左側を目標グリッドにする
これは、右側のグリッドはマウスの移動距離が足りなくてまだ到達していないグリッドなので目標にしても意味が無いから
目標グリッドの位置を求める
条件
左辺の初期位置が35.91、グリッドサイズが50、マウスの移動距離が50
この時
初期位置＋マウスの移動距離＝今(移動後)の位置
35.91＋50＝85.91
これをグリッドサイズで割って
85.91/50＝1.7182
マウスの移動距離がプラス値なら右移動、マイナス値なら左移動なので、移動距離50は右移動
右移動のときは左側を目標グリッドにする
今の位置1.7182ってことは1番目と2番めのグリッドの間にあるってことだから、左側のグリッドは1番目のグリッドってことになる
これは1.7182の小数点を切り捨てる処理をすればいい
グリッドサイズは50なので1＊50＝50
左辺の目標グリッド位置は50
右移動で移動後の位置がプラス値なら単純に小数点以下切り捨てればいいんだけど
マイナス値、例えば-1.5だと切り捨てると-1.0になってしまい、これだと右側になってしまう、なので別の丸め処理をする必要があって、その一覧
VB.NETだとMath.FloorとMath.Ceilingの2種類
これで対応できた
.NETのほうにもMath.Truncateっていうのがあるんだけど
今回はFloorのほうが都合が良かった
これらは
右辺の目標グリッドも同じように求めるので
164.09+50＝214.09
214.09/50＝4.2828
TRUNC(4.2828,0)＝4
4＊50＝200
右辺の目標グリッド位置は200
それぞれの目標グリッドが得られたら、その方向と距離は有効なのかを判定
方向判定
左辺の目標グリッドは50で、左辺初期位置は35.91
初期位置から見て目標グリッドは右、マウスの移動も右なので方向は有効
右辺の目標グリッドは200で、右辺初期位置は164.09
初期位置から見て目標グリッドは右、マウスの移動も右なので方向は有効
距離判定
マウスの移動距離は50
左辺初期位置から左辺の目標グリッドまでの距離は
35.91-50＝-14.09
距離は絶対値なので14.09
これよりマウスの移動距離が大きければいいので左辺移動距離は有効
右辺は
Math.Abs(164.09-200)＝35.91
50>=35.91はTrueなので右辺移動距離も有効
有効判定
方向、距離のどちらも有効な場合だけその目標グリッドは有効になる
左辺、右辺の方向、距離ともに有効なので両辺ともに有効
両辺ともに有効なら近い方のグリッドを選ぶ
左辺の距離
左辺の目標グリッドー(左辺初期位置＋マウスの移動距離)
＝50-(35.91+50)=-35.91
＝35.91
右辺の距離
＝200-(164.09+50)=-14.09
＝14.09
右辺のほうが近いので右辺を200の位置に移動
初期位置やマウスの移動距離を変更してみる
どんな処理や関数が必要なのかも目安が付けやすいし、処理の流れも確認しやすいと思った(小並感)
VBで書いたのがこれ、文字数節約のため画像
結果
できた！期待どおりの動き！
これで変形後のぴったり枠の4辺のグリッドスナップはできたので
残るは去年挑戦したけどうまくできなかった変形後の4頂点のグリッドスナップ限界突破
今回のコードは長すぎてヤフーブログの文字数上限を超えていたので
こっち
今月に入ってから暑くなって今年も限界が近づいてきたなあ
昼間に室温35度を超えるのは全く問題ないけど
深夜0時に室温33.9度は限界超えてるでしょ、暑くてうまく寝られないから睡眠不足が続いてだんだん頭が動かなくなる
平均室温33.375度はいろいろ限界だと思った
前回の記事
WPF、変形後の要素(Thumb)のグリッドスナップ移動 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15001512.html
次回の記事、2017/07/13は6日後
WPF、変形後の要素(Thumb)の頂点をマウスドラッグで最寄りのグリッド頂点にスナップ ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15022173.html
