Adding events to Raphael elements_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-07 14:28 出处：网络

Hey, I\'m trying to add a mousemove and click event to an SVG Raphael Rectangle: Fiddle: http://jsfiddle.net/neuroflux/nXKbW/1/

Hey, I'm trying to add a mousemove and click event to an SVG Raphael Rectangle:

Fiddle: http://jsfiddle.net/neuroflux/nXKbW/1/

Code:

tile = ctx.rect(x*10,y*(i*10),10,10).attr({
    fill:'#000000',
    s开发者_运维知识库troke: '#ffffff'
});
tile.mouseover(function(e) {
    pX = e.pageX;
    pY = e.pageY;
});
tile.click(function() {
    console.log('x: '+pX+'| y:'+pY);
});

Obviously, for some reason this doesn't function - I get no output onClick :'(

Ok I've got the click function to work. Finally ^_^.

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

first give your raphael object an id then bind the click event to it.

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');});