Xoay đối tượng để đối mặt với con trỏ chuột trên mousemove

Question

Tôi đã có một con trỏ chuột trong trò chơi của tôi mà sẽ làm cho đối tượng của tôi bắn về phía con trỏ chuột của tôi. Tôi muốn đối tượng của tôi luôn xoay vòng để phù hợp với con chuột của tôi. Làm thế nào tôi có thể chuyển đổi X và Y của nơi mà con trỏ là một góc độ để xoay đối tượng của tôi?

Tôi hy vọng fiddle tôi sẽ làm cho mọi việc một chút rõ ràng hơn về những gì tôi có nghĩa là bằng cách xoay máy nghe nhạc (Black block): http://jsfiddle.net/3nEUv/4/

Dưới đây là chức năng MouseMove của tôi bây giờ; Chỉ đảm bảo con trỏ vẫn còn trong nó bounding hộp

function mouseMove(e) { 
    if (cursor) { 
     if (e.rawX && e.rawY) { 
      cursorBoundingBox(e.rawX, e.rawY); 
     } 
    } 
} 

Answer 1

Về cơ bản bạn cần phải tìm ra vector giữa điểm ở trung tâm của hộp của bạn, và điểm của con trỏ chuột, sau đó tính toán góc và chuyển đổi nó đến độ. Sau đó chỉ cần áp dụng các góc thông qua CSS:

var box=$(".box"); 
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; 

var angle = Math.atan2(e.pageX - boxCenter[0], - (e.pageY - boxCenter[1]))*(180/Math.PI);  

box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});  
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'}); 

GÌ

Ok, chúng ta hãy thực hiện việc này ngoài. Đây là những gì chúng ta có:

Các vector AB đi giữa trung tâm của hộp và vị trí chuột. Chúng tôi đã tính toán Θ (theta), là góc giữa trục X và AB. Vì AB tạo một tam giác với các trục X và Y, chúng ta có thể sử dụng hàm Arctan để tính toán nó. Chính xác hơn, chúng tôi sử dụng các chức năng tiện lợi của Arctan2 mà đưa ra một góc dương khi y> 0 và góc tiêu cực khi y < 0.

atan2 trả về độ trong radian, và CSS làm việc với độ, vì vậy chúng tôi chuyển đổi giữa hai người sử dụng 180/Math.PI. (Một radian là thước đo của một góc, khi vẽ một góc trung tâm của một vòng tròn, chặn một vòng cung có chiều dài bằng chiều dài bán kính của vòng tròn. - Lấy từ here)

Một cảnh báo cuối cùng - Vì trong trình duyệt trục Y bị đảo ngược (nghĩa là, bạn càng đi sâu vào trang, giá trị Y càng cao), chúng tôi phải lật trục Y: Chúng tôi đã làm như vậy bằng cách thêm dấu trừ vào từ Y:

- (e.pageY - boxCenter[1])

tôi hy vọng điều này giúp làm sạch một số điều ...

Dưới đây là một là olated jsfiddle example

BTW, Trò chơi của bạn rất khó! :)

Answer 2

Tôi đã tạo tập lệnh xoay cho mọi phần tử html với góc quay đi qua.

Hy vọng nó sẽ giúp

function MouseRotate(e, elt) { 
    var offset = elt.offset(); 
    var center_x = (offset.left) + (elt.width()/2); 
    var center_y = (offset.top) + (elt.height()/2); 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
    var degree = (radians * (180/Math.PI) * -1) + 90; 
    $(elt).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
    $(elt).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
    $(elt).css('-o-transform', 'rotate(' + degree + 'deg)'); 
    $(elt).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
} 

$(document).ready(function() { 
    $('#'+tagVal).mousedown(function(e) { 
    $(document).bind('mousemove', function(e2) { 
     rotateOnMouse(e2,$('#'+tagVal)); 
    }); 
    }); 
    $(document).mouseup(function(e) { 
    $(document).unbind('mousemove'); 
    }); 
});