2012-03-10 2 views
1

мне нужно повернуть стрелку с JQuery поворотом, но я не знаю угол курсора :( я пытаюсь вычислить, но скрипт не работает.Jquery-угол поворот курсора

Я хочу привести, как это http://www.lonhosford.com/content/html5/canvas/rotate_to_mouse.html

<script type="text/javascript"> 
//<![CDATA[ 
    $(document).ready(function(){ 
     function diff(x, y) { 
      var a = (x * Math.PI/180) - Math.PI; 
      var b = (y * Math.PI/180) - Math.PI; 
      return Math.atan2(Math.sin(b - a), Math.cos(b - a)) * (180/Math.PI); 
     } 
     $('body').mousemove(function(e){ 
      var x = e.pageX; 
      var y = e.pageY; 
      var myAngle = diff(x, y); 
      $("#image").rotate(myAngle); 
     });   
    }); 
//]]> 
</script> 
+0

Вы должны иметь центральную точку, вокруг которой вы будете вычислять угол .. что эта точка? –

+0

это точка - изображение в центре экрана (стрелка, подобная этому http://www.lonhosford.com/content/html5/canvas/rotate_to_mouse.html) – user1261242

ответ

1

Если вы посмотрите на исходный код примера вы публикуемую вы найдете

update: function() 
    { 
     // Distance from mouse x and center of canvas. 
     this._dx = mouse.x - this.centerX; 
     // Distance from mouse y and center of canvas. 
     this._dy = mouse.y - this.centerY; 
     // Radians for the canvas rotate method. 
     this._radians = Math.atan2(this._dy,this._dx); 
    } 

Чтобы адаптировать этот код для собственных нужд попробовать

function diff(x, y) { 
    var centerItem = $('imageid'), 
     centerLoc = centeItem.offset(); 
    var dx = x - centerLoc.left + (centerItem.width()/2); 
     dy = y - centerLoc.top + (centerItem.height()/2); 
    return Math.atan2(dy, dx) * (180/Math.PI); 
} 

пример на http://jsfiddle.net/gaby/xWtKc/1/

Смежные вопросы