JS/getc.js

   1 var CANVAS_SIZE = 512;//canvasのピクセルサイズ
   2
   3 //
   4 function Display(_canvas,_context,_file,_image,_sorce){
   5         this.canvas = _canvas;
   6         this.context = _context;
   7         this.file = _file;
   8         this.image = _image;
   9         this.sorce = _sorce;
  10         this.magnification = 1;
  11         this.movx = 0;
  12         this.movy = 0;
  13         this.angle = 0;
  14 }
  15
  16 var canvas1Display = new Display();//canvas1
  17 var canvas2Display = new Display();//canvas2
  18
  19 //座標群
  20 function Coordinate(_number, _x, _y, _z){
  21     this.number = _number;
  22     this.x = _x;
  23     this.y = _y;
  24     this.z = _z;//将来的に３次元での解析を見越してZ座標をメンバーとして加えている
  25 }
  26
  27 function main(){
  28
  29     //canvas1
  30     canvas1Display.canvas = document.getElementById("canvas1");
  31     canvas1Display.context = canvas1Display.canvas.getContext("2d");
  32     canvas1Display.canvas.width = CANVAS_SIZE;
  33     canvas1Display.canvas.height = CANVAS_SIZE;
  34
  35     //canvas2
  36     canvas2Display.canvas = document.getElementById("canvas2");
  37     canvas2Display.context = canvas2Display.canvas.getContext("2d");
  38     canvas2Display.canvas.width = CANVAS_SIZE;
  39     canvas2Display.canvas.height = CANVAS_SIZE;
  40
  41 }
  42
  43
  44 //マウスカーソルのキャンバス内の座標計算
  45 function calculate_xy(event,canvasId){
  46
  47     var mouseX = 0;       //coordinate x of mouse point
  48     var mouseY = 0;       //coordinate y of mouse point
  49     var positionX = 0;    //coordinate x of canvas
  50     var positionY = 0;    //coordinate y of canvas
  51     var x = 0;            //coordinate x of mouse point in canvas
  52     var y = 0;            //coordinate y of mouse point in canvas
  53
  54     if(canvasId == "canvas1"){
  55         var order1 = parseInt(canvas1_unit.order.value);//mm or μm or nm or A(angstrom)//計算用
  56         var order2 = parseInt(table1_unit.order.value); //mm or um or nm or A
  57         var pixel_length = canvas1_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
  58     }else if(canvasId == "canvas2"){
  59         var order1 = parseInt(canvas2_unit.order.value);//mm or μm or nm or A(angstrom)//計算用
  60         var order2 = parseInt(table2_unit.order.value); //mm or um or nm or A
  61         var pixel_length = canvas2_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
  62     }
  63
  64     mouseX = event.pageX;
  65     mouseY = event.pageY;
  66
  67     var canvas = document.getElementById(canvasId);/*cnavas1 or canvas2 */
  68
  69     clientRect = document.getElementById(canvasId).getBoundingClientRect();
  70     positionX = clientRect.left + window.pageXOffset;
  71     positionY = clientRect.top + window.pageYOffset;
  72
  73     //画像中心を原点としてピクセル座標計算/*（平行移動対応）*/
  74     if(parseInt(canvas.width)%2){//奇数
  75         x = mouseX - positionX - (canvas.width / 2)/* - display4.movx*/;
  76         y = -(mouseY - positionY - (canvas.height)/2)/* - display4.movy*/;
  77     }else{//偶数（偶数の場合は原点は右上を採用）
  78         x = mouseX - positionX - (canvas.width / 2)/* - display4.movx*/;
  79         y = -(mouseY - positionY - ((canvas.height)/2 - 1))/* - display4.movy*/;
  80     }
  81
  82     //小数点切り捨て（ピクセル座標を0-CANVASSIZEを整数値で表す、上のメソッド返ってくるピクセル座標が少数点あり）
  83     x = ~~x;
  84     y = ~~y;
  85
  86     //画像の実際の大きさに換算して座標を変換
  87     //x *= IMAGE_SIZE / CANVAS_SIZE;
  88     //y *= IMAGE_SIZE / CANVAS_SIZE;
  89
  90     //px -> mm,mim,nm ...ピクセルの寸法と元画像の大きさから算出
  91     x *= pixel_length * Math.pow(10,-order1-(-order2))/* / display4.magnification*/;
  92     y *= pixel_length * Math.pow(10,-order1-(-order2))/* / display4.magnification*/;
  93
  94     var coordinate = new Coordinate();
  95     coordinate.x = parseFloat(x.toFixed(2));
  96     coordinate.y = parseFloat(y.toFixed(2));
  97     coordinate.z = 0;
  98
  99     return coordinate;
 100 }
 101
 102 //現在のマウスカーソル座標の表示　マウスが動くと発火イベント--canvas1
 103 document.getElementById("canvas1").addEventListener("mousemove", function(event){
 104     var current_coordinate = document.getElementById("current_coordinate_on_canvas1");
 105     var coordinate = new Coordinate();
 106     coordinate = calculate_xy(event,"canvas1");
 107     current_coordinate.innerHTML = "(" + coordinate.x + "," + coordinate.y + "," + coordinate.z + ")";
 108 });
 109
 110 //現在のマウスカーソル座標の表示　マウスが動くと発火イベント--canvas2
 111 document.getElementById("canvas2").addEventListener("mousemove", function(event){
 112     var current_coordinate = document.getElementById("current_coordinate_on_canvas2");
 113     var coordinate = new Coordinate();
 114     coordinate = calculate_xy(event,"canvas2");
 115     current_coordinate.innerHTML = "(" + coordinate.x + "," + coordinate.y + "," + coordinate.z + ")";
 116 });
 117
 118 //クリックしたマウスカーソル座標を取得　クリックすると発火イベント--canvas1
 119 document.getElementById("canvas1").addEventListener("click", function(event){
 120     if(0){//Displayに合成画像が表示されているかどうか　未搭載
 121         window.alert("Please load image file.");
 122         //move_params_init();
 123         return false;
 124     }else{
 125         var m_or_t = table1_mort.m_or_t.value;
 126         var coordinate = new Coordinate();
 127         coordinate = calculate_xy(event,"canvas1");
 128         add_list(coordinate,"canvas1",m_or_t);
 129     }
 130 });
 131
 132 //
 133 document.onkeydown=function(event){
 134     console.log(event.keyCode);
 135     if(event.keyCode == 65){
 136         var m_or_t = table1_mort.m_or_t.value;
 137         var coordinate = new Coordinate();
 138         coordinate = calculate_xy(event,"canvas1");
 139         add_list(coordinate,"canvas1",m_or_t);
 140     }
 141 }
 142
 143
 144 //クリックしたマウスカーソル座標を取得　クリックすると発火イベント--canvas2
 145 document.getElementById("canvas2").addEventListener("click", function(event){
 146     if(0){//Displayに合成画像が表示されているかどうか
 147         window.alert("Please load image file.");
 148         //move_params_init();
 149         return false;
 150     }else{
 151         var m_or_t = table2_mort.m_or_t.value;
 152         var coordinate = new Coordinate();
 153         coordinate = calculate_xy(event,"canvas2");
 154         add_list(coordinate,"canvas2",m_or_t);
 155     }
 156 });
 157
 158 /***************************************/
 159 /*座標をやりっとりする場合この配列を扱えば良い*/
 160 //座標のオブジェクトを格納する配列
 161 var canvas1_marker_data = [];
 162 var canvas1_target_data = [];
 163 var canvas2_marker_data = [];
 164 var canvas2_marker_ast_data = [];
 165 var canvas2_target_ast_data = [];
 166 /***************************************/
 167
 168
 169 //クリックした座標データを表に反映、データ保持配列に格納
 170 function add_list(coordinate,canvasid,m_or_t){
 171     if(canvasid=="canvas1"){
 172         if(m_or_t == "marker"){
 173             var tbody = document.getElementById("canvas1_marker_tbody");
 174         }else if(m_or_t == "target"){
 175             var tbody = document.getElementById("canvas1_target_tbody");
 176         }
 177     }else if(canvasid="canvas2"){
 178         if(m_or_t == "marker"){
 179             var tbody = document.getElementById("canvas2_marker_tbody");
 180         }else if(m_or_t == "marker_ast"){
 181             var tbody = document.getElementById("canvas2_marker_ast_tbody");
 182         }else if(m_or_t == "target_ast"){
 183             var tbody = document.getElementById("canvas2_target_ast_tbody");
 184         }
 185     }
 186
 187     var new_tr = tbody.insertRow(-1);
 188     var row_Index = new_tr.rowIndex; //row's index (start = 1) equal to table numbering
 189
 190     var coordinate_td = new_tr.insertCell(-1);
 191
 192     coordinate.number = row_Index;
 193
 194     //表に反映
 195     if(canvasid == "canvas1"){
 196         coordinate_td.innerHTML = "No."+coordinate.number+ "<input type='button' value='x' onClick='deleteTable(this.parentNode.parentNode.rowIndex,"+'"'+"canvas1"+'"'+")'><br>("+coordinate.x+","+coordinate.y+","+coordinate.z+")";
 197     }else if(canvasid == "canvas2"){
 198         coordinate_td.innerHTML = "No."+coordinate.number+ "<input type='button' value='x' onClick='deleteTable(this.parentNode.parentNode.rowIndex,"+'"'+"canvas2"+'"'+")'><br>("+coordinate.x+","+coordinate.y+","+coordinate.z+")";
 199     }
 200
 201     //新しい座標データが来た時、任意_dataに格納
 202     if(canvasid=="canvas1"){
 203         if(m_or_t == "marker"){
 204             if(canvas1_marker_data.length == row_Index - 1){
 205                 canvas1_marker_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 206             }
 207         }else if(m_or_t == "target"){
 208             if(canvas1_target_data.length == row_Index - 1){
 209                 canvas1_target_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 210             }
 211         }
 212     }else if(canvasid="canvas2"){
 213         if(m_or_t == "marker"){
 214             if(canvas2_marker_data.length == row_Index - 1){
 215                 canvas2_marker_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 216             }
 217         }else if(m_or_t == "marker_ast"){
 218             if(canvas2_marker_ast_data.length == row_Index - 1){
 219                 canvas2_marker_ast_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 220             }
 221         }else if(m_or_t == "target_ast"){
 222             if(canvas2_target_ast_data.length == row_Index - 1){
 223                 canvas2_target_ast_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
 224             }
 225         }
 226     }
 227     /*
 228     console.log(canvas1_marker_data);
 229     console.log(canvas1_target_data);
 230     console.log(canvas2_marker_data);
 231     console.log(canvas2_marker_ast_data);
 232     console.log(canvas2_target_ast_data);
 233     */
 234 }
 235
 236 function clearTable_canvas1(){
 237     if(table1_mort.m_or_t.value == "marker"){
 238         var tbody = document.getElementById("canvas1_marker_tbody");
 239         canvas1_marker_data = [];
 240     }else if(table1_mort.m_or_t.value == "target"){
 241         var tbody = document.getElementById("canvas1_target_tbody");
 242         canvas1_target_data = [];
 243     }
 244
 245     var rows_length = tbody.rows.length;
 246     for(var i=1; i <= rows_length; i++){
 247         tbody.deleteRow(-1);
 248     }
 249 }
 250
 251 function deleteTable_canvas1(){
 252     if(table1_mort.m_or_t.value == "marker"){
 253         var tbody = document.getElementById("canvas1_marker_tbody");
 254         canvas1_marker_data.pop();
 255     }else if(table1_mort.m_or_t.value == "target"){
 256         var tbody = document.getElementById("canvas1_target_tbody");
 257         canvas1_target_data.pop();
 258     }
 259
 260     tbody.deleteRow(-1);
 261
 262 }
 263
 264 function deleteTable_canvas2(){
 265     if(table2_mort.m_or_t.value == "marker"){
 266         var tbody = document.getElementById("canvas2_marker_tbody");
 267         canvas2_marker_data.pop();
 268     }else if(table2_mort.m_or_t.value == "marker_ast"){
 269         var tbody = document.getElementById("canvas2_marker_ast_tbody");
 270         canvas2_marker_ast_data.pop();
 271     }else if(table2_mort.m_or_t.value == "target_ast"){
 272         var tbody = document.getElementById("canvas2_target_ast_tbody");
 273         canvas2_target_ast_data.pop();
 274     }
 275     tbody.deleteRow(-1);
 276 }
 277
 278 function deleteTable(rowIndex,canvasid){
 279     if(canvasid=="canvas1"){
 280         if(table1_mort.m_or_t.value == "marker"){
 281             var m_or_t = "marker";
 282             var tbody = document.getElementById("canvas1_marker_tbody");
 283             canvas1_marker_data.splice(rowIndex-1,1);//delete 1 data[row_number-1] from coordinate_data
 284         }else if(table1_mort.m_or_t.value == "target"){
 285             var m_or_t = "target";
 286             var tbody = document.getElementById("canvas1_target_tbody");
 287             canvas1_target_data.splice(rowIndex-1,1);
 288         }
 289     }else if(canvasid=="canvas2"){
 290         if(table2_mort.m_or_t.value == "marker"){
 291             var m_or_t = "marker";
 292             var tbody = document.getElementById("canvas2_marker_tbody");
 293             canvas2_marker_data.splice(rowIndex-1,1);
 294         }else if(table2_mort.m_or_t.value == "marker_ast"){
 295             var m_or_t = "marker_ast";
 296             var tbody = document.getElementById("canvas2_marker_ast_tbody");
 297             canvas2_marker_ast_data.splice(rowIndex-1,1);
 298         }else if(table2_mort.m_or_t.value == "target_ast"){
 299             var m_or_t = "target_ast";
 300             var tbody = document.getElementById("canvas2_target_ast_tbody");
 301             canvas2_target_ast_data.splice(rowIndex-1,1);
 302         }
 303     }
 304
 305     var rows_length = tbody.rows.length;
 306     for(var i=rowIndex; i <= rows_length; i++){
 307         tbody.deleteRow(rowIndex-1);//deleteRow(0) -> delete table's 1st row.
 308     }
 309
 310     //coordinate_database.splice(row_number-1,1);//delete 1 data[row_number-1] from coordinate_database
 311
 312     //ボタンを押した階層より後の同レベル階層を削除（Table）
 313     //配列データ(coordinate database)は座標データを残しaddlistに送ってnumberを書き換えtableに反映
 314     if(canvasid=="canvas1"){
 315         if(table1_mort.m_or_t.value == "marker"){
 316             for(var j = rowIndex - 1; j < canvas1_marker_data.length; j++){
 317                 add_list(canvas1_marker_data[j],canvasid,m_or_t)
 318             }
 319         }else if(table1_mort.m_or_t.value == "target"){
 320             for(var j = rowIndex - 1; j < canvas1_target_data.length; j++){
 321                 add_list(canvas1_target_data[j],canvasid,m_or_t)
 322             }
 323         }
 324     }else if(canvasid=="canvas2"){
 325         if(table2_mort.m_or_t.value == "marker"){
 326             for(var j = rowIndex - 1; j < canvas2_marker_data.length; j++){
 327                 add_list(canvas2_marker_data[j],canvasid,m_or_t)
 328             }
 329         }else if(table2_mort.m_or_t.value == "marker_ast"){
 330             for(var j = rowIndex - 1; j < canvas2_marker_ast_data.length; j++){
 331                 add_list(canvas2_marker_ast_data[j],canvasid,m_or_t)
 332             }
 333         }else if(table2_mort.m_or_t.value == "target_ast"){
 334             for(var j = rowIndex - 1; j < canvas2_target_ast_data.length; j++){
 335                 add_list(canvas2_target_ast_data[j],canvasid,m_or_t)
 336             }
 337         }
 338     }
 339 }
 340
 341 /*****************************************************************/
 342 /*****************************************************************/
 343 /*************************** canvas表示 ***************************/
 344 /*****************************************************************/
 345 /*****************************************************************/
 346
 347
 348 //ローカルファイルの読み取り
 349 function loadFile(files,canvasid){
 350     file = files[0];
 351
 352     if(canvasid == "canvas1"){
 353         console.log("canvas1");
 354         canvas1Display.file = file;
 355         canvas1Display.context.clearRect(0,0,canvas1Display.canvas.width,canvas1Display.canvas.height);
 356             //magnification_init(display1);
 357             //rotation_init(display1);
 358             //move_params_init(display1);
 359             displayImage(canvas1Display);
 360     }else if(canvasid == "canvas2"){
 361         console.log("canvas2");
 362         canvas2Display.file = file;
 363         canvas2Display.context.clearRect(0,0,canvas2Display.canvas.width,canvas2Display.canvas.height);
 364             //magnification_init(display1);
 365             //rotation_init(display1);
 366             //move_params_init(display1);
 367             displayImage(canvas2Display);
 368     }
 369 }
 370
 371 function displayImage(display){
 372     var width;
 373     var height;
 374     var left;
 375     var to;
 376     var imageAspect=0;
 377     var image = new Image();
 378     var reader = new FileReader();
 379
 380
 381     reader.onload = function(event){
 382             image.onload = function(){
 383
 384                 //canvasのアンチエイリアスを無効
 385                 display.context.mozImageSmoothingEnabled = false;
 386                 display.context.webkitImageSmoothingEnabled = false;
 387                 display.context.msImageSmoothingEnabled = false;
 388             display.context.imageSmoothingEnabled = false
 389
 390                 imageAspect = image.width / image.height;
 391                 if (imageAspect >= 1) { //画像が横長
 392                     left = 0;
 393                 width = display.canvas.width;
 394                     height = display.canvas.height / imageAspect;
 395                     to = (display.canvas.height - height) / 2;
 396                 } else { //画像が縦長
 397                     to = 0;
 398                     width = display.canvas.width * imageAspect;
 399                     height = display.canvas.height;
 400                 left = (display.canvas.width - width) / 2;
 401             }
 402
 403                 //ファイルアップロード2回目以降のcanvasの初期化
 404                 display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
 405
 406
 407                 /****************変換適用***********************************************/
 408                 //display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
 409                 //display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
 410             //display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
 411                 //display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 412                 /**************************************************************************/
 413
 414                 //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
 415             //display.context.drawImage(image, 0, 0, image.width, image.height, left+display.movx, to-display.movy, width, height);
 416             display.context.drawImage(image, 0, 0, image.width, image.height, left, to, width, height);
 417
 418                 /*****************変換調整***********************************************/
 419                 //display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
 420                 //display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
 421                 //display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
 422                 //display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
 423             /****************************************************************************/
 424             }
 425         image.src = event.target.result;
 426     }
 427
 428         //if(display.file && display.file.type.match('image.*')){
 429     if(display.file.type.match('image.*')){
 430         reader.readAsDataURL(display.file);
 431         console.log("readasdataURL");
 432     }
 433         //}else{
 434     //    console.log("false");
 435     //    return false;
 436     //
 437         //}
 438 }