如何在KineticJS中獲取相對於其圖層的點擊事件的位置？

我正在HTML5中開發一個十六進制網格戰略遊戲，並且由於向UI添加更多按鈕變得複雜，我正在使用KineticJS重寫我的代碼來繪製畫布。如何在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....); 
    } 
})

所以基本上我想要的是Click事件相對於畫布的位置。由於現在KineticJS控制畫布，並且不讓我設置畫布編號，所以我不能使用getElementById來選擇我的畫布。還有另一種方法可以做到嗎？

可能有一些方法我沒有弄清楚可以設置畫布ID，但我期待通過KineticJS API理想的更加優雅的解決方案。

謝謝。

來源

2013-02-21 Mr.Teen

我發現做到這一點的最好辦法是...

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

來源

2013-03-05 16:26:08

當對象發生旋轉時無法正常工作。 – 2013-07-03 10:38:51

要獲得在舞臺上（畫布）鼠標的位置，你可以使用：

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-21 03:52:44 markE

的作品現在是該方法'getPointerPosition（）' – 2014-04-11 10:33:16

你定義canvasX兩次，先用mouseXY.x第二次用mouseXY.y分配。 – 2014-06-18 08:51:51

問得好，我認爲你要找的是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

來源

2013-02-21 13:41:55 allenhwkim

您應該使用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....); 
    } 
})

來源

2014-01-06 08:54:52 Ervin

除瀏覽器變焦處於活動狀態外，作品完美 – 2014-05-05 14:30:25

這是一個老問題，但我所看到的，最好的答案不考慮旋轉。

所以這裏是我的基於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-15 14:27:41 Sayris

這是在更改舞臺比例（放大/縮小）後獲得正確座標的解決方案。 – Prashant 2015-01-28 07:24:18

如何在KineticJS中獲取相對於其圖層的點擊事件的位置？

回答

相關問題