獲取線路座標在Javascript

我使用Canvas（HTML 5）畫線，因爲線/形狀並不像在畫布對象存儲，我不能附加獨特的事件給它（例如onmouseclick）獲取線路座標在Javascript

祝要將onmouseover事件附加到某行，是否可以通過使用Javascript在Canvas中瞭解鼠標是否位於特定行上（使用其2 X和2 Y座標）。這會工作，爲不同的線路寬度（例如：2,5像素）

要作爲整個項目是建立在畫布

請指點避免使用SVG

2011-07-13 Akash

你有沒有考慮過像[fabric.js]（http://kangax.github.com/fabric.js/demos/kitchensink/）這樣的canvas抽象庫？這會使觀察點擊或鼠標懸停等事件變得微不足道。 – kangax

您需要使用數學公式計算線的面積以及某個點是否與其相交。

下面是一個基本的例子：

2011-07-13 08:46:42

嗨，剛剛閱讀你提到的文章（點矩形公式），這似乎是一個矩形，是否有一些LINE的公式 – Akash

因爲你希望它適用於不同寬度的線條，你可能應該使用rect公式。比1px厚的一條線基本上是一個填充矩形:) –

有一個功能isPointInPath(x,y)。如果某個點位於當前路徑上，它將返回true。你將不得不爲你想要檢查的每一行打電話，最好的方法是在你畫的同時。

2011-07-13 09:13:19 Rickard

最好的方法是使用一些畫布框架。看看「LibCanvas :: Creating Lines」（不要忘記在畫布上的dblClick）

2011-07-29 11:12:02 Shock

回答