Question

在javascript中，有没有办法可以创建一个变量和一个模拟＆＃34;模拟＆＃34;光滑的鼠标运动？即，假设该功能模拟用户从浏览器窗口的左下角开始，然后慢慢地随机移动鼠标......

该函数将返回鼠标在每次调用时移动的下一个位置的x和y值（可能会使用类似setInterval的东西来继续调用它来获取下一个鼠标位置）。假设鼠标永远不会脱离，应将运动限制在屏幕的宽度和高度上。

我不想要的是鼠标在整个地方超快速跳过。我喜欢回归顺利的动作/位置。

Answer 1

A＆＃34;逼真的鼠标移动＆＃34;没有背景，没有任何意义：

每个鼠标用户对此设备都有不同的行为，他们甚至不会根据屏幕上显示的内容做同样的手势。

如果您进行FPS游戏，整个水平屏幕上的移动大多数都在一个小的垂直范围内。
Here is a "drip painting" I made by recording my mouse movements while playing some FPS game.

如果我们采用google home page，我甚至不会使用鼠标。输入已经集中，我只使用我的键盘。

在一些无限滚动的网站上，我的鼠标可以在几十分钟内保持在同一位置，并在某个时刻转到某个链接。

我认为为了实现更逼真的鼠标移动，您必须记录所有用户＆＃39;手势，并责备他们。

此外，一个好的策略可能是获得更有可能吸引用户光标的元素的坐标（如SO＆＃39;问题下的＆＃34;关闭＆＃34;链接）和使动作转向那些元素＆＃39;坐标。

无论如何，我在这里制作了一个使用Math.random()和requestAnimationFrame()的片段，以便让对象平稳移动，有时会暂停，并且速度可变。

＆＃13;

// Canvas is here only to show the output of  function
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var maxX = canvas.width = window.innerWidth;
var maxY = canvas.height = window.innerHeight;

window.onresize = function(){  
  maxX = canvas.width = window.innerWidth;
  maxY = canvas.height = window.innerHeight;
  }
gc.onclick = function(){
  var coords = mouse.getCoords();
  out.innerHTML = 'x : '+coords.x+'<br>y : '+coords.y;
  }

var Mouse = function() {
  var that = {},
    size = 15,
    border = size / 2,
    maxSpeed = 50, // pixels per frame
    maxTimePause = 5000; // ms

  that.draw = function() {
    if (that.paused)
      return;
    that.update();
    // just for the example
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(show.checked){
      ctx.drawImage(that.img, that.x - border, that.y - border, size, size)
      }
    // use requestAnimationFrame for smooth update
    requestAnimationFrame(that.draw);
  }

  that.update = function() {
    // take a random position, in the same direction
    that.x += Math.random() * that.speedX;
    that.y += Math.random() * that.speedY;
    // if we're out of bounds or the interval has passed
    if (that.x <= border || that.x >= maxX - border || that.y <= 0 || that.y >= maxY - border || ++that.i > that.interval)
      that.reset();
  }
  that.reset = function() {
    that.i = 0; // reset the counter
    that.interval = Math.random() * 50; // reset the interval
    that.speedX = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the horizontal direction
    that.speedY = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the vertical direction
    // we're in one of the corner, and random returned farther out of bounds
    if (that.x <= border && that.speedX < 0 || that.x >= maxX - border && that.speedX > 0)
    // change the direction
      that.speedX *= -1;
    if (that.y <= border && that.speedY < 0 || that.y >= maxY - border && that.speedY > 0)
      that.speedY *= -1;
    // check if the interval was complete
    if (that.x > border && that.x < maxX - border && that.y > border && that.y < maxY - border) {
      if (Math.random() > .5) {
        // set a pause and remove it after some time
        that.paused = true;
        setTimeout(function() {
          that.paused = false;
          that.draw();
        }, (Math.random() * maxTimePause));

      }
    }
  }

  that.init = function() {
    that.x = 0;
    that.y = 0;
    that.img = new Image();
    that.img.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABJUlEQVRIic2WXbHEIAyFI6ESKgEJkVIJlYCTSqiESIiESqiEb19gL9Od3f5R5mbmPPHwBTgnIPJfChiAGbCkCQgtG7BpmgAWIALaDDyOI2bGuq40BasqIoKZATgwNAWHEEjHbkBsBhYRVJUYIwBNwVlFaVOwiDDPMylmQ1OwquY7d0CBrglYkuEeidoeOKt61I6Cq0ftKFhqR+0MOKuo2BQsInnndvnOr4JvR+0qWO5G7Q44K0XtOXDf96jqh9z9WXAy1FJ8l0qd+zbtvU7lWs7wIzkuh8SvpqqDi3zGndPQauDkzvdESm8xZvbh4mVZ7k8ud/+aR0C3YPk7mVvgkCZPVrdZV3dHVem6bju1roMPNmbAmq8kG+/ynD7ZwNsAVVz9dL0AhBrZq7F+CSQAAAAASUVORK5CYII=";
    that.reset();
  }
  that.getCoords = function(){
    return {x: that.x, y:that.y};
  }
  that.init()
  return that;
}
var mouse = new Mouse()
mouse.draw();

＆＃13;

html,body {margin: 0}
canvas {position: absolute; top:0; left:0;z-index:-1}
#out{font-size: 0.8em}

＆＃13;

<label for="show">Display cursor</label><input name="show" type="checkbox" id="show" checked="true"/><br>
<button id="gc">get cursor Coords</button>
<p id="out"></p>

＆＃13;

Answer 2

最后我听说浏览器的鼠标位置不能用JavaScript改变，所以问题实际上没有答案＆＃34;原样是＃34;。但是可以锁定鼠标位置。我不确定是否可以实现允许设置位置的自定义光标。这包括隐藏和锁定股票光标。

Answer 3

顺利地按照光标进行操作非常简单。您可以逆转此过程以实现您的需求。这是一个代码片段，它简单地计算光标和每帧的div之间的距离，然后将div的10％移动到光标：

http://jsfiddle.net/hpp0qb0d/

var p = document.getElementById('nextmove')
var lastX,lastY,cursorX,cursorY;

window.addEventListener('mousemove', function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
})
setInterval(function(){
    var newX = p.offsetLeft + (cursorX - lastX)/10
    var newY = p.offsetTop + (cursorY - lastY)/10

    p.style.left = newX+'px'
    p.style.top = newY+'px'

    lastX = p.offsetLeft
    lastY = p.offsetTop
},20)

在javascript中逼真的鼠标移动坐标？

3 个答案: