如何檢測在JavaScript中點擊了哪一段svg路徑？

例如SVG路徑元件：如何檢測在JavaScript中點擊了哪一段svg路徑？

<path id="path1" 
d="M 160 180 C 60 140 230 20 200 170 C 290 120 270 300 200 240 C 160 390 50 240 233 196" 
stroke="#009900" stroke-width="4" fill="none"/>

它有4個SVG段（在人眼3個曲線段）：

M 160 180 
    C 60 140 230 20 200 170 
    C 290 120 270 300 200 240 
    C 160 390 50 240 233 196

當點擊的路徑上時，得到x和鼠標的y位置，那麼如何檢測哪個曲線段被點擊？

function isInWhichSegment(pathElement,x,y){ 
     //var segs = pathElement.pathSegList; //all segments 
     // 
     //return the index of which segment is clicked 
     // 
    }

來源

2016-01-17 cuixiping

您似乎已經拒絕呈現每個段作爲單獨的對象的明顯的解決方案。你能解釋爲什麼嗎？ –

@squeamishossifrage該解決方案需要將單個路徑拆分爲多個路徑元素，並在處理DOM節點時帶來更多問題。我不希望創造新的元素。 – cuixiping

有用於SVGPathElements，你可以用一些方法。不太直接，但你可以得到你的路徑的總長度，然後檢查每個點的長度座標與getPointAtLength並比較它與點擊的座標。一旦你確定點擊的長度是多少，你可以得到getPathSegAtLength。像例如：

var pathElement = document.getElementById('path1') 
 
var len = pathElement.getTotalLength(); 
 

 
pathElement.onclick = function(e) { 
 
    console.log('The index of the clicked segment is', isInWhichSegment(pathElement, e.offsetX, e.offsetY)) 
 
} 
 

 
function isInWhichSegment(pathElement, x, y) { 
 
    var seg; 
 
    // You get get the coordinates at the length of the path, so you 
 
    // check at all length point to see if it matches 
 
    // the coordinates of the click 
 
    for (var i = 0; i < len; i++) { 
 
    var pt = pathElement.getPointAtLength(i); 
 
    // you need to take into account the stroke width, hence the +- 2 
 
    if ((pt.x < (x + 2) && pt.x > (x - 2)) && (pt.y > (y - 2) && pt.y < (y + 2))) { 
 
     seg = pathElement.getPathSegAtLength(i); 
 
     break; 
 
    } 
 
    } 
 
    return seg; 
 
}

<svg> 
 
    <path id="path1" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#009900" stroke-width="4" fill="none" /> 
 
</svg>

來源

2016-01-17 21:05:47

這是一個解決方案，但效率低下。有沒有一個數學和高效的解決方案？ – cuixiping

如何檢測在JavaScript中點擊了哪一段svg路徑？

回答

相關問題