我有一个 svg 路径,我想知道我的鼠标是否在 svg 路径上,如果是,我想将光标更改为鼠标到指针。
这可以通过在路径上添加鼠标悬停属性轻松完成,并且使用此解决方案识别点(x,y)在 svg 路径内部或外部。
但有一个转折,我在它上面有另一个透明层,因此我不能有这两种解决方案。
现在我正在让顶层不显示并且它工作正常。但正因为如此,我的鼠标指针和我做的动作(例如在鼠标移动时移动某个元素)很慢,
因此,我想知道是否还有其他更好的方法而不使 display 等于 none。
请找到小提琴示例,我想在 mypath 元素上将光标更改为指针,并且还希望 myline 在我将鼠标移到图层上时应该移动,我可以暂时在图层上不显示,但我注意到firefox,线条移动不是那么流畅,
https://jsfiddle.net/shyam_bhiogade/9a7zuou2/6/
<svg width="400" height="400">
<g>
<path id="mypath" d="M10 200 L200 90 L200 200" fill="transparent" stroke="black" stroke-width="5" />
<rect class="interactiveArea" width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);opacity:0.2" />
<line id="myline" x1="20" y1="0" x2="20" y2="400" stroke-width="2" stroke="black" />
</g>
</svg>
我已经使用了https://bl.ocks.org/mbostock/8027637给出的解决方案,它返回 x 和 y 点与路径的距离,如果距离小于 1px 或笔画的宽度,我认为x 和 y 点在路径上。
function closestPoint(pathNode, point) {
var pathLength = pathNode.getTotalLength(),
precision = 8,
best,
bestLength,
bestDistance = Infinity;
// linear scan for coarse approximation
for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
best = scan, bestLength = scanLength, bestDistance = scanDistance;
}
}
// binary search for precise estimate
precision /= 2;
while (precision > 0.5) {
var before,
after,
beforeLength,
afterLength,
beforeDistance,
afterDistance;
if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
best = before, bestLength = beforeLength, bestDistance = beforeDistance;
} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
best = after, bestLength = afterLength, bestDistance = afterDistance;
} else {
precision /= 2;
}
}
best = [best.x, best.y];
best.distance = Math.sqrt(bestDistance);
return best;
function distance2(p) {
var dx = p.x - point[0],
dy = p.y - point[1];
return dx * dx + dy * dy;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句