在javascript svg中的点之间绘制路径

编程问答 2022-09-17

问题描述

我正在尝试从javascript中的svg元素中的指定x，y坐标绘制直角路径。请注意，目标相对于原点（上，左，下，右）的位置如何。

我想使用<path />元素并动态计算其路径

请参见所附的图片和代码示例：

      const { x: baseX,y: baseY } = wrapperRef.current.getBoundingClientRect();
      const { x,y } = current.getBoundingClientRect();
      const { x: x2,y: y2 } = toCurrent.getBoundingClientRect();
      const xdist = (x1,x2) => Math.sqrt(Math.pow((x1 - x2),2));
      const ydist = (y1,y2) => Math.sqrt(Math.pow((y1 - y2),2));
      const originThreshold = -60;
      const targetThreshold = x2 > x ? xdist(x,x2) : ~xdist(x,x2);

      return (
        <>
          <path key={`${diagramId}-${toId}`} d={`m ${x} ${y} h ${originThreshold} v ${ydist(y,y2)} h ${targetThreshold} m 0 0`} fill='none' stroke='white' strokeWidth='2' />
        </>
      )

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

algorithmcoordinatesjavascriptplot