Javascript 检测鼠标在js/jq中向上、向左、向右或向下移动

我正在使用svg创建一个几何campass工具，其中有3个BTN， 1） 用于移动位于中心的整个露营车 2） 用于增加圆的半径 3） 用于旋转圆的半径 4） 用于根据始终位于圆周长上的第四个btn的位置，使用路径（svg）绘制圆

所以我有一个函数

updateCircle（cx、cy、r、角度）

在此函数中，它将查找所有4BTN的位置、圆的半径（在svg中为直线）以及大圆的半径和圆心

欲了解更多信息， 这里c1到c5是圆，l1是svg中的一条线

对于第一个btn，我使用鼠标向下、鼠标移动和第一个btn上的鼠标上的当前光标移动点更新圆圈位置

默认情况下，“角度”的值为90度

所以对于第二个btn，我必须在鼠标向下移动的基础上增加半径，如果鼠标在第三和第四象限向上移动，则减小半径，当半径在第一和第二象限时，则相反

所以问题来了：-

我如何能够检测鼠标向上和向下移动？

或者是否有任何方法可以通过在第二个btn上执行任何鼠标向下和鼠标向上事件来增加和减少半径

第二个问题是：-

我如何创建第三个btn的功能（因为我确信我必须对角度做一些事情，但有点困惑，比如当半径在第三、第四象限时，鼠标向左移动，角度增大，当鼠标向右移动，角度减小，反之亦然，当半径在第一和第二象限时）

---

任何建议都值得赞赏和重视。

要确定鼠标是向上还是向下移动，只需跟踪鼠标位置的y坐标即可。我会使用y1（表示以前的位置）和y2（表示新位置）变量来跟踪位置/移动。查找鼠标事件客户端和鼠标移动事件以帮助您

---

对于第三个按钮，您应该查找“围绕一个点旋转”和/或“围绕一个固定点旋转线段”。如果代数正确，则数学是可行的。

要确定鼠标是向上还是向下移动，您只需跟踪鼠标位置的y坐标。我会使用y1（表示以前的位置）和y2（表示新位置）变量来跟踪位置/移动。查找鼠标事件客户端和鼠标移动事件以帮助您

---

对于第三个按钮，您应该查找“围绕一个点旋转”和/或“围绕一个固定点旋转线段”。如果代数正确，则数学是可行的。

检测鼠标移动方向

通过保留对上一个鼠标位置的引用，将其与新鼠标位置进行比较，然后使用当前鼠标位置更新上一个鼠标位置，以便下一次迭代，您可以轻松确定鼠标是向上还是向下移动。下面是一个如何在JavaScript中实现的示例：

const lastPoint={x:null，y:null}
window.addEventListener（'mousemove'，e=>{
常数leftOrRight=(
e、 clientX>lastPoint.x？“对”
：e.clientXlastPoint.y.“向下”
：e.clientY

旋转

假设您正在使用CSS转换，您可以跟踪javascript中的旋转变量，并将其动态应用于DOM元素的内联CSS。使用与上面相同的方法，可以在鼠标向上移动时向一个方向旋转，在鼠标向下移动时向另一个方向旋转。以下是如何做到这一点

circle.html

circle.css

.circle{
宽度：100px；
高度：100px；
背景颜色：绿色；
边界半径：50%；
位置：相对位置；
}
.圈内{
宽度：10px；
高度：10px；
背景颜色：橙色；
边界半径：50%；
保证金：自动；
}

rotate.js

const rotatingCircle=document.getElementsByClassName（'circle'）[0]
常量lastPoint={x:null，y:null}
让旋转=0
window.addEventListener（'mousemove'，e=>{
旋转+=(
e、 clientY>lastPoint.y？-1
：e.clientY

请参见此处的实时旋转示例：

---

让我知道这是否有帮助，或者如果你有任何问题

检测鼠标移动方向

通过保留对上一个鼠标位置的引用，将其与新鼠标位置进行比较，然后使用当前鼠标位置更新上一个鼠标位置，以便下一次迭代，您可以轻松确定鼠标是向上还是向下移动。下面是一个如何在JavaScript中实现的示例：

const lastPoint={x:null，y:null}
window.addEventListener（'mousemove'，e=>{
常数leftOrRight=(
e、 clientX>lastPoint.x？“对”
：e.clientXlastPoint.y.“向下”
：e.clientY

旋转

假设您正在使用CSS转换，您可以跟踪javascript中的旋转变量并动态应用它