errore di lancio variabile "indefinito", impossibile trovare

Question

Sto usando Raphael.js. Ogni volta che ho caricare la pagina ottengo un errore che recita:

con is undefined 
x = con.x 

ho guardato con nella documentazione Raffaello, e questo è quello che ho trovato:

var con = R._getContainer.apply(0, arguments), 
    container = con && con.container, 
    x = con.x, 
    y = con.y, 
    width = con.width, 
    height = con.height; 
    //... 

con è chiaramente definite in questa sede. Ecco il codice che sto cercando di caricare:

var paper = new Raphael(ele('canvas_container'), 500, 500); 

window.onload = function() { 
      var circle = paper.circle(100,100,100); 
      for (i = 0; i < 5; i++) { 
       var multiplier = i * 5; 
       paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier); 
      } 
    } 

Qualcun altro ha ricevuto questo errore? Si tratta di un bug nella versione di Raphael che ho o c'è qualche altro problema?

Answer 1

provare a spostare l'istanza carta all'interno funzione di caricamento del tuo finestra:

window.onload = function() { 
    var paper = new Raphael(ele('canvas_container'), 500, 500); 
    var circle = paper.circle(100,100,100); 
    for (i = 0; i < 5; i++) { 
     var multiplier = i * 5; 
     paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier); 
    } 
} 

Se si tenta di ottenere un elemento dal suo id prima che il DOM è pronto, getElementById non tornerà nulla. Come puoi vedere here, provare il tuo codice su un documento vuoto mostra lo stesso risultato.

Answer 2

Raphael.js si aspetta che sulla pagina sia presente un elemento HTML codificato con il nome della tela di Raffaello (ad esempio "canvas_container"). Se l'elemento HTML viene creato durante il runtime (in modo dinamico nel codice JavaScript), genererà questo errore.

R._engine.create = function() { 
    var con = R._getContainer.apply(0, arguments), 
     container = con && con.container, 
     x = con.x, 
     y = con.y, 
     width = con.width, 
     height = con.height; 
    if (!container) { 
     throw new Error("SVG container not found."); 
    } 
    var cnvs = $("svg"), 
     css = "overflow:hidden;", 
     isFloating; 
    x = x || 0; 
    y = y || 0; 
    width = width || 512; 
    height = height || 342; 
    $(cnvs, { 
     height: height, 
     version: 1.1, 
     width: width, 
     xmlns: "http://www.w3.org/2000/svg" 
    }); 
    if (container == 1) { 
     cnvs.style.cssText = css + "position:absolute;left:" + x + "px;top:" + y + "px"; 
     R._g.doc.body.appendChild(cnvs); 
     isFloating = 1; 
    } else { 
     cnvs.style.cssText = css + "position:relative"; 
     if (container.firstChild) { 
      container.insertBefore(cnvs, container.firstChild); 
     } else { 
      container.appendChild(cnvs); 
     } 
    } 
    container = new R._Paper; 
    container.width = width; 
    container.height = height; 
    container.canvas = cnvs; 
    container.clear(); 
    container._left = container._top = 0; 
    isFloating && (container.renderfix = function() {}); 
    container.renderfix(); 
    return container; 
};