0

我正在尝试使用 Raphaël.js 制作一个简单的游戏，我在开发的早期就遇到了一个问题，我通过在光标位置附加一个圆圈来瞄准目标，但是当我单击目标时它没有触发目标点击事件，但目标。

background.mousemove(function(e){
    ePointer.attr({
        'fill':'none',
        'stroke':'none'
    }); 

    nx = e.clientX - $('#canvas').offset().left;
    ny = e.clientY - $('#canvas').offset().top;

    pointer.attr({
        'fill':'none',
        'stroke':'#CC0000',
        'stroke-width': 3,
        'cx':nx,
        'cy':ny
    });

});
background.click(function(e){
    pointer.animate(bClick);
    pointer.animate(bUnclick.delay(250));
    pointer.animate(bUnclick);
});

enemies.mousemove(function(e){
    pointer.attr({
        'fill':'none',
        'stroke':'none'
    });
    nx = e.clientX - $('#canvas').offset().left;
    ny = e.clientY - $('#canvas').offset().top;
    ePointer.attr({
        'cx':nx,
        'cy':ny,
        'fill': '#00CC00',
        'stroke':'none'
    });
});

jsfiddle 链接会比我说的更多：http: //jsfiddle.net/Uuqgx/6/

提前感谢，乔瓦尼。

4

1 回答 1

0

Raphael 的纸对象有一个名为Paper.getElementByPoint(x, y)的方法，该方法获取鼠标下方的顶部对象。当然，仅此一项并不能帮助您，因为圆圈仍在鼠标下方。但是，如果你隐藏它，输入当前鼠标坐标运行这个方法，然后取消隐藏圆圈，你会得到它下面的矩形，没有任何可见的中断：

ePointer.click(function(e){
    score++
    tScore.attr({
        'text': 'Score: ' + score 
    });
    nx = e.clientX - document.getElementById('canvas').offsetLeft;
    ny = e.clientY - document.getElementById('canvas').offsetTop;

    //get targeted rectangle
    this.hide();    
    console.log(paper.getElementByPoint(nx, ny));
    this.show();

    ePointer.animate(eClick);
    ePointer.animate(eUnclick.delay(150));
    ePointer.animate(eUnclick);
});

在这里，我刚刚将目标矩形记录到控制台，但是一旦你找到它，你就可以对它做任何你想做的事情。

请注意，offset().Top 变为 offsetTop 以便在 jsFiddle 中工作，因为 jQuery 不存在于 fiddle 中。

更新了小提琴。

于 2013-02-05T19:48:47.410 回答