在 HTML5 Canvas 中让图像轻松跟随鼠标

Question

我在 HTLM5 Canvas 中工作，我试图让图像轻松地跟随鼠标光标。问题是每次我移动鼠标时，图像位置都会重置为原点（我相信）。我想保持实际位置并从那里移动到鼠标新位置。

这是我的代码：

var AN = AN || {};

pic = new Image();

AN.initialize = function() {
  //listen to mouse behavior and read every time he moves
  window.addEventListener("mousemove", AN.moveMouse, false);
  //load canvas
  cv = $('#canvas')[0];
  canvas = cv.getContext('2d');
  //load image
  pic.src = "http://fc01.deviantart.net/fs71/f/2014/349/b/e/i_hate_you__i_love_you__zoro_x_reader__by_riseagainstevil-d88ovwj.png";
};


AN.moveMouse = function(e) {

  //get mouse position
  var xPos = e.clientX;
  var yPos = e.clientY;

  var position = getPosition(pic);

  var x = xPos - pic.width / 2; //final position
  var y = yPos - pic.height / 2; //final position
  var t = 0; //0-1, this is what you change in animation loop
  var tx = position.x; //actual position of element for x
  var ty = position.y; //actual position of element for y

  function myLoop() {

    canvas.clearRect(0, 0, 600, 600);

    tx = EasingFunctions.easeInOutQuad(t) * x;
    ty = EasingFunctions.easeInOutQuad(t) * y;

    //if you need Y then do the same for that (ty)

    // set element by tx
    canvas.drawImage(pic, tx, ty, pic.width, pic.height);
    position = getPosition(pic);

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
      //setTimeout(myLoop, 16); //option to above
    }
  }
  myLoop();
};

EasingFunctions = {
  linear: function(t) {
    return t;
  },
  easeInQuad: function(t) {
    return t * t;
  },
  easeOutQuad: function(t) {
    return t * (2 - t);
  },
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  },
  easeInCubic: function(t) {
    return t * t * t;
  },
  easeOutCubic: function(t) {
    return (--t) * t * t + 1;
  },
  easeInOutCubic: function(t) {
    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  },
  easeInQuart: function(t) {
    return t * t * t * t;
  },
  easeOutQuart: function(t) {
    return 1 - (--t) * t * t * t;
  },
  easeInOutQuart: function(t) {
    return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
  },
  easeInQuint: function(t) {
    return t * t * t * t * t;
  },
  easeOutQuint: function(t) {
    return 1 + (--t) * t * t * t * t;
  },
  easeInOutQuint: function(t) {
    return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
  }
}

function getPosition(element) {
  var xPosition = 0;
  var yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

$(document).ready(function() {
  //initialize funtion
  AN.initialize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<section id="main">
  <canvas id="canvas" width="600px" height="600px">Upgrade to modern browser in order to see this painting ;)</canvas>
</section>

关于如何阻止它回到中心并使其保持在实际位置有什么想法吗？

此致，伊涅斯塔

Answer 1

好吧，我把你的代码弄乱了很多，所以我很抱歉。

从本质上讲，它归结为两件事。您没有正确跟踪图像的位置并且应用了错误的数学。

我在您的代码中立即注意到了这一点：

var tx = position.x; //actual position of element for x
var ty = position.y; //actual position of element for y

在主循环中紧随其后：

tx = EasingFunctions.easeInOutQuad(t) * x;
ty = EasingFunctions.easeInOutQuad(t) * y;

我假设您正在尝试考虑 tx 的位置，但您立即覆盖了它，使其变得多余！至于数学，缓动是正确的，但您并没有真正考虑新的鼠标位置及其对事物的影响。

假设从图像中心一直到鼠标位置有一条线运行。当您考虑时间 t 时，您会得到矢量线方程：r = r0 + tv。这个等式简单地表明，要获得点 r，您需要提供一个点 r0、方向向量 v 和一些标量 t.

我修改了你的代码来做到这一点，

x += EasingFunctions.easeInOutQuad(t) * (position.x - x);
y += EasingFunctions.easeInOutQuad(t) * (position.y - y);

x 和 y 是指图像的当前位置。您始终需要修改它，以便您的图像在考虑到其最后位置的情况下实际上正确地四处移动。由于它是自加的，所以你可以把它看作是 r0 就等式而言。您的缓动函数提供标量值 t 而位置只是最终点（即您的鼠标坐标）。然而，这个位置需要是一个矢量，所以通过使用 B - A 我们可以通过使用两个端点 - 鼠标和图像位置来实现。

这是fiddle

在 HTML5 Canvas 中让图像轻松跟随鼠标

Make image follow mouse with ease in HTML5 Canvas

javascript

canvas