utilizzando HTML5 Canvas: ruota l'immagine sul punto arbitrario

Question

Ruota il quadrante sopra un'immagine semicircolare (emisfero settentrionale) come sfondo. L'intervallo potrebbe essere compreso tra 0 e 180 gradi. in ingresso al metodo che esegue la trasformazione dell'area di disegno, il quadrante ruoterà e si fermerà sul valore corrispondente. Ecco quello che stavo cercando sulla base di aiuto e di esempio trasmesso da phrogz

Answer 1

In generale, ciò che si vuole fare è:

1. trasformare il contesto al punto sulla tela che l'oggetto deve ruotare attorno .
2. Ruota il contesto.
3. Trasforma il contesto dall'offset negativo all'interno dell'oggetto per il centro di rotazione.
4. Disegna l'oggetto a 0,0.

in codice:

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

Ecco un working example che mostra in azione. (La matematica per la rotazione è stata solo sperimentalmente hackerata per trovare una quantità di oscillazione e offset in radianti che si adattano al quadrante del calibro rapidamente tracciato.)

Come è evidente, è possibile sostituire la chiamata translate al punto 3 sopra con compensa la chiamata drawImage(). Ad esempio:

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

L'uso della traduzione del contesto è consigliato quando si dispone di più oggetti da disegnare nella stessa posizione.