如何解决在javascript svg中的点之间绘制路径
我正在尝试从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' />
</>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。