logo标签列表

向 Raphael 元素添加事件

javascriptcanvassvgraphael
5

嘿，我试图向SVG Raphael矩形添加mousemove和click事件：

示例: http://jsfiddle.net/neuroflux/nXKbW/1/

代码：

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

显然，由于某些原因，这个功能没有发挥作用 - 我在点击时没有得到任何输出 :'(
抱歉，显然你已经看过它们了。关键是变量没有作用域。请查看此网址：http://jsjoy.com/blog/10/raphael-js-adding-scoped-event-handlers - Ashwin Krishnamurthy
我使用了来自该链接的编辑过的Raphael.js文件 - 但是处理程序仍然没有触发 :( - Barrie Reader
好的，等一下。不知何故，你的代码片段让我的IE和Firefox都卡住了。 - Ashwin Krishnamurthy
很奇怪，不确定为什么会这样...它没有崩溃我的...FF4.0.1和IE9。 - Barrie Reader
FF 3.6.17 占用了太多的内存。我已经将它复制到我的系统中并正在使用它。 - Ashwin Krishnamurthy
这毕竟是一个Chrome实验，事件处理程序才是真正的问题... - Barrie Reader
2个回答
5

首先给你的raphael对象一个id，然后将点击事件绑定到它上面。

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

好的，我已经让点击功能起作用了。终于成功了 ^_^。

<!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>
1
它必须针对每个元素而不是整个矩形元素集，这就是为什么它没有正确触发的原因。 - Ashwin Krishnamurthy
哦，内存使用量过高的原因是由于 setInterval！如果您使用 setTimeout，这种情况就不会发生 :) - Ashwin Krishnamurthy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接