pageX / Yの値とマウス位置

はじめに

GeoGebraアプレットの描画を行っているcanvas要素

document.getElementsByTagName('canvas')[0]

にイベントリスナーを追加した場合における、mouseevent.pageXおよびmouseevent.pageYの値は、当該イベント発生時のマウスの、グラフィックスビューの左上隅からのピクセル座標の値とは、必ずしも一致しない。

これは、グラフィックスビューの左上隅と、当該グラフィックスビューが描画されているページの左上隅とが一致しないこと（生徒向けワークシートのページでは一致しない）や、グラフィックスビューが拡大・縮小されて表示されていること（ページの大きさがグラフィックスビューの大きさより小さい場合や、iframeによる埋め込みを利用する場合に起こりうる）が原因である。

そこで、pageX / Yのズレを解消するにはどうすれば良いかを検証したので、検証結果のアプレットを下記に示す。

なお、event.offsetXYには、上記のようなズレは生じないが、これはタッチデバイスには使えないので、検証対象外とする。

 検証結果のアプレット

「生徒向けワークシート」のページ：

https://www.geogebra.org/m/e7DXQ6Bp

グローバルJavaスクリプトの内容（参考）

// グラフィックスビュー（canvas）を取得
var canvas = document.getElementsByTagName('canvas')[0];

function ggbOnInit() {
  // タッチデバイスのときはタップ、マウスでバイスのときはクリックをリッスン
  var clickOrTouchStart = window.ontouchstart===null?'touchstart':'click';
  canvas.addEventListener(clickOrTouchStart, pixelPicker);
}

function pixelPicker(event){
  // pageX, Yプロパティを取得
  var canvasPageX = event.pageX;
  var canvasPageY = event.pageY;

  // グラフィックスビュー左上隅の、ページ全体における位置を取得
  var clientRect = canvas.getBoundingClientRect();
  var rectX = window.pageXOffset + clientRect.left;  // スクロールした分+今表示されているウインドウからの距離
  var rectY = window.pageYOffset + clientRect.top;

  // グラフィックスビューの縮尺を取得
  var transformText = document.getElementsByClassName("applet_scaler")[0].style.transform;

  // 取得した変数の値をアプレット内のオブジェクトに書き込む
  ggbApplet.setValue('pageX', canvasPageX);
  ggbApplet.setValue('pageY', canvasPageY);
  ggbApplet.setValue('rectX', rectX);
  ggbApplet.setValue('rectY', rectY);
  ggbApplet.setTextValue('transformText', transformText);
  if(transformText == "none"){
    ggbApplet.evalCommand('SetValue[Ratio,(1,1)]');
  }  // 縮尺1のとき
  else{
    var editedText = transformText.slice(5);
    ggbApplet.evalCommand('SetValue[Ratio,'+editedText+']');
  }
}