Probelmas con IE6 y POO (OOP)

TIaGoX · #1 (**permalink**) 06/04/2009, 13:28

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

Panino5001 · #2 (**permalink**) 06/04/2009, 13:49

Asegurate de tener definidas todas las variables (ej: flecha, fondo, etc) y todas las funciones (ej:numRandom), ya que yo testeé en Explorer 6 (sin exCanvas, que ahí puede haber otro problema) y me salieron los alerts correctamente.

TIaGoX · #3 (**permalink**) 07/04/2009, 07:09

Ok, revise todo nuevamente. Todas las variables están correctamente definidas. También lo probé eliminando el ExCanvas. Pero he descubierto otra cosa, es como si no se ejecutara esa linea de this.xCentro y this.yCentro, lo cual me parece un poco raro, pero si sitúo alerts inmediatamente debajo de la instrucción de creación de dichas variables, esos alerts ni siquiera se ejecutan. Realmente es muy raro.