问题描述
|
嗨，我正在尝试向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);
});
解决方法
好的，我已经可以使用点击功能。最后^ _ ^。
<!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]]
);
/* 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>
tile = ctx.rect(x*10,10).attr({
fill:\'#000000\',stroke: \'#ffffff\'
});
tile.node.id=\'tile_id\';
$(\'#tile_id\').bind(\'click\',function(){alert(\'clicked\');});