クリック／タップ位置の取得方法 全解説

アプレット内に作成すべきオブジェクト

数値オブジェクト pageX, pageY, ratioX, ratioY, rectX, rectY

※いずれも値は任意；最大値、最小値は限定しないでおく。

点オブジェクト A

A = PixelPoint[(pageX - rectX) / ratioX, (pageY - rectY) / ratioY]

オリジナルツールPixelPointの導入が必要です。

グローバルJavaスクリプトの内容

var frame = 0;
var appType = location.href.split('/')[3];  //m（生徒向けワークシート）、worksheet（編集・アップロード画面）、classic（GeoGebra Classic）、material（iframe埋め込み）を判別

function ggbOnInit() {
  requestAnimationFrame(ggbOnInit);
  // フレーム数をインクリメント
  frame++;
  // フレーム数が30で割り切れなければ以下を実行しない
  if(frame % 30 != 0) { return; }
  var clickOrTouchStart = 
  window.ontouchstart===null?'touchstart':'click';  // タッチデバイスならtouchstart、マウスデバイスならclick
  if(location.href.split('/')[3] == 'classic'){
    var canvas = document.getElementsByTagName('canvas')[1];  //GeoGebra Classicで開き、かつ数式ビューが表示されている場合を前提としています。
  }
  else{
    var canvas = document.getElementsByTagName('canvas')[0];
  }
  canvas.addEventListener(clickOrTouchStart,pixelPicker);
}

function pixelPicker(e){

  // pageXY
  var pageX = e.pageX;
  var pageY = e.pageY;

  // グラフィックスビューの相対位置
  if(location.href.split('/')[3] == 'classic'){
    var canvas = document.getElementsByTagName('canvas')[1];  //GeoGebra Classicで開き、かつ数式ビューが表示されている場合を前提としています。
  }
  else{
    var canvas = document.getElementsByTagName('canvas')[0];
  }
  var clientRect = canvas.getBoundingClientRect();
  var rectX = window.pageXOffset + clientRect.left;  // スクロールした分+今表示されているウインドウからの距離
  var rectY = window.pageYOffset + clientRect.top;

  // スケール
  var ratioX;
  var ratioY;
  var transformText = document.getElementsByClassName('applet_scaler')[0];
  if(typeof transformText === 'undefined'){
    transformText = 'none';
  }  // applet_scalerがundefinedの場合には、縮尺1の場合として対応
  else{
    transformText = transformText.style.transform;  // 'none'または'scale(数値1, 数値2)'
  }
  if(transformText == 'none'){
    ratioX = 1;
    ratioY = 1;
  }  // 縮尺1のとき
  else{
    var editedText = transformText.slice(6,-1);  // '数値1, 数値2'
    ratioX = eval('['+editedText+']')[0];  // 数値1
    ratioY = eval('['+editedText+']')[1];  // 数値2
  }

  //アプレットへ値を書き出し
  ggbApplet.setValue('pageX', pageX);
  ggbApplet.setValue('pageY', pageY);
  ggbApplet.setValue('rectX', rectX);
  ggbApplet.setValue('rectY', rectY);
  ggbApplet.setValue('ratioX', ratioX);
  ggbApplet.setValue('ratioY', ratioY);
}