爲什麼點擊座標不是我所期望的？

爲什麼當我點擊Raphael路徑元素的開頭或結尾時，座標不是我所期望的？見示例（http://jsfiddle.net/gharabed/prh2J/1/）爲什麼點擊座標不是我所期望的？

在example中，我有一條從（10,10）到（100,100）的路徑。如果我點擊100,100,100,100附近的路徑，我會得到類似（107,108）的點擊事件座標。我不能超過距離線的末端4或5個像素。事實上，它看起來像我只有2（可能最多3）像素。看起來座標有點偏離。我在這裏沒有考慮過什麼嗎？

function sendAlert(e) { 
    alert("Clicked at: " + e.x + "," + e.y + " I would expect it to be near the coordinates in the path defined (10,10) or (100,100)"); 
} 

var paper = Raphael(document.getElementById('myid'),200,200); 
var line = paper.path('M10,10L100,100'); 
line.attr({"stroke":"red","stroke-width":4}); 
line.click(sendAlert); 
alert("Click as close as you can to the end of either end of the line segment.")

來源

2014-03-29 GregH

you'v得到關於文件的座標，而不是關於svg -element。在身體的例子有8px的邊緣 - 它給出了區別。只需使用svg元素的位置來修正座標 –

我同意瓦西爾說過的話。我已經做了一個小實用功能，它會給你確切的座標。只需將mousedown事件傳遞給此函數。（在sendalert函數中調用此函數）

（我正在使用javascript）。

var mainsvg = document.getElementsByTagName('svg')[0]; 

    function getSvgCordinates(event) { 
       var m = mainsvg.getScreenCTM(); 
       var p = mainsvg.createSVGPoint(); 
       var x, y; 

       x = event.pageX; 
       y = event.pageY; 

       p.x = x; 
       p.y = y; 
       p = p.matrixTransform(m.inverse()); 

       x = p.x; 
       y = p.y; 

       x = parseFloat(x.toFixed(3)); 
       y = parseFloat(y.toFixed(3)); 

       return {x: x, y: y}; 
      }

來源

2014-03-30 02:15:04 RashFlash

爲什麼點擊座標不是我所期望的？

回答

相關問題