如何知道svg路径上是否有x或y点 [英] how to know if any x or y point is on svg path

问题描述

我有一个svg路径，我想知道我的鼠标是否在svg路径上，如果是我想将光标更改为鼠标到指针.

i have a svg path and i want to know if my mouse is on svg path or not, if it is i want to change the cursor to mouse to pointer.

通过在路径上添加鼠标悬停属性以及使用

This could have been easily done by adding mouse hover property on path and also with Recognize point(x,y) is inside svg path or outside with this solution.

但是有一个转折，我上面还有另一个透明层，因此我不能拥有这两种解决方案.

but there is a twist, I have another transparent layer over it, because of which I cannot have those two solutions.

现在我正在使顶层不显示任何内容，并且工作正常.但是由于这个原因，我的鼠标指针以及我在鼠标移动时移动某个元素之类的动作很慢，

right now I am making top layer display none and it works fine. but because of this my mouse pointer and the action I do such as moving a certain element on mouse move is slow,

因此，我想找出是否还有其他更好的方法而不使显示等于空.

hence i want to find out if there is any other better way without making display equal to none.

请找到小提琴的例子，当我将鼠标移到图层上时，我想将光标更改为指向mypath元素上的指针，并且还希望myline在移动，我暂时可以在图层上不显示任何内容，但是我在firefox上注意到，线的移动不是那么平滑，

please find the fiddle example, I want to change the cursor to pointer when its on mypath element and also want myline should be moving as i move mouse over the layer, i can do display to none on layer for time being, but i noticed on firefox, line movement is not that smooth,

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点在路径上.

I have used the solution given at https://bl.ocks.org/mbostock/8027637 , it returns the distance of x and y point from the path, if the distance is less than 1px or width of the stroke, I consider that x and y point is on the path.

   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;
  }
}

这篇关于如何知道svg路径上是否有x或y点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！