utilizando HTML5 Canvas: gire la imagen sobre el punto arbitrario

Question

Gire el dial en la parte superior de una imagen semicircular (hemisferio norte) como fondo. El rango podría ser de 0 a 180 grados. en la entrada al método que realiza la transformación de lienzo, el dial giraría y se detendría sobre el valor coincidente. Esto es lo que yo estaba tratando sobre la base de la ayuda y de la muestra transmitida por phrogz

Answer 1

En general, lo que queremos hacer es:

1. transformar el contexto hasta el punto en el lienzo que el objeto debe girar alrededor .
2. Gire el contexto.
3. Transforma el contexto por el desplazamiento negativo dentro del objeto para el centro de rotación.
4. Dibuje el objeto en 0,0.

En código:

ctx.save(); 
ctx.translate(canvasRotationCenterX, canvasRotationCenterY); 
ctx.rotate(rotationAmountInRadians); 
ctx.translate(-objectRotationCenterX, -objectRotationCenterY); 
ctx.drawImage(myImageOrCanvas, 0, 0); 
ctx.restore(); 

Aquí hay una working example mostrando esto en acción. (La matemática de la rotación fue pirateada experimentalmente para encontrar una cantidad de desplazamiento y desplazamiento en radianes que se ajustan al dial de calibrador de trazado rápido.)

Como puede ser evidente, puede sustituir la llamada translate en el paso # 3 anterior con compensa a la llamada drawImage(). Por ejemplo:

ctx.drawImage(myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY); 

Se recomienda utilizar la traducción de contexto cuando tiene que dibujar varios objetos en la misma ubicación.