Girando alrededor de un punto arbitrario: HTML5 Canvas

¡Ven a ver el increíble rectángulo que desaparece!Girando alrededor de un punto arbitrario: HTML5 Canvas

Pero en serio tengo un lienzo HTML5 muy simple que simplemente dibuja un rectángulo (usando lineTo en lugar de rect por un motivo).

Mi problema: Estoy intentando girar el rectángulo 90 grados. El rectángulo debe girarse 90 grados, pero en su lugar desaparece.

En mi proyecto webapp obtengo errores de ubicación x, y extra cuando giro mis polígonos complejos en canvas HTML5, así que he creado este sencillo HTML para probar la rotación & para asegurar que gire alrededor de su punto x, y de 100,100 . Pero incluso esto tiene resultados extraños cuando intento rotar una forma.

¿Alguien me puede decir cómo obtener mi rectángulo visible & cómo puedo girar mis polígonos alrededor de un punto específico sin que cambien por completo los valores de x, y?

¿Alguien ha experimentado este problema con HTML5 canvas '& saber soluciones para solucionar esto?

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;"> 

</canvas> 
<script type="text/javascript"> 

    var canvas = document.getElementById("testCanvas"); 
    var dc  = canvas.getContext("2d"); 

    dc.clearRect(0, 0, canvas.width, canvas.height); 

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.rotate(90*Math.PI/180); // rotate 90 degrees 
    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
--> 
</script>

Fuente

2012-01-20 Jake M

Try 'motor de juego visual-js', https://jsfiddle.net/zlatnaspirala/y16s2krh/ en el planetario de 5 minutos. –

Para girar alrededor de un punto, debe hacer 3 pasos.

Primero, traslade el contexto al centro que desea rotar.
Luego haga la rotación real.
A continuación, traduzca el contexto de nuevo.

De esta manera:

var canvas = document.getElementById("testCanvas"); 
var dc  = canvas.getContext("2d"); 
var angle = 0; 
window.setInterval(function(){ 
    angle = (angle + 1) % 360; 
    dc.clearRect(0, 0, canvas.width, canvas.height); 

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.translate(150,200); 
    dc.rotate(angle*Math.PI/180); 
    dc.translate(-150,-200); 

    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
}, 5);

Fuente

2012-01-20 05:07:28 david

Edité la respuesta con un método que no se dibuja en relación con el nuevo centro. – david

¿No tendría sentido cambiar ángulo = ángulo + 1; a ángulo = (ángulo + 1)% 360; Esto ayuda a evitar el inevitable maxint, incluso si ese número es realmente grande. –

Sí, buen punto. fijo. – david

Al girar el lienzo, que gira desde el origen (0, 0), por lo que su rectángulo termina siendo girado fuera de la pantalla.

Ver este ejemplo en el que sólo está girado 45 °: http://jsfiddle.net/wjLSm/

Una forma de solucionar este problema es traducir la tela por su anchura & altura/2: http://jsfiddle.net/wjLSm/1/ (entonces 0,0 es en el medio - BE consciente de esto)

Fuente

2012-01-20 05:00:21

gracias que lo mostró en la pantalla, pero no está girando alrededor del punto x, y de 100,100. El rectángulo después de la rotación tiene una posición x, y de 200,600. ¿Hay alguna manera de hacerlo girar alrededor de un punto específico (100,100)? –

Girando alrededor de un punto arbitrario: HTML5 Canvas

Respuesta

Cuestiones relacionadas