绘制箭头拖动开始一个元素拖动结束另一个元素
绘制箭头拖动开始一个元素拖动结束另一个元素
提问于 2020-10-02 20:51:30
关于使用css/javascript绘制带有“拖动开始和结束”的箭头的任何想法，如视频中的黄色箭头
https://youtu.be/4QaEE8noGdE?t=32
我用谷歌搜索了一下，但我找不到好的关键字，我总是在图表的两个元素之间找到箭头，而不是“动画”箭头
Stack Overflow用户
回答已采纳
发布于 2020-10-02 21:58:46
没有为这个问题预先准备的东西，但你可以简单地检查你的鼠标事件。
例如，当您用鼠标单击(事件mousedown)时，您可以在指针位置启动箭头，而当您拖动鼠标(Event onmousemove)时，您可以更改箭头的尖端，指向新的位置。
我刚刚做了一个图像不好的小例子，但我希望你能得到
let down = false;
let initPos;
let arrow;
window.onmousedown = (ev)=>{
down = true;
let x = ev.clientX;
let 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 = "none";
arrow.style.position = "absolute";
arrow.style.left = x+"px";
arrow.style.top = y+"px";
};
window.onmouseup = (ev)=>{
down = false;
document.body.innerHTML = "";
};
window.onmousemove = (ev)=>{
if(down){
let x = ev.clientX;
let y = ev.clientY;
let x2 = initPos.x;
let y2 = initPos.y;
let theta = Math.atan2(y-y2,x-x2);
arrow.style.width = dist(x,y,x2,y2)+"px";
arrow.style.transform = "rotate(" + theta + "rad)";
document.body.appendChild(arrow);
}
};
function dist(x1,y1,x2,y2){
return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64171880
复制相关文章
相似问题
腾讯云开发者
