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

つまり、基本的に私が欲しいのは、CANVASに相対的なクリックイベントの位置です。現在、KineticJSがキャンバスを制御し、キャンバスIDを設定できないためgetElementById、キャンバスを選択するために使用することはできなくなりました。それを行う別の方法はありますか？

キャンバスIDを設定できる方法がわからなかった可能性がありますが、理想的にはKineticJSAPIを使用したより効率的なソリューションを期待しています。

ありがとう。

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() だと思います。以下は、私の経験から知っておくと便利なことです。

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-21T13:41:55.653 に答える
1

とを使用する必要が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-06T08:54:52.703 に答える
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 に答える