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

關於如何阻止其回到中心並使它保持在實際位置的任何想法？

問候，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 ，因此根據等式可以將其視為r0 。 當位置僅僅是終點（即鼠標坐標）時，緩動函數將提供標量值t 。 但是，此位置必須是矢量，因此使用B - A可以通過使用兩個端點（鼠標和圖像位置）來實現。

這是小提琴