Canvas Kineticjs - 位置鼠标是错误的答案

【问题标题】：Canvas Kineticjs - position mouse is wrongCanvas Kineticjs - 位置鼠标是错误的
【发布时间】：2013-03-31 08:52:02
【问题描述】：

我首先有文本行，然后我有画布
但是将鼠标放在画布上是错误的（现在y位置的零=文本行的高度）
http://jsfiddle.net/dSC26/

<div id="output">output</div>
<div id="container"></div>

yoda.on('mousemove', function(e) {
    $('#output').html('position mouse on canvas: '+'x: ' + e.clientX + ', y: ' + e.clientY); 
});

我该如何解决这个问题，谢谢！。

【问题讨论】：

你是说画布应该显示 x: 0 , y: 0 而不是 21？
是的，我想显示 0,0。我不想要像 (e.clientY-21) 这样的硬修复，因为我不知道确切，它是 20 而不是 21
看看stackoverflow.com/questions/4249648/…
@plalx 我在这里不使用 jquery。我使用 jquery 显示消息，它对我不起作用:(

标签： javascript canvas html5-canvas kineticjs

【解决方案1】：

您可以使用event.offsetX/Y 或event.layerX/Y 属性。

看看这里 -> http://jsfiddle.net/dSC26/2/

yoda.on('mousemove', function(e) {
    var offsetX = e.offsetX || e.layerX,
        offsetY = e.offsetY || e.layerY;

    $('#output').html('position mouse on canvas: '+'x: ' + offsetX + ', y: ' +  offsetY); 
});

【讨论】：

Np ;) 但是，您应该查看浏览器兼容性，以确保它在所有地方都受支持。

【解决方案2】：

只需使用 stage.getMousePosition()。此处示例：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

你也可以为触摸事件调用 stage.getTouchPosition()，或者为鼠标或触摸事件调用 stage.getPointerPosition()

【讨论】：