Mira yo en base a ese código que pusiste una vez desarrolle unos relojitos similares a lo que necesitas. Y cree este método para transladar la imagen una vez rotada. Pensá que esta hecho como el método de una clase, por el nombre de las variable estimo que te darás cuenta de lo que son cada una de las mismas.
Código javascript
:
Ver original/** El centro de rotación de canvas es el vértice superior izquierdo, por
* ello, este método se ocupa de calcular cuando debemos trasladar la
* imagen para que parezca que rota sobre el centro de la imagen.
* @param ctx, el objeto context.
* @param rotacion, el ángulo de rotación de la imagen en radianes.
*/
Meter.prototype.getTranslateAfterRotate = function(ctx,rotacion){
/* En base al angulo de rotación muevo la imagen a una nueva posicion
* dentro del lienzo para que quede centrada al momento de ser dibujada.
*/
var hipotenusa = sqrt(pow2(this.meterWidth/2) + pow2(this.meterHeight/2));
var desplazamientoX;
var desplazamientoY;
/* Si el angulo esta en el primer cuadrante de la rotacion, tomamos el
* desplazamiento del centro por medio de la hipotenusa que es la semi
* diagonal de la imagen y el angulo de rotacion mas los 45º de angulo de
* la diagonal. Lo mismo con los demas cuadrantes. Para mas informacion
* de como interpretar esto se adjuntara la documentacion correspondiente.
*/
if (rotacion <= PI/2) {
desplazamientoX = hipotenusa * coseno(rotacion+(PI/4));
desplazamientoY = hipotenusa * seno(rotacion+(PI/4));
ctx.translate(((this.meterWidth/2)-desplazamientoX)+xCentro,
((this.meterHeight/2)-desplazamientoY)+yCentro);
} else if (rotacion <= PI) {
desplazamientoX = hipotenusa * seno(rotacion-(PI/4));
desplazamientoY = hipotenusa * coseno(rotacion-(PI/4));
ctx.translate(((this.meterWidth/2)+desplazamientoX)+xCentro,
((this.meterHeight/2)-desplazamientoY)+yCentro);
} else if (rotacion <= 1.5 * PI) {
desplazamientoX = hipotenusa * (coseno(rotacion-(0.75 * PI)));
desplazamientoY = hipotenusa * (seno(rotacion-(0.75 * PI)));
ctx.translate(((this.meterWidth/2)+desplazamientoX)+xCentro,
((this.meterHeight/2)+desplazamientoY)+yCentro);
} else {
desplazamientoX = hipotenusa * (coseno((1.75 * PI)-rotacion));
desplazamientoY = hipotenusa * (seno((1.75 * PI)-rotacion));
ctx.translate(((this.meterWidth/2)-desplazamientoX)+xCentro,
((this.meterHeight/2)+desplazamientoY)+yCentro);
}
return ctx;
}
Espero que se entienda y te sirva. Cualquier cosa trato de responder tus consultas.
Saludos!