web-dev-qa-db-fra.com

à l'aide de HTML5 Canvas - faire pivoter l'image autour d'un point arbitraire

Faites pivoter le cadran au-dessus d'une image semi-circulaire (hémisphère Nord) comme arrière-plan. la plage peut être comprise entre 0 et 180 degrés. lors de l'entrée dans la méthode qui effectue la transformation du canevas, le cadran pivotait et s'arrêtait sur la valeur correspondante. Voici ce que j'essayais basé sur l'aide et l'échantillon transmis par phrogz

html5canvashtml5-animation
35
Abhijit

En général, ce que vous voulez faire, c'est:

  1. Transformez le contexte au point du canevas autour duquel l'objet doit pivoter.
  2. Faites pivoter le contexte.
  3. Transformez le contexte par le décalage négatif dans l'objet pour le centre de rotation.
  4. Dessinez l'objet à 0,0.

Dans du code:

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

Voici un exemple de travail montrant cela en action. (Le calcul de la rotation a été piraté expérimentalement pour trouver une valeur d'oscillation et un décalage en radians qui correspondent au cadran de jauge rapidement esquissé.)

Comme cela peut être évident, vous pouvez remplacer l'appel translate à l'étape 3 ci-dessus par des décalages à l'appel drawImage(). Par exemple:

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

L'utilisation de la traduction de contexte est recommandée lorsque vous avez plusieurs objets à dessiner au même emplacement.

89
Phrogz