2

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

谢谢。

4

5 回答 5

3

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

    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;
  });
于 2013-02-21T03:52:44.140 回答
2

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

获取位置（）

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

获取父母（）

To know what parent node is

获取X（）

x position relative to parent

得到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.

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

于 2013-02-21T13:41:55.653 回答
2

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

所以这是我基于 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
})
于 2014-07-15T14:27:41.800 回答
1

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

var bgxy = bg.getAbsolutePosition();
var x = event.pageX - stage.getContainer().offsetLeft - bgxy.x;
var y = event.pageY - stage.getContainer().offsetTop - bgxy.y;
于 2013-03-05T16:26:08.107 回答
1

你应该使用event.layerXand 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....);
    }
})
于 2014-01-06T08:54:52.703 回答