Rotar imagen desde un punto

[Supay]

Hola, estoy interesado en crear como un marcador de velecidad para un coche.

De fondo sale el circulo de las velocidades, y en otra capa por encima la aguja que indica la velocidad. (Creo que con esto os haceis una idea)

Luego desde una pagina con un form le envio un dato que es la velocidad y lo recoge en la pagina siguiente (donde sale el velocimetro).

Ahora lo que me gustaria saber es si eciste algun script parecido (para no hacerlo de 0) o si no alguna pistilla de como hacer rotar una imagen en javascript desde un punto fijo.

Un saludo y gracias de antemano

[Panino5001]

Fijate en estos enlaces:
http://www.disegnocentell.com.ar/notas2.php?id=201
http://www.disegnocentell.com.ar/notas2.php?id=204

[Supay]

Hola, muchas gracias por la respuesta la verdad es que me ha sido muy util. Este codigo usando canvas te lo hace solo:

Código HTML:

<script>
function rotar(obj,angulo){
    if (angulo >= 0) {
        var rotation = Math.PI * angulo / 180;
    } else {
        var rotation = Math.PI * (360+angulo) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);
    if (document.createElement("canvas").getContext) {
    /* ---- canvas ---- */ 
        var c=document.createElement('canvas');
        c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
        c.style.width = c.width+'px';
        c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
        c.style.height=c.height+'px';
        c.id=obj.id;
        c.style.position='absolute';
        var ctx=c.getContext('2d');
        ctx.save();
        if (rotation <= Math.PI/2) {
            ctx.translate(sintheta*obj.height,0);
        } else if (rotation <= Math.PI) {
            ctx.translate(c.width,-costheta*obj.height);
        } else if (rotation <= 1.5*Math.PI) {
            ctx.translate(-costheta*obj.width,c.height);
        } else {
            ctx.translate(0,-sintheta*obj.width);
        }
        ctx.rotate(rotation);
        ctx.drawImage(obj, 0, 0, obj.width, obj.height);
        obj.parentNode.replaceChild(c,obj);
        ctx.restore();
    }else{
    /* ---- DXImageTransform ---- */
        obj.style.position='absolute';
        obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        obj.filters.item(0).M11 = costheta;
        obj.filters.item(0).M12 = -sintheta;
        obj.filters.item(0).M21 = sintheta;
        obj.filters.item(0).M22 = costheta;
    }
}
window.onload=function(){
    rotar(document.getElementById('pp'),22);
    
}
</script> 

El problema es que gira la imagen desde el centro. Se puede hacer que la imagen gire desde un punto concreto dandole coordenadas o algo asi? Al ser una aguja, siempre me interesaria que rotara desde la base de la misma (como si fuera un reloj)

[TIaGoX]

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:

/** 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!

[Supay]

Muchas gracias por la respuesta, la verdad es que yo soy de php, html, css... y el javascript se me escapa un poco. Entiendo bien el codigo, aunque no consigo ubicarlo con mi codigo anterior. De todas formas voy a seguir investigando lo que me has puesto, a ver si lo consigo. Muchas gracias de nuevo por la informacion

[caricatos]

Hola:

Con una librería propia puedes ver esta página: Página hecha sin Flash... la presenté en estos foros hace unos pocos años... y la librería la puedes bajar desde este enlace: libgraf.js

Saludos

[Supay]

Muchas gracias tambien por la informacion. Al final he encontrado una cosa bastante util. Que de momento me esta funcionando. Podeis ver el ejemplo aqui:

avesdepaso. com /adicae /Reloj /index .php (quitar los espacios)

Introducir un valor de 1 a 180 (que son los grados que gira) y en el reloj pasar el raton por encima para que se mueva la aguja los grados que le envias.

Ahora bien, tengo un problema mas (al final al usar jquery se me complica un poco mas)

Código:

{"mouseover":function(){rot[0].rotateAnimation(<?php print_r($_POST['reloj']); ?>);}},

Esto de aqui es lo que me calcula los grados, y la funcion que le hace arrancar al script, en este caso el mouseover. Pero prueno a ponerle load, onload, etc... y no consigo que se carge automaticamente al cargar la pagina... alguien sabe si tengo que especificarle algo diferente. Creo que igual deberia probar con document ready pero he probado y o no lo pongo ben o no lo localizo

[Supay]

Hola, perdon por las molestias, me gustaria hacer una ultima consulta: Para que al pulsa la imagen esta rote 5 grados a un lado, tengo este codigo que pongo a continuacion y que funciona correctamente:

Código:

<div id="reloj"><img id="image3" src="img/p-aguja2.png"><div id="numeros"></div></div>
<script type="text/javascript">
			var pepito=0;
		$(document).ready(function(colocar)
		{
			var rot=$('#image3').rotate({maxAngle:180,minAngle:0,
			bind:
				[
					{"click":function(){pepito=pepito+5;rot[0].rotateAnimation(pepito);}}
				]
			});
			
		});
</script>
<a href="#">Menosss!!!!</a> - <a href="#" >Massss!!!!!</a>

Mi duda es:

En los enlaces del final, como puedo decirle al de "Mass!!!" que me ejecute la parte de +5?

Gracias

[Supay]

Subo esto con nuevo codigo, que se me esta atrancando y la verdad es que no se como salir de el. Lo explico, tengo este codigo:

Código:

<div id="reloj"><img id="image3" src="img/p-aguja2.png"></div>
<script type="text/javascript">

		var pepito=0;
		
			var rot=$('#image3').rotate({maxAngle:180,minAngle:0,
			bind:
				[
					{"click":function click(){rot[0].rotateAnimation(120);}}
				]
			});	
</script>
<input type="button" name="poten" Value="Calcular potencia">

Esto lo que me hace es la imagen con id 3 al pinchar me hace una accion. Lo que quiero es como decirle al input con un onclick o asi, que me ejecute la accion y que no lo haga la imagen. ALguien podria ayudarme please?