Help us understand the problem. What is going on with this article?

stage.mouseXの注意点

概要

createJSでのcanvasを使ったゲームを作成する際に

canvas = document.getElementById("canvas");
// stage作成
stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);

上記のようにステージを作成することが一般的
このような状況で画面上のタップした座標を取得したい場合に

touchPosX = stage.mouseX / stage.scaleX;
touchPosY = stage.mouseY / stage.scaleY;

上記コードで取得できる。
PC上では問題ないが、
実機対応のためにタッチ操作を有効にした状態で

// タッチ操作を有効にする
createjs.Touch.enable(stage);

画面に配置したcanvasの上下左右の領域の端をタップすると
stage.mouseX, stage.mouseYの値が最後にタップした座標に固定されてしまう

対策

タップした座標を取る際にeventから座標を取得するようにする

var button;
button.addEventListener("mousedown", function(event) {
    var tapPointX = event.stageX;
});

原因

どうやら画面に配置したcanvasの上下左右の領域の端を押したときに、
イベントが二つ飛んでくるらしい(touchStartとmousedown)
イベントの種類ごとに_primaryPointerIDが設定される

mouseDown touchStart
_primaryPointerID -1 0

canvas内のオブジェクトをタップしているだけでは

stageの_primaryPointerIDが0であるが画面に配置したcanvasの上下左右の領域の端を押すと、-1になってしまう

タップした点に関する情報はstage.pointerDataにprimaryPointerIDごとに保存されているのだが、一度_primaryPointerIDを-1にしてしまうと、そのときのx,y座がpointerData[-1]に保存され、stage.mouseXはその値を参照してしまう

参考サイト

https://createjs.com/docs/easeljs/files/easeljs_display_Stage.js.html
(200行目、60行目、)

https://qiita.com/calmbooks/items/6df5e01a7a29417e55c6
(タッチデバイスにて、mousedownが2回発火)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away