在一個平面上對齊形狀，Algoryhtm

Question

我正在開發一個簡單的圖形工具，使用flex在一個平面圖上繪製形狀。 首先我使用了一個簡單的20 * 20網格。

但是真正的酷東西出來他們是汽車斧頭磁鐵效應，這就是我至少看到爲什麼我的意思是我做了一個小視頻balsamiq。

http://screenr.com/clB

http://www.balsamiq.com/

正如你可以看到它對齊的垂直水平邊框和中心軸。

• 邊界：灰色軸
• 水平對齊（高度/ 2）中心：藍色斧
• 沒有垂直對齊（寬度/ 2）斧
• 的25像素一些中介填充空間：綠色軸

你認爲這樣的算法是如何工作的： 現在我會做不旋轉。

鑑於在位置中選擇的形狀S1左上x，y和的寬度瓦特高度ħ。

看交叉的兩個區域的所有形狀：

從XMIN = X，XMAX = X + W爲Y> 0。

從yming = Y，YMAX = Y +對於x> 0小時。

一旦我有形狀有關的列表中我檢查是否有任何條件相匹配：

當我使用「=」其近似+或 - 2個像素將得到想要的「磁體」效果

• S1 X = S'x =>灰色位於x線
• S1 X +瓦特位於y
位於x + W
• S1 Y = S'y =>灰線= S'x =>灰線
• S1 Y + H = S'y =>位於y + H灰線
• S1 X = S'x 和 S1 X + W = S'x + W =>藍在線X + W/2

並給予20像素

• S1 X = S'x + PADD =>在S1 GREENLINE X
• S1 X = S'x的填充磁體 - PADD => GREENLINE在S1 X
• S1 y = S'y + PADD => S1處的綠線y
• S1 y = S'y - PADD =>在S1的綠線y

你對此有何想法？

Answer 1

我寫了Balsamiq的捕捉算法。你非常接近。我們所做的一件「聰明的」事情（如果我可以這樣說的話）是預先填充兩個稀疏的數組，並且在鼠標拖拽上進行捕捉座標，這樣他們就可以輕鬆/快速/便宜地查找鼠標移動。我要做的onmousedown事件是這樣的：

讓我們對X座標通話（然後重複同樣的事情Y）：

• 說重力5
• 看看所有的形狀
• 每個形狀，看它的左邊緣，說它在100.填充xSnappingPositions對象從100-GRAVITY（95）到100 + GRAVITY（105），數字爲100.重複右邊緣

然後當你做一個onMouseMov e，你看看你拖着x和y的控件。 xSnappingPositions和ySnappingPosition中是否有與左邊緣相匹配的東西？如果是，則轉到數組中保存的值，而不是使用鼠標檢測到的位置（即捕捉它）。重複檢查右邊緣，中心等。

我希望這有助於！