使圖像在HTML5中輕鬆跟隨鼠標畫布

Question

我正在使用HTLM5畫布，我試圖製作圖像，並且輕鬆地按下鼠標光標。問題是我每次移動鼠標的圖像位置被重置爲原點（我相信）。我想保持實際的位置，並從那裏轉移到鼠標新位置。

這裏是我的代碼：

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; 

我假設你想考慮到德克薩斯州的位置，但是你立即覆蓋它，使其成爲多餘的！至於數學，緩和是正確的，但你並沒有真正考慮一個新的鼠標位置，以及它如何對事物產生影響。

想象一下，您有一條線始終從圖像中心到鼠標位置。當你考慮時間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