如何在 KineticJS 中获取点击事件相对于其层的位置？答案

【问题标题】：How to get the position of a click event relative to its layer in KineticJS?如何在 KineticJS 中获取点击事件相对于其层的位置？
【发布时间】：2013-02-06 07:03:31
【问题描述】：

我正在用 HTML5 开发一个六角网格策略游戏，由于向 UI 添加更多按钮变得很复杂，我正在使用 KineticJS 重写我的代码来绘制画布。

在我的游戏中，有一个小地图，其中有一个矩形显示玩家相机的位置。当玩家点击小地图时，他的相机中心将被设置为他点击的位置。我的原始代码没有使用任何外部库，它看起来像这样：

this.on('click', function(event){
    var canvas = document.getElementById('gameCanvas');
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    camera.setPos( // calculate new position based on x and y....);
    }
})

所以基本上我想要的是点击事件相对于画布的位置。由于现在 KineticJS 控制了画布，它不允许我设置画布 ID，我不能再使用 getElementById 来选择我的画布。还有其他方法吗？

可能有一些我想不通的方法可以设置画布 ID，但我期待一个更优雅的解决方案，最好是通过 KineticJS API。

谢谢。

【问题讨论】：

标签： javascript html html5-canvas kineticjs

【解决方案1】：

要获得鼠标在舞台（画布）上的位置，可以使用：

    var mouseXY = stage.getPointerPosition();
    var canvasX = mouseXY.x;
    var canvasX = mouseXY.y;

您可以通过相同的方式点击形状内的鼠标位置：

  myShape.on('click', function() {
    var mouseXY = stage.getPointerPosition();
    var canvasX = mouseXY.x;
    var canvasY = mouseXY.y;
  });

【讨论】：

你定义了两次 canvasX，第一次用 mouseXY.x 分配，第二次用 mouseXY.y。

【解决方案2】：

好问题，我认为您正在寻找的是 getAbsolutePosition()。以下是根据我的经验了解的有用信息。

getPosition()

node x/y position relative to parent
if your shape is in layer, x/y position relative to layer
if your shape is in group, x/y position relative to group

getParent()

To know what parent node is

getX()

x position relative to parent

getY()

y position relative to parent

getAbsolutePosition()

absolute position relative to the top left corner of the stage container div

还有一些有用的东西，

getScale()

if your stage is zoomed in or out, better to know this.

一切都在文档中，http://kineticjs.com/docs/symbols/Kinetic.Node.php

【讨论】：

【解决方案3】：

这是一个老问题，但正如我所见，最佳答案并未考虑轮换。

这是我基于 Kinetic v5.1.0 的解决方案。谁考虑了所有的转换。

var myStage = new Kinetic.Stage();    
var myShape = new Kinetic.Shape(); // rect / circle or whatever

myShape.on('click', function(){
    var mousePos = myStage.getPointerPosition();
    var p = { x: mousePos.x, y: mousePos.y }; // p is a clone of mousePos
    var r =  myShape.getAbsoluteTransform().copy().invert().point(mousePos);

    // r is local coordinate inside the shape
    // mousePos is global coordinates
})

【讨论】：

这是在舞台比例改变（放大/缩小）后获得正确坐标的解决方案。

【解决方案4】：

我发现最好的方法是......

var bgxy = bg.getAbsolutePosition();
var x = event.pageX - stage.getContainer().offsetLeft - bgxy.x;
var y = event.pageY - stage.getContainer().offsetTop - bgxy.y;

【讨论】：

对象有旋转时无法正常工作。

【解决方案5】：

你应该使用event.layerX和event.layerY：

this.on('click', function(event){
    var canvas = document.getElementById('gameCanvas');
    var x = event.layerX;
    var y = event.layerY;
    camera.setPos( // calculate new position based on x and y....);
    }
})

【讨论】：

完美运行，除非浏览器缩放处于活动状态