2013-10-30 70 views
1

我有一個普遍的問題(我知道我應該提出一個具體問題的具體代碼,但在我的情況下,這個問題是更一般的性質)。在處理中的用戶交互

在處理,比方說我做一個橢圓:

ellipse(30, 30, 10, 10); 

現在,有沒有辦法讓這個地方是橢圓在畫布上的像素?原因是有一種創建用戶與鼠標交互的方式(例如)。所以當有人在橢圓上點擊鼠標時,會發生一些事情。

我想將所有東西都變成對象並使用構造函數以某種方式存儲形狀的位置,但這說起來容易做起來難,特別是對於更復雜的形狀。這就是我所感興趣的。計算橢圓的位置是一回事,但更復雜的形狀呢?有沒有圖書館?

回答

3

檢查出geomerative庫。它有一種方法來檢查鼠標是否在任何SVG形狀內。我不記得了我的頭頂部,但它的工作原理有點像你犯了一個形狀:

myShape = RG.loadShape("shape.svg"); 

和點:

RPoint p = new RPoint(mouseX, mouseY); 

和布爾函數包含()會告訴你,如果該點是在形狀內:

myShape.contains(p); 
+0

非常感謝,會檢查出來。所以它只需要矢量或其他形狀? –

+0

查看他們網站上的文檔。你有RMesh,RShape,RPolygon等,我相信大多數人都有一個'contains()'函數。 – luisdaniel

3

最好使用一個數學公式,而不是逐個像素地檢查鼠標位置(它速度更快,代碼更少)。

對於一個完美的圓,你可以使用畢達哥拉斯定理計算歐幾里德距離。假設您的圓圈位於中心位置(circleXcircleY),並具有circleR的半徑(非直徑)的。您可以檢查是否鼠標在這樣的循環:

if(sq(mouseX-circleX)+sq(mouseY-circleY) <= sq(circleR)) { 
    // mouse is over circle 
} else { 
    // mouse is not over circle 
} 

這種方法基本上是想象的直角三角形,其中斜邊(最長邊)從圓到鼠標位置的中心運行。它使用畢達哥拉斯定理來計算斜邊的長度,如果它小於圓的半徑,那麼鼠標就在圓內。 (它包括一個稍微優化,但它是比較平方,以避免做一個平方根,因爲這可能比較慢)。

+0

好的,這很好,所有的一個圓,但更復雜的形狀呢?向量和曲線?我一直在尋找一種可以自動執行此操作的方法,但我還沒有遇到任何問題。 –

+0

相同的原理可以適用於任何你喜歡的二維形狀 - 你只需要找到一個數學表示。複雜的形狀通常可以形成爲幾個較簡單的形狀的組合,或者通過定義一個多邊形。有很多關於實時碰撞檢測的好文本都會有相關的公式。 –

0

我的原始數學答案的另一種選擇也出現在我身上。如果你可以承受兩次繪製所有UI元素的內存和處理能力,那麼你可以通過使用輔助緩衝區來獲得好的結果。

原理涉及具有屏幕外的圖形緩衝區(例如使用PGraphics)。它必須與主顯示屏的尺寸完全相同,並禁用了抗鋸齒功能。將所有交互式UI元素(按鈕等)繪製到此緩衝區中。然而,不要以正常的方式繪製它們,給每個人一個獨特的顏色,它用於填充和描邊(不要添加任何文本或圖像......只是純色)。例如,一個按鈕可能完全是紅色的,而另一個則完全是綠色的。只要每個項目具有唯一的顏色,任何其他RGB值都可以使用。確保背景也有獨特的顏色。

用戶永遠不會看到該緩衝區,所以不要將其繪製到屏幕上(除非您正在調試或某物)。當您想要檢測鼠標結束的項目時,只需在該屏幕外緩衝區中查找鼠標位置即可。獲取該位置的像素顏色,並將其與UI元素進行匹配。

完成所有這些之後,請繼續前進,並將所有內容都繪製到主顯示屏上。

值得注意的是,如果你的用戶界面元素從不(或很少)移動,你可以減少這種方法的處理時間。當出現/消失,動畫或更改大小/位置時,只需重繪二級緩衝區。