Css-Rotation einstellen, um ein Element auf einen Punkt zu richten

Question

Ich versuche ein div zu einem Punkt zu drehen, indem ich css 3 transform rotate function verwende.

habe ich bis zu diesem Punkt: jsfiddle link

$(document).ready(function(){ 
    var scw,sch,scx,scy; 
    calcCenter(); 
    $(window).resize(function() {   
     calcCenter(); 
    }); 
    function calcCenter(){ 
     sch = $(window).height(); 
     scw = $(window).width(); 
     scx = scw/2; 
     scy = sch/2; 
     $(".circle").remove(); 
     var circle = $("<span></span>").addClass('circle').text('.'); 
     circle.css('top',scy-50+"px"); 
     circle.css('left',scx-50+"px"); 
    $(document.body).append(circle); 
    } 
    function calcAngle(p1,p2){ 

     var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180/Math.PI; 
     return angle; 
    } 



    $(document).click(function(e){ 
     var box = $("<span></span>").addClass('box'); 
     var x = e.pageX,y=e.pageY; 
     box.css('top',y+"px"); 
     box.css('left',x+"px"); 

     $(document.body).append(box); 
     var angle = calcAngle({x:x,y:y},{x:scx,y:scy}); 

     box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)');   

     box.draggable({ 
       drag: function(e) { 
         var box = $(this); 
         var x = e.pageX,y=e.pageY; 
         box.css('top',y+"px"); 
         box.css('left',x+"px"); 
         var angle = calcAngle({x:x,y:y},{x:scx,y:scy}); 

         box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)'); 


         } 
         }); 
    }); 

    var sunAngle = 1; 
    setInterval(function(){ 
     var sun = $("span.circle")[0]; 
     $(sun).css('-webkit-transform','rotate('+sunAngle+'deg)'); 
     sunAngle = (sunAngle+1) %360;   
    },100); 
}); 

Ich googeln "lookat" -Funktion, und fand nur so etwas wie lookat Matrix.

Answer 1

Zunächst wird der Mittelpunkt Ihres Kreises nicht korrekt berechnet. Ihr Kreis ist 120px breit und hoch, aber Sie zentrieren ihn, indem Sie ihn oben und links auf scy - 50 setzen, wo Sie scy - 60 hätten verwenden sollen (die Hälfte von 120px ist 60px). Oder noch besser, berechnen Sie auch Halbkreisbreite und -höhe dynamisch und subtrahieren Sie das, falls Sie Ihre Meinung ändern und es wieder zu einer anderen Größe machen. statisch

Ich habe es gerade:

circle.css('top',scy-60+"px"); 
circle.css('left',scx-60+"px"); 

Zweitens wollen Sie den Winkel berechnen die .box Elemente um ihren Mittelpunkt zu drehen braucht, aber Sie verwenden seine oberen und linken Positionen zu tun. Das ist falsch.

Auch dynamische wäre besser, aber wir es jetzt statisch tun:

var angle = calcAngle({x:x + 32,y:y + 32},{x:scx,y:scy}); 

Dann bin ich nicht sicher, was Sie mit atan2() * 180/Math.PI, da atan2 kehrt rads tun, und Sie wollen Grad I verdoppeln überprüft, wie man zwischen den beiden berechnet. Es ist nicht so einfach, wie Sie dachten. See this answer.

So habe ich eine Funktion:

function radToDegree(rad) { 
    return (rad > 0 ? rad : (2*Math.PI + rad)) * 360/(2*Math.PI) 
} 

Und setzte es vor den Winkel Rückkehr:

function calcAngle(p1,p2){  
    var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x); 
    return radToDegree(angle); 
} 

Nun Grad von oben beginnen, was bedeutet, wenn der Winkel 0 Grad ist, wird es zeigen nach oben, während Sie nach rechts zeigen müssen, da Ihre Berechnungen eingerichtet sind. Also fügten Sie + 90 zu Ihren endgültigen Rotationsberechnungen hinzu.

Das wäre in Ordnung gewesen, wenn Ihr Punkt aufwärts begann, aber es nicht tut. Es beginnt von unten links, das sind weitere 135 Grad. Fügen Sie diese hinzu, und Sie erhalten einen 225-Grad-Unterschied. Also:

box.css('-webkit-transform','rotate('+(angle+225)+'deg)'); 

Und voila, Ihr Skript funktioniert: http://jsfiddle.net/7ae3kxam/42/

edit: funktioniert auch für das Ziehen jetzt