WPF、変形後の要素の4辺をグリッドスナップしながらドラッグ移動 ( ソフトウェア ) - 午後わてんのブログ

前回からの続きで

今回の目的は

変形した要素がピッタリ収まる四角枠の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になってしまい、これだと右側になってしまう、なので別の丸め処理をする必要があって、その一覧

ワークシート関数だとTRUNCとROUNDUPの2種類

VB.NETだとMath.FloorとMath.Ceilingの2種類

これで対応できた

.NETのほうにもMath.Truncateっていうのがあるんだけど

今回はFloorのほうが都合が良かった

これらは

小数点を切り捨て、切り上げ、四捨五入する: .NET Tips: C#, VB.NET
http://dobon.net/vb/dotnet/programing/round.html
こちらを参考にしました、ありがとうございます！

右辺の目標グリッドも同じように求めるので

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の位置に移動

エクセルで確認してみる