Comment créer une fonction générique pour tourner avec du canevas JavaScript?

Question

Je travaille sur la construction de certains composants JavaScript pour gérer le dessin de toile générique, et j'ai du mal à faire fonctionner les rotations. J'ai une fonction similaire à celle-ci (celle-ci étant simplifiée un peu).

function drawThing (ctx, posX, posY, sizeX, sizeY, rotation, drawFn) { 
    // `ctx` is the 2d canvas context 
    ctx.save(); 
    ctx.beginPath(); // Not sure if this is needed 
    ctx.translate(posX, posY); // What do I use here? 
    ctx.rotate(rotation); // rotation is in radians 
    drawFn(ctx, posX, posY, sizeX, sizeY); 
    ctx.restore(); 
} 
function exampleDrawFn (ctx, posX, posY, sizeX, sizeY) { 
    ctx.fillStyle = "#333"; 
    ctx.fillRect((posX - sizeX/2), (posY - sizeY/2), sizeX, sizeY); 
} 

Je ne sais pas quoi utiliser pour les paramètres de traduction; ou peut-être qu'il y a une erreur différente quelque part.

(Bien qu'il soit un peu compliqué, voici le code que je travaille actuellement sur: https://github.com/rocket-boots/rocket-boots/blob/master/scripts/rocketboots/Stage.js#L423)

Answer 1

j'ai pu résoudre ce problème en inversant la traduction après la rotation. Curieux s'il y a de la place pour améliorer cette méthode, mais je crois que cela devrait fonctionner.

Answer 2

Le moyen le plus rapide pour dessiner une image.

function drawImage (image, x, y, sizeX, sizeY, rot) { 
    var xdx = Math.cos(rot); // direction of x axis 
    var xdy = Math.sin(rot); 
    ctx.setTransform(
     xdx, xdy, // set the direction of the x axis 
     -xdy, xdx, // set the direction of the y axis (at 90 deg clockwise from x axis 
     x, y  // set the origin the point around which to rotate 
    ); 
    ctx.drawImage(image,- sizeX/2, -sizeY/2, sizeX, sizeY); 
} 

En supposant que vous voulez que l'image en rotation autour de son centre qui est au point x, y Lorsque vous avez terminé le rendu des images, vous pouvez réinitialiser à la transformation par défaut avec ctx.setTransform(1,0,0,1,0,0);

Ceci est juste plus rapide que ...

function drawImage(image, x, y, sizeX, sizeY, rot){ 
    ctx.setTransform(1, 0, 0, 1, x, y); 
    ctx.rotate(rot); 
    ctx.drawImage(image, -sizeX/2, -sizeY/2, sizeX, sizeY); 
} 

... sur FF et Chrome, mais cela peut ne pas être vrai demain.