Javascript 如何在KineticJS中获取单击事件相对于其层的位置？

我正在用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，但我希望有一个更简单的解决方案，理想的是通过KineticJSAPI

---

谢谢。

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

    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;
  });

---

好问题，我想你要找的是getAbsolutePosition（）。 根据我的经验，以下是一些有用的东西

getPosition（）

getParent（）

getX（）

格蒂（）

getAbsolutePosition（）

没有比这更有用的东西了

getScale（）

---

所有内容都在文档中，

我发现最好的方法是

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

---

您应该使用

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....);
    }
})

---

这是一个老问题，但正如我所看到的，最好的答案没有考虑到轮换

这是我基于Dynamic 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
})

---

在对象上旋转时无法正常工作。除非浏览器缩放处于活动状态，否则工作正常。您定义了两次canvasX，第一次使用mouseXY.x，第二次使用mouseXY.y。这是更改舞台比例（放大/缩小）后获得正确坐标的解决方案。

y position relative to parent

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

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

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

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....);
    }
})

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
})