如何在鼠標關閉的情況下永久執行某個功能，直到鼠標啓動？

Question

我有以下功能時，我把它稱爲一個後鼠標按下它只能執行一次下面的方式進行旋轉圖像

function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){ 

var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2; 
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2); 
var theta = Math.atan2(y,x)*(180/Math.PI);   

var rotate = 'rotate(' + theta + 'deg)'; 
imageSelector.css('-moz-transform', rotate); 
} 

不過。

$('#someImage').on('mousedown', function(event){ 
     rotateImage($(this).parent(), event.pageX,event.pageY, $(this));  
}); 

我的意圖是讓圖像在抓取時旋轉，直到用戶放開鼠標點擊。有沒有簡單的方法來做到這一點，而不使用外部庫？

Answer 1

實施例：

var timer; 
function rotateImageTimer(offsetSelector, xCoordinate, yCoordinate, imageSelector) 
{ 
    timer = setInterval("rotateImage('"+offsetSelector+"', '"+xCoordinate+"', '"+yCoordinate+"', '"+imageSelector+"')", 100); 
} 


function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){ 
    var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2; 
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2); 
    var theta = Math.atan2(y,x)*(180/Math.PI);   

    var rotate = 'rotate(' + theta + 'deg)'; 
    imageSelector.css('-moz-transform', rotate);  
} 


$('#someImage').on('mousedown', function(event){ 
    rotateImageTimer($(this).parent(), event.pageX,event.pageY, $(this)); 
}); 

$('#someImage').on('mouseup', function(event){ 
    clearIneterval(timer); 
}); 

Answer 2

您需要在mousedown時使用setInterval重複調用某些代碼，並在mouseup時取消它。

這方面的一個例子可以在這裏找到：http://www.codingforums.com/showthread.php?t=166115

上的setInterval &的setTimeout一些信息：http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 3

var isMouseDown = false; 

$('#someImage').on('mousedown', function(event){ 
isMouseDown = true; 
     rotateImage($(this).parent(), event.pageX,event.pageY, $(this));  
}); 
$('#someImage').on('mouseup', function(event){ 
isMouseDown = false; 

}); 


function rotateImage(offsetSelector, xCoordinate, yCoordinate, imageSelector){ 
    while(isMouseDown){ 
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2; 
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2); 
    var theta = Math.atan2(y,x)*(180/Math.PI);   

    var rotate = 'rotate(' + theta + 'deg)'; 
    imageSelector.css('-moz-transform', rotate);  
}// end of while 
} 

在上面的代碼中我有variabl isMouseDown 。當鼠標關閉時，其設置爲true。雖然它的真實形象應該旋轉。我也是mouseup的約束性事件。當其呼叫時，isMouseDown設置爲false。因此停止旋轉。

當我需要在鼠標關閉時在畫布上繪製並在再次關閉時停止時，我使用相同的技術來繪製應用程序。 希望它有幫助:)