Javascript 绘制箭头拖动开始一个图元拖动结束另一个图元

关于使用css/javascript绘制箭头（如视频中的黄色箭头）的“拖动开始和结束”有什么想法吗

---

alrdy用谷歌搜索了一下，但我没有找到好的关键词，我总是在图表的两个元素之间找到箭头，从来没有一个“动画”箭头，这个问题没有预先做过什么，但是你可以简单地检查鼠标事件

例如，当您用鼠标单击（Event mousedown）时，可以在指针位置启动箭头；当您拖动鼠标（Event onmousemove）时，可以更改指向新位置的箭头尖端

我只是做了一个小的例子，但我希望你得到一个坏的形象

let down=false；
让我们开始吧；
让箭；
window.onmousedown=（ev）=>{
向下=真；
设x=ev.clientX；
设y=ev.clientY；
initPos={x，y}；
arrow=document.createElement（“img”）；
arrow.src=”https://upload.wikimedia.org/wikipedia/commons/d/d7/Arrow_right.svg";
//arrow.style.height=“30px”；
arrow.style.pointerEvents=“无”；
arrow.style.position=“绝对”；
arrow.style.left=x+“px”；
arrow.style.top=y+“px”；
};
window.onmouseup=（ev）=>{
向下=假；
document.body.innerHTML=“”；
};
window.onmousemove=（ev）=>{
如果（向下）{
设x=ev.clientX；
设y=ev.clientY；
设x2=initPos.x；
设y2=initPos.y；
设θ=Math.atan2（y-y2，x-x2）；
arrow.style.width=dist（x，y，x2，y2）+“px”；
arrow.style.transform=“旋转（“+theta+”rad）”；
document.body.appendChild（箭头）；
}
};
功能区（x1，y1，x2，y2）{
返回数学sqrt（（x2-x1）*（x2-x1）+（y2-y1）*（y2-y1））；
}

文件

没有针对此问题预先制作的内容，但您只需检查鼠标事件即可

例如，当您用鼠标单击（Event mousedown）时，可以在指针位置启动箭头；当您拖动鼠标（Event onmousemove）时，可以更改指向新位置的箭头尖端

我只是做了一个小的例子，但我希望你得到一个坏的形象

let down=false；
让我们开始吧；
让箭；
window.onmousedown=（ev）=>{
向下=真；
设x=ev.clientX；
设y=ev.clientY；
initPos={x，y}；
arrow=document.createElement（“img”）；
arrow.src=”https://upload.wikimedia.org/wikipedia/commons/d/d7/Arrow_right.svg";
//arrow.style.height=“30px”；
arrow.style.pointerEvents=“无”；
arrow.style.position=“绝对”；
arrow.style.left=x+“px”；
arrow.style.top=y+“px”；
};
window.onmouseup=（ev）=>{
向下=假；
document.body.innerHTML=“”；
};
window.onmousemove=（ev）=>{
如果（向下）{
设x=ev.clientX；
设y=ev.clientY；
设x2=initPos.x；
设y2=initPos.y；
设θ=Math.atan2（y-y2，x-x2）；
arrow.style.width=dist（x，y，x2，y2）+“px”；
arrow.style.transform=“旋转（“+theta+”rad）”；
document.body.appendChild（箭头）；
}
};
功能区（x1，y1，x2，y2）{
返回数学sqrt（（x2-x1）*（x2-x1）+（y2-y1）*（y2-y1））；
}

文件