Question

我正在使用svg创建一个几何Campass工具，其中有3个btns， 1）用于移动位于中央的整个Campass 2）增加圆的半径 3）用于旋转圆的半径 4）根据第四个btn的位置使用path（svg）画圆，该位置始终在圆圆周上。

所以我有一个功能，

updateCircle(cx,cy,r,angle) in this function it is finding the position of all 4btns and the radius of the circle (which is line in svg) and the radius and center of big circle

有关更多信息，这里c1至c5是圆圈，l1是svg中的线

对于第一个btn，我将鼠标下移，鼠标移动，然后在第一个btn上的鼠标上移的当前光标移动点更新圆的位置。

默认情况下，角度值为90度。

因此，对于第二个btn，当我的半径位于第3和第4象限时，我必须根据鼠标向下移动来增大半径，如果鼠标向上移动，则必须减小半径；在第一象限和第二象限。

所以问题来了：-

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

或者我可以通过在第二个btn上执行任何mousedown和mouse up事件来完成增加和减小半径的操作吗？

第二个问题是：-

我如何创建第三个btn的功能（因为我确定我必须对角度做一些事情，但是有些困惑，例如当半径在第3，第4象限并且鼠标向左移动时增大角度，并且当半径位于第一象限和第二象限时，鼠标正向右减小角度，反之亦然）

任何建议都应受到赞赏和宝贵。

Answer 1

检测鼠标移动方向

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

const lastPoint = {x: null, y: null}
window.addEventListener('mousemove', e => {
  const leftOrRight = (
    e.clientX > lastPoint.x ? 'right'
    : e.clientX < lastPoint.x ? 'left'
    : 'none'
  )
  const upOrDown = (
    e.clientY > lastPoint.y ? 'down'
    : e.clientY < lastPoint.y ? 'up'
    : 'none'
  )

  /* 
    here you can apply the transformations you need to, 
    then update the cursor position tracker for the 
    next iteration
  */

  lastPoint.x = e.clientX
  lastPoint.y = e.clientY
})

旋转

假设您正在使用CSS转换，则可以在javascript中跟踪旋转变量并将其动态地应用于DOM元素的内联CSS。使用与上述相同的方法，您可以在鼠标向上移动时旋转一种方式，而在鼠标向下移动时旋转另一种方式。这是可以实现的方式。

circle.html

<div class="circle" style="transform: rotate(0deg);"><div class="inner"></div></div>

circle.css

.circle {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  position: relative;
}

.circle .inner {
  width: 10px;
  height: 10px;
  background-color: orange;
  border-radius: 50%;
  margin: auto;
}

rotate.js

const rotatingCircle = document.getElementsByClassName('circle')[0]

const lastPoint = {x: null, y: null}
let rotation = 0
window.addEventListener('mousemove', e => {
  rotation += (
    e.clientY > lastPoint.y ? -1
    : e.clientY < lastPoint.y ? 1
    : 0
  )

  rotatingCircle.style = `transform: rotate(${rotation}deg);`

  lastPoint.x = e.clientX
  lastPoint.y = e.clientY
})

在此处查看实时轮播示例：https://codepen.io/OneCent/pen/jOEMpEr

让我知道这是否有帮助或您有任何疑问！

Answer 2

要确定鼠标是向上移动还是向下移动，您只需要跟踪鼠标位置的y坐标即可。我将使用y1（代表以前的位置）和y2（代表新位置）变量来跟踪位置/运动。查找Mouse Event clientY和mousemove事件可以为您提供帮助。

对于第三个按钮，您应该查找“围绕点旋转”和/或“围绕固定点旋转线段”。如果您的代数没问题，那么数学就可以了。

检测鼠标在js / jq

2 个答案: