0

フレックスを使用して、平面上の図形を含む単純なダイアグラム ツールを開発しています。最初に、単純な 20*20 グリッドを使用していました。

しかし、彼らの本当のクールなものは自動斧マグネット効果です。それが、バルサミクの小さなビデオを作成した理由を少なくとも理解するために、私がそれを呼び出す方法です。

http://screenr.com/clB

http://www.balsamiq.com/

ご覧のとおり、垂直方向の水平境界線と中心軸上に配置されています。

  • ボーダー: 灰色の軸
  • 水平方向に整列 (高さ/2) 中央: 青い斧
  • 垂直方向の位置合わせ (幅/2) 軸なし
  • 25px の中間パディング スペース: 緑の軸

このようなアルゴリズムはどのように機能すると思いますか: 今のところ、回転なしで行います。

左上の位置x,yで幅wと高さhの形状S1が選択されているとします。

2 つのゾーンと交差するすべての図形を見てください。

y > 0 の場合、xmin = x、xmax= x+w から。

x > 0 の場合、yming = y 、ymax= y+h から。

関連する形状のリストを取得したら、条件が一致するかどうかを確認します。

「=」を使用すると、近似 + または - 2 ピクセルで必要な「マグネット」効果が得られます

  • S1 x = S'x => x の灰色の線
  • S1 x+w = S'x => x+w の灰色の線
  • S1 y = S'y => y の灰色の線
  • S1 y+h = S'y => y+h の灰色の線
  • S1 x = S'xおよびS1 x+w = S'x+w => x + w/2 の青い線

20 px のパディング マグネットを指定すると、

  • S1 x = S'x + PADD => S1 x のグリーンライン
  • S1 x = S'x - PADD => S1 x のグリーンライン
  • S1 y = S'y + PADD => S1 y のグリーンライン
  • S1 y = S'y - PADD => S1 y のグリーンライン

これについてどう思いますか？

4

1 に答える 1

0

Balsamiq のスナッピング アルゴリズムを作成しました。あなたはかなり近いです。私たちが行う「賢い」ことの 1 つは (私自身がそう言うかもしれませんが)、onMouseMove を検索するのが簡単/高速/安価になるように、スナップ座標 onMouseDown を使用して 2 つの疎配列を事前に設定することです。私が onMouseDown で行うことは次のとおりです。

x座標について話しましょう（yについても同じことを繰り返します）：

  • 重力が5だと言う
  • すべての形を見て
  • 各形状について、左端を見て、100 とします。100-GRAVITY (95) から 100+GRAVITY (105) までの xSnappingPositions オブジェクトに 100 を入力します。右端について繰り返します。

次に、onMouseMove を実行するときに、ドラッグしているコントロールの x と y を確認します。xSnappingPositions と ySnappingPosition に現在左端に一致するものはありますか? その場合、マウスによって検出された位置を使用する代わりに、配列に保存されている値に移動します (つまり、それにスナップします)。右端、中央などのチェックを繰り返します。

これが役立つことを願っています！

于 2009-11-10T20:53:29.217 に答える