カラースポイト_タッチデバイス対応版

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

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

// グラデーション描画の回数カウント用
var count;

function ggbOnInit() {
  // タップorクリック
  var clickOrTouchStart = window.ontouchstart===null?'touchstart':'click';

  // タップorマウスムーブ
  var mouseMoveOrTouchStart = window.ontouchstart===null?'touchstart':'mousemove';

  // イベントリスナー追加
  eventListenerAdder(clickOrTouchStart);
  eventListenerAdder(mouseMoveOrTouchStart);

  // 起動時に描画を実行
  Executor();
}

// イベントリスナー追加メソッドをまとめている
function eventListenerAdder(event){
  // ピクセルポイント描画を実行する用
  window.addEventListener(event, pixelPicker);
  canvas.addEventListener(event, pixelPicker);

  // グラデーションを描画する用
  window.addEventListener(event, Executor);
  canvas.addEventListener(event, Executor);

  //カラースポイト用
  window.addEventListener(event, Spuit);
  canvas.addEventListener(event, Spuit);
}

// 各種イベントプロパティ(x,y)を取得し、ピクセル点PixelPoint[x,y]を描画
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+']');
  }
}

function Executor(){
  count = 0;

// グラデーションを描きたい場合はコメントインしてください。

//  var ID = setInterval(function Drawer(){
//    count++;
//    var context = canvas.getContext('2d');
//    context.beginPath();
    // グラデーション領域をセット
//    var grad  = context.createLinearGradient(0,0,255,0);
    // 色をセット
//    grad.addColorStop(0,'rgb(255, 255, 255)');  // 白
//    grad.addColorStop(1,'rgb(0, 0, 0)');  // 黒
    // グラデーションをfillStyleプロパティにセット
//    context.fillStyle = grad;
    // 矩形を描画
//    context.rect(0,0,255,255);
//    context.fill();
    // 何回目の実行かをログに書き出す
//    console.log("イベント発生後"+count+"回目のグラデーション描画です。");
//    if(count > 100){
//      clearInterval(ID);
//    }
//  },1);
}

function Spuit(){
  var spuitX = ggbApplet.getValue('spuitX');
  var spuitY = ggbApplet.getValue('spuitY');
  var context = canvas.getContext('2d');

  // デバイスごとに調整用数値を設定
  var dRatioX = ggbApplet.getValue('ratioX');
  var dRatioY = ggbApplet.getValue('ratioY');
  var touchX = window.ontouchstart===null?dRatioX*2:dRatioX;  //なぜタッチデバイスのみ計数2が必要なのかは不明だが、とりあえずこれで揃う。
  var touchY = window.ontouchstart===null?dRatioY*2:dRatioY;

  var spuitImage = context.getImageData(spuitX*touchX, spuitY*touchY, 1, 1); 
  var r = spuitImage.data[0];
  var g = spuitImage.data[1];
  var b = spuitImage.data[2];
  console.log('spuitcolor is'+r+','+g+','+b+'.');
  ggbApplet.setValue('r',r);
  ggbApplet.setValue('g',g);
  ggbApplet.setValue('b',b);
  ggbApplet.evalCommand('SetBackgroundColor[text2,r/255,g/255,b/255]');
}