グルチャ

enchant.jsでマウスの相対位置を取得する

enchant.js用マップエディタenchantMapEditorをjQuery UIに置き換えてみた
http://blog.chat.ac/?p=157
上記の作業中に発生した問題の解決法を備忘録として記す。

enchant.jsでehcnaht-stageの位置が(0,0)以外の場合、
マウスイベント(タッチイベント)のマウス位置(localX,localY)に正しい値が入ってこないようだ。
正しいマウス位置を取る方法を備忘録として残しておく。

enchant.jsのマウスイベント(タッチイベント)の中をのぞいてみると、
こんな処理をしていた。
enchant.js v.0.6.2 内1173行目付近

                stage.addEventListener('mousedown', function(e) {
                    var core = enchant.Core.instance;
                    var evt = new enchant.Event(enchant.Event.TOUCH_START);
                    evt._initPosition(e.pageX, e.pageY);
                    var target = core.currentScene._determineEventTarget(evt);
                    core._touchEventTarget[core._mousedownID] = target;
                    target.dispatchEvent(evt);
                }, false);

e.pageX,e.pageYがマウスの絶対位置を示す。
この値を_initPosition()で以下の計算をしてから、localX,localYを設定している。

enchant.js v.0.6.2 内469行目付近

    _initPosition: function(pageX, pageY) {
        var core = enchant.Core.instance;
        this.x = this.localX = (pageX - core._pageX) / core.scale;
        this.y = this.localY = (pageY - core._pageY) / core.scale;
    }

core._pageX,core._pageYに謎の値が入っていて、これが引かれていることで、よく分からない値が設定されているようだ。
だから、受け取る側でこの値を足して絶対位置に戻してから相対位置を計算しなおす。
ただし、core.scaleで割っているので、ここで切り捨てが発生している場合、完全に正しい値には戻せない。

具体的には次のコードのようにする。

		editScene.addEventListener('touchstart', function(e) {
			//マウスの位置を絶対位置に戻す
			var x = e.localX*core.scale + core._pageX,
			    y = e.localY*core.scale + core._pageY;
			
			//親要素の絶対位置を取得する
			var offsetX = 0, offsetY = 0;
			var element = e.target._element;
			while(element) {
				offsetX += element.offsetLeft;
				offsetY += element.offsetTop;
				element = element.offsetParent; //親要素のオフセットを足しこんでいけば、親要素の絶対位置が分かる
			}

			//マウスの絶対位置から親要素の絶対位置を引けば、マウスの相対位置が分かる
			x -= offsetX;
			y -= offsetY;

以上、x,yがマウスの相対位置である。


Leave a reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>