0

画像を回転させる次の機能があります

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

ただし、次のように呼び出すと、マウスダウン時に1回だけ実行されます。

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

私の意図は、画像を取得している間、およびユーザーがマウスクリックを離すまで画像を回転させることです。外部ライブラリを使用せずにこれを行う簡単な方法はありますか？

4

3 に答える 3

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);   
});
于 2012-04-13T05:51:34.747 に答える
0

マウスダウン時に setInterval を使用していくつかのコードを繰り返し呼び出し、マウスアップ時にキャンセルする必要があります。

その例はここにあります: http://www.codingforums.com/showthread.php?t=166115

setInterval と setTimeout に関する情報: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

于 2012-04-13T05:49:20.840 に答える
0 
    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  
}

上記のコードには、変数がありisMouseDownます。マウスがダウンしているときは、 に設定されtrueます。それは本当ですが、画像は回転するはずです。でイベントもバインドしていmouseupます。が呼び出されると、isMouseDownに設定されfalseます。したがって、回転を停止します。

マウスがダウンしているときにキャンバスに描画し、再びアップすると停止する必要がある場合は、描画アプリに同じ手法を使用します。それが役に立てば幸い ：）

于 2012-04-13T06:19:05.820 に答える