2011-04-08 75 views
2

所有內,限制的對象停留另一個對象

這是有關SVG,我有做的這保持靜態路徑的大SVG對象。通過按下按鈕,我可以在較大的對象內創建另一個SVG對象。第二個對象可以用mousedown拖動。

問題: 現在我想添加一個限制,以便創建的第二個對象不能在主對象之外冒險。

我嘗試使用'mouseup'進行限制,但這不起作用,因爲根據第二個對象上的光標點而不是第二個對象的邊框應用了限制。

希望有人能幫忙。歡呼聲中,

UPDATE:

@Phrogz:我們一直在努力讓凱文的代碼工作,但都在努力得到任何結果。我們有一個附加到onmouseup的函數來找出下面路徑上的對象的相交點。

該函數假設給出交集的結果&給出該函數已被執行的警報。它沒有給予任何迴應,導致我們懷疑函數是否被執行。

下面是主要代碼:

var path=svgDoc.getElementById("path"); 


var str=intersectPathShape(path,DragTarget); 
    alert(str) 

Phrogz,對這個有什麼想法?

回答

2

您將需要使用像this one by Kevin Lindsey這樣的路口庫來檢測路徑何時重疊並阻止它。 (他還提供demos of his code。)

取決於你如何實現你的拖動,你可能還需要在兩個項目的check the bounding box,以確保一個包含在其他的(因爲完全拖着孩子的父母以外會導致他們不交叉,但也不是合法的立場)。

最簡單的代碼是存儲孩子的最後位置,並在檢測到交集時將其返回到該位置。但是,在快速拖動的情況下,這可能會導致孩子停止在實際沒有觸及的地點拖動。爲了獲得更好的用戶體驗,您可能希望嘗試對最後一次已知位置和當前位置之間的中間偏移進行二分搜索,以找到沿該路徑最近的合法點。

+0

謝謝Phrogz。如果一個非常複雜的解決方案(至少對我來說),這是非常有用和信息豐富的。只是修改凱文的代碼將是一個壯舉... – Kayote 2011-04-11 05:04:24

+0

@Kayote我不認爲你需要修改他的代碼,而是將它用作黑盒子,只是測試返回的交點數。 – Phrogz 2011-04-11 12:50:26

+0

哦,真棒,會檢查出來,讓你回到。乾杯Phrogz。 – Kayote 2011-04-11 12:55:23