Hola gente de FdW. Esta vez vuelvo a molestarlos con el siguiente problema. El tema es que estoy desarrollando una clase llamada Meter() con la cual pretendo dibujar por medio de canvas unos indicadores con forma de relojes. Para poder utilizar el lenguaje canvas en Internet Explorer uso excanvas, una librería Javascript (parece que desarrollada por la propia gente de Google) que traduce el código de canvas, a lenguaje VML interpretado por Internet Explorer, desde la versión 5.
Hasta aquí, con esta breve reseña. Pero mi problema esta en el constructor de mi clase. la cual adjunto a continuación:
Código PHP:
var Meter = function(parametros) {
/* Declaración e inicializacion de las atributos de la clase. */
this.id = (parametros.id) ? parametros.id : 'meter'+numRandom();
/* El ancho y el alto del meter son opcionales, por defecto toma el tamaño de las imagenes. */
this.ancho = (parametros.ancho) ? parametros.ancho : null;
this.alto = (parametros.alto) ? parametros.alto : null;
this.meterWidth;
this.meterHeight;
/* DOMElement en el que se creara el element canvas. */
this.contenedor = (parametros.contenedor) ? parametros.contenedor : '';
/* URL de la imagen de fondo y del indicador. */
this.fondo = (parametros.fondo) ? parametros.fondo : '';
this.indicador = (parametros.indicador) ? parametros.indicador : '';
/* Angulo de inclinación de los valores inicial y final. */
this.angInicial = (!parametros.angInicial) ? -180 : parametros.angInicial;
this.angFinal = (!parametros.angFinal) ? 180 : parametros.angFinal;
/* Cantidad de unidades que entran en el rango del meter. */
this.unidades = (!parametros.unidades) ? 360 : parametros.unidades;
/* Valor representado por el indicador. */
this.valor;
/* Rotacion que tendra el indicador. */
this.rotacion = 0;
/* Desplazamiento del centro de rotación */
this.xCentro = new Number((!parametros.xCentro) ? 0 : parametros.xCentro);
this.yCentro = new Number((!parametros.yCentro) ? 0 : parametros.yCentro);
/* Creo el lienzo, donde se dibujará el meter. Si ya existe, lo tomo del contenedor ya existente. */
this.canvasOutput;
/* Creo las imagenes que formarán el meter y defino su contenido en base a los parametro recibidos. */
this.imgFondo = new Image();
this.imgIndicador = new Image();
alert(this.unidades);
alert(this.xCentro);
}
Aquí pueden ver como por medio de un array JSON le paso todos los atributo que configuran mis relojitos. Ahora el problema esta en las variables
this.xCentro y
this.yCentro, las cuales no son vistas por ninguna parte del código. Por ejemplo al final del constructor hay dos alerts, uno por unidades, y otro por xCentro. La ultima muestra (Solo en Internet Explorer 6) que su contenido es "undefined", mientras que tendría que ser "0" o el valor que se le asigne, probé además de tratar de acceder a ese atributo de varias maneras, pero ninguno parece funcionar. Además todos los demás atributos estan declarados de igual forma y son accedidos correctamente.
También les dejo el HTML, con el que funcionaria este código.
Código PHP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="meter.js"></script>
<script>
var valor = 50;
var fondo = '2b.png';
var flecha = '1i.png';
var meter = new Meter({
contenedor:'meter',
fondo:fondo,
indicador:flecha,
valorInicial:valor,
angInicial:-75,
xCentro:20,
yCentro:20,
angFinal:75,
unidades:100,
id:'pepe'
});
window.onload = function() {
meter.render({valor:valor});
document.getElementById('grados').innerHTML = valor;
}
var girar = function(inc){
valor += inc;
meter.render({valor:valor});
document.getElementById('grados').innerHTML = valor;
}
</script>
</head>
<body>
<center>
<div id="grados" style="border: 2px;"></div>
<div id="meter"></div>
<div>
<input type="button" value="◄" onclick="girar(-1)" width="20" height="20" />
<input type="button" value="►" onclick="girar(1)" width="20" height="20" />
</div>
</center>
</body>
</html>
Espero que entiendan cual es mi problema y puedan echarme una manito.
Saludos y muchas gracias desde ya!
TIaGoX