javascript - 移动到 SVG 路径 (d3.js) 中的鼠标单击

Question

我需要创建一个圆并将其移动到鼠标按下事件时 SVG 路径中最近的点

here is the jsfiddle

代码:

        var points = [[180,300],[234,335],[288,310],[350,290],[405,300],[430,305],[475,310],[513,300],[550,280]];

        var width = 1000, height = 600;
        var line = d3.svg.line().interpolate("cardinal");
        var svg = d3.select("#Con").append("svg").attr("width", width).attr("height", height);
        var path = svg.append("path").datum(points).attr("d", line);
        var line = svg.append("line");
        var circle = svg.append("   circle").attr("cx", -10).attr("cy", -10).attr("r", 3.5);
        svg.append("rect").attr("width", width).attr("height", height).on("mousedown", mouseclick);
        function mouseclick() {
            var m = d3.mouse(this),p = closestPoint(path.node(), m);
            circle.attr("cx", p[0]).attr("cy", p[1]);
        }
        function closestPoint(pathNode, point) {
            var pathLength = pathNode.getTotalLength(),precision = 8,best,bestLength,bestDistance = Infinity;
            for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
                if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
                    best = scan, bestLength = scanLength, bestDistance = scanDistance;
                }
            }
            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 空间中单击时，我需要将圆移动到路径中最近的点

在我的代码中，圆圈在没有动画的情况下移动，我需要为其设置动画，以便它在路径上从一个点移动到另一个点

无论移动距离大还是小，我都需要它始终以一种速度移动

像这样:

https://a.top4top.net/p_11885szd41.gif

Answer 1

我没有使用你的代码，但我希望你能明白。

我没有使用圆圈，而是使用轨道:

<use id="theUse" xlink:href="#track"

该轨道的 lines-dasharray 为 ".1 398.80" 这意味着短划线 .1(非常非常小)，并且与轨道一样长的398.80间隙。 lines-width 为 7，lines-linecap= "round"，这会将破折号转换为圆形。我正在使用 Stroke-dashoffset 更改破折号(圆圈)的位置，并且为了对更​​改进行动画处理，我正在使用 transition:Stroke-dashoffset 1s; CSS。

希望对您有所帮助。

let m;
let L = track.getTotalLength();
let _start = {x:180,y:30}
let _end = {x:550,y:280}
let l = dist(_start, _end);
theUse.setAttributeNS(null,"stroke-dashoffset",L);

svg.addEventListener("click",(e)=>{
  m = oMousePosSVG(e)
  
  let pos = m.x - _start.x;
  let theDistance = map(pos,_start.x,_end.x,0,L)
  let s_dof = constrain(L-theDistance, .5, L-.5)
  
  theUse.setAttributeNS(null,"stroke-dashoffset",s_dof)  
})

function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

function dist(p1, p2) {
  let dx = p2.x - p1.x;
  let dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function constrain(n, low, high) {
  return Math.max(Math.min(n, high), low);
};

svg {
  border: 1px solid;
}
path {
  fill: none;
}

#theUse {
 
  transition: stroke-dashoffset 1s;
  
}

<svg id="svg" viewBox="150 250 450 100">
  <defs>
<path id="track" d="M180,300Q223.2,334,234,335C250.2,336.5,270.6,316.75,288,310S332.45,291.5,350,290S393,297.75,405,300S419.5,303.5,430,305S462.55,310.75,475,310S501.75,304.5,513,300Q520.5,297,550,280"></path>
  </defs> 
  <use  xlink:href="#track" stroke="black" />
  <use id="theUse" xlink:href="#track" stroke-width="7" stroke-dasharray = ".1 398.80" stroke="red" stroke-linecap= "round" />
  
 
</svg>