重疊對象上的HTML畫布事件？

如果我有一個帶圓圈的畫布，點擊它就會改變顏色，我可以在畫布元素上使用單擊事件並處理數學運算（距離公式計算< =半徑）。但是如果我有兩個重疊的圓圈（如廂式車圖），並且假設只有頂部圓圈應該改變顏色，我會在兩個圓圈中間點擊一下？如果在這種情況下應用第一個圓的數學運算，則兩個圓都會改變顏色。重疊對象上的HTML畫布事件？

我將如何處理畫布中的事件，如上例中的重疊對象？希望有一個快速/高效的算法？

來源

2012-08-30 Derek

你可能需要一個工作

使用圖象 - 在鼠標的座標像EaselJS這樣的框架，對於你想要做的事情有更好的API。 Barebones canvas 2d-context在顯示對象/精靈行爲方面沒有提供太多內容。

上面的迴應也提到某種列表來表示圖層。我認爲這個實現不會很困難，只是另一個需要檢查半徑的條件。

來源

2012-08-30 08:59:20 hlfcoding

我認爲這是一個好主意，去一個JavaScript庫，認爲我會嘗試kinetic.js – Derek

畫布不是真的像Flash一樣，或者像一棵DOM樹，因爲事物有排序順序或z索引。它有點像一個平坦的光柵圖像，你必須依靠你的javascript中的其他邏輯來記住你繪製的東西的順序堆棧順序。

如果您需要這種交互方式，我總是會發現最好使用第三方庫（除非它真的只是一個或兩個圓圈沒有做太多的情況）。

對於基於交互式'形狀'的JavaScript圖形，我會獲取Raphael.js或D3，它們實際上比畫布上的更多的SVG工具，所以也許它不適合你，但它們很簡單並且跨瀏覽器。

還有processing.js（處理Java lib的js端口），它感覺有點像flash，可以跟蹤所有的級別和對象。 Theres噸其他噸，但多數民衆贊成在另一個話題。

如果它是超級簡單的選項可能是：

按住合成一個對象或數組內的畫布上所有的形狀/元素也跟蹤它們的z-index /排序順序的座標，從而讓你知道最重要的是什麼。點擊，以確定哪些已被點擊使用合成對方多畫布，並讓DOM
做單擊事件

來源

2012-08-30 08:56:51 Alex

重疊對象上的HTML畫布事件？

回答

相關問題