Move the div according to the value of degrees in Javascript

Asked

Viewed 112 times

3

Simply move the div towards the degress value.

I’ve done a lot of manners, but I can’t. A code I’m trying: http://codepen.io/duduindo/pen/eNEobG

"Does anyone have any light/solution for this problem?!"

Signaling/Example below: Sinalização

Thank you!

javascript css html5 mathematics
  • 1

    Interesting question! Please explain what you mean "towards the degress value"?

  • Oops, thanks for the question. Come on! It’s a kite game on Html5 mobile. If the div is at 45deg, then move 50px toward the 45deg angle. If the div is at 300deg, then move 50px toward at 300deg.

  • :/ I’m sorry, but I still don’t understand... how it is in your codepen the div when clicked goes to the right corner and doesn’t do any rotation. What was I supposed to do? I don’t know the game of "kite"... I’ll googlar to see if I can find.

  • Opa, then, I changed the Code for the best understanding. deg in the js and switches to an angle and a refresh, after refresh click on the red div.

  • @Eduardofp But with this change the problem seems solved, no?

  • @bfavaretto Sort of. This weekend I will try to solve, case with you, I will post the code here. On the contrary, I return the question here in the comments. :D

Show 1 more comment

1 answer

1


got!

Thanks for all your help! D

More details and running: http://codepen.io/duduindo/pen/eNEobG

Only the Javascript code:


function SomenteNumero(v)
{      
  return v.replace(/\D/g,"");  
}

/*
A função vai pegar o valor do rotateZ, mas somente o número.
Exemplo:
    DE: <div id="ID" style="-webkit-transform: rotateZ(320deg);" ></div>
    PARA: 320

Entendeu?! :D
*/
var get_rotate = function()
{
    var z = SomenteNumero( document.getElementById(" ID ").style.WebkitTransform );
    return z;
}

/*
A mágica é nesta função milagrosa! rsrs'

window.body_largura = Largura do body em px.
window.body_altura =  Altura do body em px.
*/
var efeito_ir = function( velocidade )
{   
    var deg = get_rotate(); //Pega o valor do rotateZ atual
    var plus = velocidade; //$velocidade: quanto maior é o valor, maior é a distância. Recomendado é de 10 á 100

    var rotation = deg - 270;
    var dist = Math.sqrt( (window.body_largura * plus)^2 + (window.body_altura * plus)^2);
    var degtorad = Math.PI/180;

    var x = Math.cos(degtorad * (rotation)) * dist;
    var y = Math.sin(degtorad * (rotation)) * dist;

    x = Math.round( document.getElementById(" ID ").offsetLeft + (-x) );
    y = Math.round( document.getElementById(" ID ").offsetTop + (-y) );

    console.log("X: " + (x) );
    console.log("Y: " + (y) );

    document.getElementById(" ID ").style.top = y + "px";
    document.getElementById(" ID ").style.left = x + "px";  

}

Browser other questions tagged javascript css html5 mathematics

You are not signed in. Login or sign up in order to post.