Imposta la rotazione css per puntare un elemento verso un punto

Question

Sto provando a ruotare un div verso un punto usando la funzione di rotazione di css 3 transform.

ho ottenuto fino a questo punto: 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); 
}); 

Ho cercato su google funzione "lookat", e hanno trovato qualcosa come unica matrice lookat.

Answer 1

Prima di tutto, il centro della tua cerchia non viene calcolato correttamente. Il cerchio è largo 120 px e alto, ma "centralo" impostando la parte superiore e quella sinistra su scy - 50, dove dovresti aver usato scy - 60 (metà di 120px è 60px). O ancora meglio, calcola anche la larghezza e la larghezza del mezzo cerchio in modo dinamico e sottrai quella, nel caso in cui cambi idea e la riduca di nuovo.

ho appena fatto in modo statico:

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

In secondo luogo, si vuole calcolare l'angolo gli elementi .box deve ruotare attorno al suo centro, ma si utilizza le sue posizioni superiore e sinistro per farlo. Questo è sbagliato.

Anche in questo caso, dinamica sarebbe meglio, ma facciamolo statico per ora:

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

Allora non sono sicuro di quello che stai facendo con atan2() * 180/Math.PI, dal momento che restituisce atan2 rad e si desidera gradi I Doppia controllato come calcolare tra i due. Si scopre che non è così semplice come pensavi. See this answer.

così ho aggiunto una funzione:

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

e implementato prima di restituire l'angolo:

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

Ora, gradi iniziare dall'alto, cioè se l'angolo è 0 gradi punterà verso l'alto mentre è necessario puntare verso destra a causa del modo in cui i calcoli sono impostati. Quindi hai aggiunto + 90 ai calcoli di rotazione finali.

Questo sarebbe andato bene se il tuo punto è iniziato verso l'alto, ma non è così. Comincia dal basso a sinistra, che è un altro 135 gradi. Aggiungili e ottieni una differenza di 225 gradi. Quindi:

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

E voilà, il vostro script funziona: http://jsfiddle.net/7ae3kxam/42/

edit: funziona anche per il trascinamento ora