javascript - 在 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