Question

我正在尝试使用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/

先谢谢了，乔瓦尼。

Answer 1

拉斐尔的纸质对象有一个名为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。

Updated fiddle

自定义SVG光标不会点击下面的元素

1 个答案: