LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年6月21日日曜日

ウィンドウ内でクリックした位置からドラッグした範囲に枠を作りたい



このような四角い枠をドラッグ操作で作りたい



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .display_none {
      display: none;
    }
  </style>
</head>
<body>
  <div id="canvas_div">
    <canvas id="myCanvas"></canvas>
  </div>

  <div class="display_none">
    X座標移動中:<input type="text" id="moveX" />
    Y座標移動中:<input type="text" id="moveY" />
    <br>
    X座標ここから:<input type="text" id="fromX" />
    Y座標ここから:<input type="text" id="fromY" />
    <br>
    X座標ここまで:<input type="text" id="toX" />
    Y座標ここまで:<input type="text" id="toY" />
    <br>
    clientWidth:<input type="text" id="clientWidthTb" />
    clientHeight:<input type="text" id="clientHeightTb" />
  </div>

<script>

/************************************
elem
************************************/
function elem(id){
  return document.getElementById(id);
}

/************************************
グローバル変数
************************************/
var canvas_div = elem("canvas_div");
var fromX = elem("fromX");
var fromY = elem("fromY");
var moveX = elem("moveX");
var moveY = elem("moveY");
var toX = elem("toX");
var toY = elem("toY");
var endFlag = false;

/************************************
イベント
************************************/
document.onmousedown = on_mousedown; 
document.onmouseup = on_mouseup; 
document.onmousemove = on_mousemove; 

getClientSize();
function getClientSize() {
  var width = document.documentElement.clientWidth;
  var height = document.documentElement.clientHeight;
  elem('clientWidthTb').value = width;
  elem('clientHeightTb').value = height;
  elem("myCanvas").width = width;
  elem("myCanvas").height = height; 
}

/************************************
on_mousemove
************************************/
function on_mousemove(e){
  if(endFlag === false) {
    //座標を取得する
    var X = e.pageX;  //X座標
    var Y = e.pageY;  //Y座標
  
    //座標を表示する
    moveX.value = X;
    moveY.value = Y;
    toX.value = X;
    toY.value = Y;
    get_trimed();
  }
}

/************************************
on_mousedown
************************************/
function on_mousedown(e){
  clearRect();
  endFlag = false;
  //座標を取得する
  var X = e.pageX;  //X座標
  var Y = e.pageY;  //Y座標
  
  //座標を表示する
  fromX.value = X;
  fromY.value = Y;
}

/************************************
on_mouseup
************************************/
function on_mouseup(e){
  //座標を取得する
  var X = e.pageX;  //X座標
  var Y = e.pageY;  //Y座標
  
  //座標を表示する
  toX.value = X;
  toY.value = Y;
  get_trimed();
  endFlag = true;
}

/************************************
get_trimed
************************************/
function get_trimed(flag){
  clearRect();
  var X1 = parseInt(fromX.value);
  var Y1 = parseInt(fromY.value);
  var X2 = parseInt(toX.value);
  var Y2 = parseInt(toY.value);
  
  //逆向きからの選択に対応
  var X = nomalize_position(X1, X2);
  X1 = X[0];
  X2 = X[1];

  //逆向きからの選択に対応
  var Y = nomalize_position(Y1, Y2);
  Y1 = Y[0];
  Y2 = Y[1];

  //範囲を取得する
  var X3 = Math.abs(X2 - X1);
  var Y3 = Math.abs(Y2 - Y1);
  
  createRect(X1, Y1, X3, Y3);
}

/************************************
nomalize_position
上から下、左から右に選択すれば問題ないが
下から上や右から左に選択すると
起点よりも終点の方が小さくなり
範囲が正しく取得できないので
起点が終点よりも大きい場合は両者を入れ替えて
逆向きからの選択に対応する
************************************/
function nomalize_position(A, B){
  if(A > B){
    var A0 = A;
    A = B;
    B = A0;
  }
  var result = [A, B];
  return result;
}

/************************************
create_canvas
************************************/
function create_canvas(){
  var canvas = document.createElement("canvas");
  canvas.setAttribute("id", "image_canvas");
  canvas_div.appendChild(canvas);
  return canvas;
}

/************************************
remove_child
************************************/
function remove_child(id) {
  var elem = document.getElementById(id);
  for (var i = elem.childNodes.length - 1; i >= 0; i--) {
    elem.removeChild(elem.childNodes[i]);
  }
}

function createRect(x, y, width, height) { 
  var canvas = elem("myCanvas");
  var context = canvas.getContext("2d");
  context.strokeStyle = "blue";
  context.lineWidth = 1;
  context.strokeRect(x, y, width, height);
}

function clearRect() {
  var canvas = elem("myCanvas");
  var context = canvas.getContext("2d");
  var width = elem('clientWidthTb').value;
  var height = elem('clientHeightTb').value;
  context.clearRect(0, 0, width, height);
}

function elem(id) {
  return document.getElementById(id);
}

</script>
</body>
</html>



最新の投稿

JIRAのAutomation rulesでglobal ruleとmultiple projectsには実行Limitがあるらしい(スタンダードプラン)

JIRAのスタンダードプランの場合 Automation rulesのScopeの設定で、multi-project か global rule だと実行数のLimitにかかる可能性があります。 Single-project なら使用量にカウントされないようです。 Limitにか...