Question

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

感谢。

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

Answer 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

中

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

Answer 4

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

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

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

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

5 个答案: