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

How to get the position of a click event relative to its layer in KineticJS?

本文关键字：相对于 事件 位置 KineticJS 获取      更新时间：2023-09-26

我正在用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。

谢谢。

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

    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（）

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

获取绝对位置（）

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

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

这是我基于Kinetic v.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
})

我发现最好的方法是…

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....);
    }
})
相关文章：