Question

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

这是我的代码：

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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

此致 Iniestar

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中使图像轻松跟随鼠标

1 个答案: