añadir eventos a Rafael elementos

Hola, Estoy intentando añadir un mousemove y haga clic en un evento para SVG Raphael Rectángulo:añadir eventos a Rafael elementos

violín: http://jsfiddle.net/neuroflux/nXKbW/1/

Código:

tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
    fill:'#000000', 
    stroke: '#ffffff' 
}); 
tile.mouseover(function(e) { 
    pX = e.pageX; 
    pY = e.pageY; 
}); 
tile.click(function() { 
    console.log('x: '+pX+'| y:'+pY); 
});

Obviamente, para alguna razón esto no funciona - No obtengo salida onClick: '(

Fuente

2011-05-23 Barrie Reader

Lo sentimos, era obvio que los había visto. El punto es que las variables no tienen alcance. mira esto http://jsjoy.com/blog/10/raphael-js-adding-scoped-event-handlers –

He usado el archivo Raphael.js editado desde ese enlace, pero los controladores aún no se activan: ( –

Ok, espera. De alguna manera, tu violín cuelga IE y Firefox para mí. –

Ok, tengo la función de clic para trabajar. Por último^_ ^.

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript"> 
      /* GLOBAL VARIABLES */ 
      var drawFrames; 
      var canvas; 
      var ctx; 
      var universe = new Array(); 
      var tile; 
      var pX,pY = 0; 

      universe = (
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]] 
      ); 

      /* WINDOW LOAD */ 
      window.onload = function() { 
       init(); 
      } 

      /* INITIALISATION */ 
      function init() { 
       ctx = Raphael(10, 50, 320, 200); 
       drawFrames = setInterval(drawFrame, 40); 
      } 

      /* FRAME RENDER LOOP */ 
      function drawFrame() { 
       //ctx.clear(); 
       for (var x = 0; x < universe.length; x++) { 
        for (var y = 0; y < universe[x].length; y++) { 
         for (var i= 0; i < 11; i++) { 
          tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
           fill:'#000000', 
           stroke: '#ffffff' 
          }).click(function(e) { 
         console.log('x: '+e.pageX+'| y:'+e.pageY); 
         }) 
        } 
       } 

      } 
     } 
     </script> 
    </head> 
    <body> 
     <canvas id="main" width="800" height="600"> 
      <h1>No Support I'm Afraid...</h1> 
     </canvas> 
    </body> 
</html>

Fuente

2011-05-23 10:54:29

Encantadoramente jubiloso, ¡muchas gracias! +1 –

Tenía que ser para cada elemento y no para todo el conjunto de elementos rect por eso no estaba disparando correctamente. –

¡Ah, y el motivo del uso del ram se debió a ese setInterval! Si usas setTimeout que tampoco sucede :) –

Primero, proporcione un id a su objeto raphael y luego vincule el evento click a él.

tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
fill:'#000000', 
stroke: '#ffffff' 
}); 
tile.node.id='tile_id'; 
$('#tile_id').bind('click',function(){alert('clicked');});

Fuente

2011-08-04 21:24:33

Respuesta

Cuestiones relacionadas