ロボットの描画、コーディングの修正。（４）

接合点の角度を変えるだけで描画は変わります。

モジュールの修正。

・コメントをつけました。

//
//多角形の描画（座標指定）座標をそのまま描画（回転考慮あり）
//
function polygon_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標ｘの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
//         多角形の中心座標ｘ
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標ｙの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
//         多角形の中心座標ｙ
           midpointy = parseInt(robotcode[idy][10]);
       }

        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
//         差分データとして保存
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        } else {
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
//            回転角度データをして保存。
              dr = parseInt(robotcode[idy][11]);
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - dr;
              }
              if(dr >= 360) dr - 360;
           } else {
                dr = 0;
           }

        }
        y1sv = 0; x1sv =0;

//      差異が０でない場合は、中点に差異を加味する。
        if(polysay != 0) y1sv = midpointy + polysay;
        if(polysax != 0) x1sv = midpointx + polysax;
//      角度が設定されているなら回転させる。
        if(dr != 0) {
//          回転する変数を計算
            vBase1_c = Math.cos(dr*(Math.PI/180));
            vBase1_s = Math.sin(dr*(Math.PI/180));
        }

        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                if(dr !=0){
//                座標を回転させる。
                  xx = polygonzh[polygonno][j].polyx+x1sv - midpointx;
                  yy = polygonzh[polygonno][j].polyy+y1sv - midpointy;
                  px =  parseInt(xx * vBase1_c - yy * vBase1_s)+midpointx;
                  py =  parseInt(xx * vBase1_s + yy * vBase1_c)+midpointy;
                } else {
//                多角形テーブルよりデータと差分を計算し座標を算出
                  px = polygonzh[polygonno][j].polyx+x1sv;
                  py = polygonzh[polygonno][j].polyy+y1sv;
                }
//                座標を描画する。
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
//       多角形を描画出力
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 

}

 

テーブルデータからロボットの描画（テスト済みコーディング掲載）（３）

ー－多角形データ－－

（多角形）        
1 4 035,040 065,040 060,080 040,080    
2 0        
3 5 040,080 060,080 055,100 050,105 045,100   
4 6 041,080 046,100 045,105 030,105 030,100 032,090  
5 6 059,080 054,100 055,105 070,105 070,100 068,090  
6 7 -06,000 005,000 006,004 006,010 -04,010 -07,006 -07,004 
7 7 -05,000 005,000 006,004 006,006 003,010 -06,010 -06,004 
8 6 -07,000 007,000 008,006 008,008 -10,008 -10,005  
9 6 007,000 -07,000 -08,006 -08,008 010,008 010,005  
（終わり）

 

ー－ロボット・データ－－

MM種別 種別内No 描画タイミング 座標数 図形種別 多角形No 接合S 接合E 色No 中点ｘ 中点ｙ 角度（前）差 半径 減少角度 幅（前長さ） 長さ
MM1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
MM2 2 2 2 2 1 2 2 2 3 3 3 2 3 3 3
01 00 01 01 10 2 00 00 00 040 012 △ △ △ 022 028
DD               
02 01 01 04 40 1 01 51 04 050 060 0 20 0 30 40
DD               
03 03 01 05 40 3 51 00 04 050 093 0 13 0 20 25
DD               
05 11 02 01 53 0 11 12 01 035 045 30 6 3 12 25
05 12 02 02 23 0 12 13 01 S12 S12 0 △ △ 6 30
DD               
06 10 01 06 40 4 81 31 04 038 090 0 38 0 16 25
06 20 01 06 40 5 82 41 04 062 090 0 38 0 16 25
DD               
07 11 02 01 53 0 31 32 04 S31 S31 0 9 6 15 35
07 12 02 02 23 0 32 33 04 S32 S32 0 △ △ 10 50
DD               
05 30 04 07 41 6 13 00 02 S13 S13 (-017,-110) △ △ △ △
08 31 04 02 23 0 13 00 03 S13 S13 (-004,+005) △ △ 3 9
08 32 04 02 23 0 13 00 02 S13 S13 (-001,+009) △ △ 2 10
08 33 04 02 23 0 13 00 03 S13 S13 (+001,+009) △ △ 2 10
08 34 04 02 23 0 13 00 02 S13 S13 (+003,+009) △ △ 2 10
08 35 04 02 23 0 13 00 03 S13 S13 (+005,+009) △ △ 2 8
DD               
09 70 05 06 41 8 33 00 01 S33 S33 (+008,+005) △ △ △ △
DD               
05 21 02 01 53 0 21 22 01 065 045 30 6 3 12 25
05 22 02 02 23 0 22 23 01 S22 S22 0 △ △ 6 30
DD               
07 21 02 01 53 0 41 42 04 S41 S41 0 9 6 15 35
07 22 02 02 23 0 42 43 04 S42 S42 0 △ △ 10 50
DD               
05 40 04 07 41 7 23 00 02 S23 S23 (-085,-110) △ △ △ △
08 41 04 02 23 0 23 00 03 S23 S23 (+005,+005) △ △ 3 9
08 42 04 02 23 0 23 00 02 S23 S23 (+002,+009) △ △ 2 10
08 43 04 02 23 0 23 00 03 S23 S23 (+000,+009) △ △ 2 10
08 44 04 02 23 0 23 00 02 S23 S23 (-002,+009) △ △ 2 10
08 45 04 02 23 0 23 00 03 S23 S23 (-004,+009) △ △ 2 8
DD               
09 80 05 06 41 9 43 00 01 S43 S43 (+008,+000) △ △ △ △
DD               
10 11 01 01 30 0 52 00 05 040 055 △ 10 0 20 20
10 11 01 01 30 0 52 00 05 060 055 △ 10 0 20 20
DD               
11 11 03 01 30 0 11 11 02 035 045 △ 6 0 12 12
11 12 03 01 30 0 12 12 02 S11 S11 F30 5 0 25 10
11 13 03 01 30 0 13 13 02 S12 S12 F00 4 0 30 8
DD               
11 31 03 01 30 0 31 31 02 040 105 △ 9 0 18 18
11 32 03 01 30 0 32 32 02 S31 S31 F00 6 0 35 12
11 33 03 01 30 0 33 33 02 S32 S32 F00 5 0 50 10
DD               
11 21 03 01 30 0 21 21 02 065 045 △ 6 0 12 12
11 22 03 01 30 0 22 22 02 S21 S21 F30 5 0 25 10
11 23 03 01 30 0 23 23 02 S22 S22 F00 4 0 30 8
DD               
11 41 03 01 30 0 41 41 02 060 105 △ 9 0 18 18
11 42 03 01 30 0 42 42 02 S41 S41 F00 6 0 35 12
11 43 03 01 30 0 43 43 02 S42 S42 F00 5 0 50 10
EE

 

テーブルデータからロボットの描画（テスト済みコーディング掲載）（２）

テーブルデータからロボットの描画（テスト済みコーディング掲載）（２）

 

 

//
//ロボットの描画
//

function robotdraw(){

//接合部を描画する
    join_draw();

//ロボットテーブルからデータを呼び出し描画する。
    for(y=0; y<robotsu; y++){
        //テーブル(配列）から図形種別のワークに入れる。

        shapetype = robotcode[y][4];
        idy = y;

        //値によって処理を分ける。
        switch(shapetype) {
          case "10":
              //イメージデータの描画処理
              image_draw();
              break;
          case "23":
              //線の描画処理（接合点（始点、終点））
              line3_draw();
              break;
          case "30":
              //円の描画処理
              if(robotcode[y][0] !="11") circle_draw();
              break;
          case "40":
              //多角形の描画処理
              polygon_draw();
              break;
          case "41":
              //多角形の描画処理（接合点）
              polygon2_draw();
              break;
          case "53":
              //逆台形の描画処理
              invtrapezoid3_draw();
              break;
          default:
              //その他（考え中）
              etc_syori();
       }
    }

}
//接合部の座標を計算する。
function join_calculate(){

    jointbl[joinsu].kinds = "S" + robotcode[idy][1];          //種別
    jointbl[joinsu].timing = robotcode[idy][2];         //描画タイミング
    jointbl[joinsu].shapetype = robotcode[idy][4];      //図形種別
    jointbl[joinsu].colorno = parseInt(robotcode[idy][8]);        //色No
    jointbl[joinsu].midpointx = robotcode[idy][9];       //中点ｘ
    jointbl[joinsu].midpointy = robotcode[idy][10];       //中点ｙ
// 前の接合点からの描画角度
    if(robotcode[idy][11] === "△") {
        jointbl[joinsu].fangle = 0;
    } else {
        jointbl[joinsu].fangle = parseInt(robotcode[idy][11].substr(1,2));          //前角度

    }
    dr = jointbl[joinsu].fangle;
//  左側の接合点の場合、角度を３６０度回転させる。
    if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")){
          dr = 360 - dr;
          if(dr >= 360) dr = dr - 360;
    }

    jointbl[joinsu].radius = parseInt(robotcode[idy][12]);          //半径
    jointbl[joinsu].flength = parseInt(robotcode[idy][14]);         //前長さ
    jointbl[joinsu].length = parseInt(robotcode[idy][15]);          //長さ

    sx = 0; sy = 0;
    //中点ｘの値の頭が”Ｓ”であると前にある種別が同一の座標を参照して計算する。
    //リアル座標ｘの算出
    if(robotcode[idy][9].substr(0,1) === 'S'){
        //一つ前のテーブルの種別が中点ｘの値と同じならリアル座標ｘをｓｘに入れる。
        //以外は０を編集する。
        if(jointbl[joinsu-1].kinds === jointbl[joinsu].midpointx){
           sx = jointbl[joinsu-1].realadx;
        } else {
           sx = 0;
        }
        //cos（コサイン）でｘ座標を求める。（前の角度＋９０）ラジアンに直す（パイ／１８０を乗算する）
        if(dr === 0){
           jointbl[joinsu].realadx = sx;
        } else {
           jointbl[joinsu].realadx = parseInt(jointbl[joinsu].flength*Math.cos((dr+90)*Math.PI/180))+sx;
        }
    } else {
        //実座標が入っている場合、そのまま編集する。
        jointbl[joinsu].realadx = parseInt(robotcode[idy][9]);         //リアル座標ｘ
    }
    
    //中点ｙの値の頭が”Ｓ”であると前にある種別が同一の座標を参照して計算する。
    //リアル座標ｙの算出
    if(robotcode[idy][10].substr(0,1) === 'S'){
        //一つ前のテーブルの種別が中点ｙの値と同じならリアル座標ｙをｓｙに入れる。
        //以外は０を編集する。
        if(jointbl[joinsu-1].kinds === jointbl[joinsu].midpointy){
           sy = jointbl[joinsu-1].realady;
        } else {
           sy = 0;
        }
        if(dr === 0){
            jointbl[joinsu].realady = jointbl[joinsu].flength + sy;
        } else  {
            //sin（サイン）でｙ座標を求める。（前の角度＋９０）ラジアンに直す（パイ／１８０を乗算する）
            jointbl[joinsu].realady = parseInt(jointbl[joinsu].flength*Math.sin((dr+90)*Math.PI/180))+sy;
        }
    } else {
        //実座標が入っている場合、そのまま編集する。
        jointbl[joinsu].realady = parseInt(robotcode[idy][10]);         //リアル座標ｙ
    }

    joinsu = joinsu + 1;

}

//イメージデータの描画処理
function image_draw(){
        //イメージテーブルの印字するイメージの番号
        imgno = parseInt(robotcode[idy][5])-1;
        //印字位置
        icenterx = parseInt(robotcode[idy][9]);
        icentery = parseInt(robotcode[idy][10]);
        //印字するサイズ　幅と高さ
        iwidth   = parseInt(robotcode[idy][14]);
        ilong    = parseInt(robotcode[idy][15]);

        ctx.drawImage(img_robot[imgno],icenterx*mgf+dfsx,icentery*mgf+dfsy,iwidth*mgf,ilong*mgf);

}

//線の描画処理
//
//線の描画処理（接合点(始点、終点）のからの表示）
//
function line3_draw(){
//　　　図形タイプをセーブする。
        shapetype = robotcode[idy][4];
//      接合点（始点）
        linestratx = 0; linestarty = 0;
　　　　if(robotcode[idy][6] != "00"){
          linestart = "S" + robotcode[idy][6];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === linestart){
                  linestartx = jointbl[i].realadx;
                  linestarty = jointbl[i].realady;
                  break;
              }
           }
       }
//      接合点（終点）
        lineendx = 0; lineendy = 0;
　　　　if(robotcode[idy][7] != "00"){
          lineend = "S" + robotcode[idy][7];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === lineend){
                  lineendx = jointbl[i].realadx;
                  lineendy = jointbl[i].realady;
                  break;
              }
           }
       }

//      （の中は、減算、加算する差異数値
        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        }
        y1sv = 0; x1sv =0;
//      始点を差異で修正する
        y1sv = linestarty + polysay;
        x1sv = linestartx + polysax;
//     線の幅
       linewidth = parseInt(robotcode[idy][14]);
//     線の長さ
       linelength = parseInt(robotcode[idy][15]);

//     線の角度
       lineangle = 0;
//     終点が無い場合は、角度と長さより終点を算出する。
       if(lineendx === 0){
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
              lineangle = parseInt(robotcode[idy][11]) + 90;
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - lineangle;
              }
           } else {
                lineangle = 0;
           }
           if(lineangle === 0) {
              lx = 0 + x1sv;
              ly = linelength + y1sv;
           } else {
             lx = parseInt(linelength*Math.cos((lineangle)*(Math.PI/180))) + x1sv;
             ly = parseInt(linelength*Math.sin((lineangle)*(Math.PI/180))) + y1sv;
           }
       } else {
           lx = lineendx;
           ly = lineendy;
       }

//     線の角度によるｌｘ（ｃｏｓ）とｌｙ（ｓｉｎ）で計算する。

//     線の開始座標
       xx = x1sv;
       yy = y1sv;
//     線の終点座標
       x1 = lx;
       y1 = ly;
//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);

        ctx.beginPath();
        ctx.lineWidth = linewidth*mgf;
        ctx.moveTo(xx*mgf+dfsx,yy*mgf+dfsy);
        ctx.lineTo(x1*mgf+dfsx,y1*mgf+dfsy);

//      カラーテーブル（配列）からカラーナンバーのレコードを編集する。
        ctx.strokeStyle = bordcolor[ocolno][wkcolor];
//      線を描画する。
        ctx.stroke();

}

function circle_draw(){

        shapetype = robotcode[idy][4];

        cradius   = parseInt(robotcode[idy][12]);
//     描画位置（ｘ座標）を接合点テーブルより取得。
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//     描画位置（ｙ座標）を接合点テーブルより取得。
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }

//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);

        ctx.beginPath();
        ctx.fillStyle = bordcolor[ocolno][wkcolor];
        ctx.arc(midpointx*mgf+dfsx,midpointy*mgf+dfsy,cradius*mgf,0,Math.PI*2,false);
//      中心座標を指定（円）
        ctx.fill();

}
function polygon_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標ｘの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標ｙの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }

        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        } else {
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
              dr = parseInt(robotcode[idy][11]);
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - dr;
              }
           } else {
                dr = 0;
           }

        }
        y1sv = 0; x1sv =0;

//      差異が０でない場合は、中点に差異を加味する。
        if(polysay != 0) y1sv = midpointy + polysay;
        if(polysax != 0) x1sv = midpointx + polysax;
//      角度が設定されているなら回転させる。
        if(dr != 0) {
            vBase1_c = Math.cos(ANGLE*(Math.PI/180));
            vBase1_s = Math.sin(ANGLE*(Math.PI/180));
        }

        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                if(dr !=0){
                  xx = polygonzh[polygonno][j].polyx+x1sv - midpointx;
                  yy = polygonzh[polygonno][j].polyy+y1sv - midpointy;
                  px =  parseInt(xx * vBase1_c - yy * vBase1_s)+midpointx;
                  py =  parseInt(xx * vBase1_s + yy * vBase1_c)+midpointy;
                } else {
                  px = polygonzh[polygonno][j].polyx+x1sv;
                  py = polygonzh[polygonno][j].polyy+y1sv;
                }
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 

}
//接合点からの多角形の描画（差異の計算なし）
function polygon2_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標ｘの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標ｙの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }

        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                  px = polygonzh[polygonno][j].polyx + midpointx;
                  py = polygonzh[polygonno][j].polyy + midpointy;
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 

}

//
//逆台形（接合点（始点、終点）描画
//
function invtrapezoid3_draw(){

        shapetype = robotcode[idy][4];
//      接合点（始点）の座標を取得する。
        invstratx = 0; invstarty = 0;
　　　　if(robotcode[idy][6] != "00"){
          invstart = "S" + robotcode[idy][6];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === invstart){
                  invstartx = jointbl[i].realadx;
                  invstarty = jointbl[i].realady;
                  break;
              }
           }
        }
//      接合点（終点）の座標を取得する。
        invendx = 0; invendy = 0;
　　　　if(robotcode[idy][7] != "00"){
          invend = "S" + robotcode[idy][7];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === invend){
                  invendx = jointbl[i].realadx;
                  invendy = jointbl[i].realady;
                  break;
              }
           }
       }

 

 

        inradius = parseInt(robotcode[idy][12]);
        inmdr = parseInt(robotcode[idy][13]);
        inlong = parseInt(robotcode[idy][15]);
//      角度を算出（右は、（３６０度）反転させる）
        dr = parseInt(robotcode[idy][11]);
        if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")){
              dr = 360 - dr;
        }
//      始点、終点から両端の座標を算出する。
        yp = Math.sin(dr*(Math.PI/180));
        xp = Math.cos(dr*(Math.PI/180));
        yp1 = Math.sin((dr+180)*(Math.PI/180));
        xp1 = Math.cos((dr+180)*(Math.PI/180));

        sy = (inradius*yp1+invstarty);
        sx = (inradius*xp1+invstartx);
        sy1 = (inradius*yp+invstarty);
        sx1 = (inradius*xp+invstartx);

        y1 = (inmdr*yp1+invendy);
        x1 = (inmdr*xp1+invendx);
        y2 = (inmdr*yp+invendy);
        x2 = (inmdr*xp+invendx);

//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);
        ctx.beginPath();
        ctx.moveTo(sx*mgf+dfsx,sy*mgf+dfsy);
        ctx.lineTo(sx1*mgf+dfsx,sy1*mgf+dfsy);
        ctx.lineTo(x2*mgf+dfsx,y2*mgf+dfsy);
        ctx.lineTo(x1*mgf+dfsx,y1*mgf+dfsy);

//全て座標を指定 逆多角形

        ctx.closePath();
        ctx.fillStyle = bordcolor[ocolno][wkcolor];
        ctx.fill();

        wcol = bordcolor[ocolno+1][wkcolor];

//     影の描画（色の数値を減らして影をつける）
        s1col = parseInt(wcol.substr(1,2),16);
        s2col = parseInt(wcol.substr(3,2),16);
        s3col = parseInt(wcol.substr(5,2),16);

        for(i=5;i > 0; i--){

          so1col = s1col - i*5;
          so2col = s2col - i*5;
          so3col = s3col - i*5;
          wkcolor = "rgb(" + so1col + "," + so2col + "," + so3col + ")";

          sax = 5 - i; say = 0;
          ctx.beginPath();
          ctx.lineWidth = 1*mgf;
          ctx.moveTo(sx*mgf+dfsx+sax,sy*mgf+dfsy+say);
          ctx.lineTo(x1*mgf+dfsx+sax,y1*mgf+dfsy-say);
//全て座標を指定（腕下・影）

          ctx.strokeStyle = wkcolor;
          ctx.stroke();
        }

}

function join_draw(){

       for(i = 0; i          ccenterx = jointbl[i].realadx;
          ccentery = jointbl[i].realady;
          cradius  = jointbl[i].radius;

          ctx.beginPath();
          ctx.fillStyle = bordcolor[ocolno][jointbl[i].colorno];
          ctx.arc(ccenterx*mgf+dfsx,ccentery*mgf+dfsy,cradius*mgf,0,Math.PI*2,false);
//        中心座標を指定（接合点）
          ctx.fill();
       }
}

function etc_syori(){

//    element = document.getElementById("idresult");
//    displayarea = " polayarea=" + polytext[0].substr(1,3);
//    element.innerHTML = displayarea;

}

テーブルデータからロボットの描画（テスト済みコーディング掲載）（１）

 

テキストエリア：myTEXT（ロボットデーター）
テキストエリア：myTEXTP（多角形座標）

描画２（ボタン：robotdraw()）
LOAD　（ボタン：polygontbl_load()）
LOAD2 （ボタン：robot_load()）

javascript（wrobotV303.js）

ロード時の実行（init()）

 

－－－－wrobotV303.js－－－

//図形を描画するキャンパスのエリア（領域）を確保する。
var canvas;

//キャンパスの幅と高さの値を保存する定数
WIDTH  = 640;
HEIGHT = 480;

VIEW_WIDTH  = 0;
VIEW_HEIGHT = 0;

var robotid = ["Robot101.png", "wFace101.png", "wRobot101.png"];
ROBOTS = 3;
var img_robot = []; //ロボットの顔や、その他、表示したいイメージのテーブル

//img_robotのテーブル（配列）をimageで定義し、
//robotidテーブル（配列）で指定した名前の画像を読込む。

    for(i=0;i
       img_robot[i] = new Image();
       img_robot[i].src = robotid[i];
    }

//描画するカラーの値を保存するテーブル領域（2次元）
var bordcolor = [
//ピンク系
 ["peachpuff", "bisque", "moccasin", "navajowhite", "wheat", "plum", "thistle"],
//ピンク系（１６進数表示）
 ["#ffdab9", "#ffe4c4", "#ffe4b5", "#ffdead", "#f5deb3", "#dda0dd", "#d8bfd8"],
//灰色系
 ["lightgrey", "silver", "darkgray", "slategray", "gray", "dimgray", "black"],
//灰色系（１６進数表示）
 ["#d3d3d3", "#c0c0c0", "#a9a9a9", "#708090", "#808080", "#696969", "#000000"],
//ピンク一色
 ["peachpuff", "peachpuff", "peachpuff", "peachpuff", "peachpuff", "peachpuff", "wheat"],
 ["#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#f5deb3"],
//灰色一色
 ["gray", "gray", "gray", "gray", "gray", "gray", "dimgray"],
 ["#808080", "#808080", "#808080", "#808080", "#808080", "#808080", "#696969"],
];

//カラーテーブルナンバー
var ocolno = 2;     //灰色

var username = ["ipad","iphone","android"];         //端末の名前

//描画位置のオフセット
var ofsx = 200,ofsy = 0;
var dfsx = 0,dfsy = 0;
var wofsx = 250,wofsy = 0;
//描画のサイズの倍数を指定
var mgf = 2;
var fmgf = 1;

var robotcode = [];                //ロボットデータテーブル
var bwr = 16,bhr = 70;               //ロボットデータテーブル（サイズ、横、縦）
var idy = 0;                       // 連携用インデックスｙ
var robotsu = 0;
var robotarea = " ";               //テキストエリアからの読込用
var robottext = [];                //テキストエリアの第一次分割エリア（行）
var robotitem = [];                //テキストエリアの第二次分割エリア（項目）
var robotitem2 = [];

//多角形読込エリア
var polyarea = " ";               //テキストエリアからの読込用
var polytext = [];                //テキストエリアの第一次分割エリア（行）
var polyitem = [];                //テキストエリアの第二次分割エリア（項目）
var polyitem2 = [];
var bw = 10,bh = 15; 
var polygonzh = [];
var polyysu = 0;
var polysu = 0;

//多角形テーブルレコードレイアウト
function polypiece() {
    this.flag  = 0;         //フラッグ　０：無効　１：有効
    this.polyx = 0;         //多角形ｘ座標
    this.polyy = 0;         //多角形ｙ座標
}

//接合点テーブル（配列）にプロパティを付与する関数
//接合点は、描画されるものは円です。
var jointbl = [];
var joinsumax = 30;
var joinsu = 0;

//接合点テーブルの項目
function piece() {
    this.kinds = "";          //種別
    this.timing = "";         //描画タイミング
    this.shapetype = "";      //図形種別
    this.colorno = "";        //色No
    this.midpointx = "";       //中点ｘ
    this.midpointy = "";       //中点ｙ
    this.fangle = 0;          //角度（前）
    this.radius = 0;          //半径
    this.flength = 0;         //前長さ
    this.length = 0;          //長さ
    this.realadx = 0;         //リアル座標ｘ
    this.realady = 0;         //リアル座標ｙ
}

//初期処理
function init(){
//ＨＴＭＬで指定したキャンパスをJavaScriptで使用する領域と結び付けて定義する。
    canvas = document.getElementById('world');
//キャンパスの幅と高さの指定
    canvas.width  = WIDTH;
    canvas.height = HEIGHT;
//２Ｄのグラフィックコントロールを取得
    ctx = canvas.getContext('2d');
//２Ｄのグラフィックコントロールで使用する文字のフォントを指定する。
    ctx.font = "24px 'MS　Pゴシック'";
//このＨＴＭＬを使用しているユーザを判別する。
    user = window.navigator.userAgent.toLowerCase();
    for(i=0; i
        if(user.indexOf(username[i]) > 0)break;
    }
//ウィンドウのユーザ名が入つているならＰＣと判別する。（マウス）
//以外（ヌルー）ならスマホと判断する。（タッチ）
    if(i
        document.addEventListener("touchstart", touchstart);
    }else{
        document.addEventListener("mousedown", mousedown);
    }
//多角形テーブルエリアを定義して確保する。
     polygonzh = new Array(bh);
     for(y=0; y
        polygonzh[y] = new Array(bw);
　　　　//行を項目に分ける。（￥ｔ）タブで分ける。
        for(x=0; x
　　　　　　//2次元の配列（テーブル）に収納する。
            polygonzh[y][x] = new polypiece;
        }
    }

}

//スマホ/タブレットのタッチイベントで起動する関数
function touchstart(e){
    if  (e.targetTouches.length == 1){
        touch = e.targetTouches[0];
        touchpice(touch.pageX ,touch.pageY);
    }
}

//ｐｃのマウスクリックイベントで起動する関数
function mousedown(e){
    touchpice(e.clientX ,e.clientY);
}

//取得座標が移動したときの処理。
function touchpice(tx,ty){
    element = document.getElementById("idselect");
}

function polygontbl_load(){
//テキストエリアからロボットデータを取り込む。
    polyarea = document.myFORM.myTEXTP.value;
//ロボットエリアのデーターを改行（￥ｎ）で分ける。
//行ごとにテーブルに入る。
    polytext = polyarea.split("\n");
    polyysu = 0;
    if(polytext[0].substr(1,3) === "多角形"){
        for(y=1; y
           if(polytext[y].substr(1,3) === "終わり") break;
　　　　    //行を項目に分ける。（￥ｔ）タブで分ける。

              polyitem = polytext[y].split("\t");
//              タブで分割出来ないときはスペースで分割する。
//              現在はコメント
//              if(polyitem[1] === "") {
//                 polyitem2 = polytext[y].split(" ");
//                 polyitem  = polyitem2;
//              }

　　　　    //2次元の配列（テーブル）に収納する。
            polyno = parseInt(polyitem[0]);
            polysu = parseInt(polyitem[1]);
            for(x=0; x
               polygonzh[polyno-1][x].flag = 1;
               polygonzh[polyno-1][x].polyx = parseInt(polyitem[x+2].substr(0,3));
               polygonzh[polyno-1][x].polyy = parseInt(polyitem[x+2].substr(4,3));
            }
            polyysu = polyysu + 1;
        }
     }
}

//ロボットデータの読込
function robot_load(){

//テキストエリアからロボットデータを取り込む。
    robotarea = document.myFORM.myTEXT.value;

//ロボットエリアのデーターを改行（￥ｎ）で分ける。
//行ごとにテーブルに入る。
    robottext = robotarea.split("\n");

//ｂｈの数だけテーブル(配列）にする。（ちなみにｈはハイ(高さ）です）
    robotcode = new Array(bhr);
    for(y=0; y

        if(robottext[y].substr(0,2) === "EE") break;
　　　　//ｂｗの数だけテーブル(配列）にする。（ちなみにｗはワイド（幅）です）
　　　　//行を項目に分ける。（￥ｔ）タブで分ける。

        if((robottext[y].substr(0,2) != "DD") && (robottext[y].substr(0,2) != "MM")){
            robotsu = robotsu + 1;
            robotcode[robotsu-1] = new Array(bwr);
//           タブで分割出来ないときはスペースで分割する。
//           現在はコメント
//            if(robottext[y].index0f("\t") === -1){
//                robotitem = robottext[y].split(" ");
//            } else {
//                robotitem = robottext[y].split("\t");
//            }
            robotitem = robottext[y].split("\t");
            for(x=0; x
　　　　　　    //2次元の配列（テーブル）に収納する。

                robotcode[robotsu -1][x] = robotitem[x];
　　　　　　    //ｌｅｎｇｔｈは、テーブル（配列）の数です。
　　　　　　    //ー１は、０から数えるので－１します。
            }
        }
    }

//接合部の座標を計算する。
    //接合点テーブルの初期定義
    jointbl = new Array(joinsumax);
    for(y=0; y
        jointbl[y] = new piece;
    }

    for(y=0; y
        //テーブル(配列）から接合点テーブルを編集する。
        //リアルの接合点の位置を算出する
       if(robotcode[y][0] === "11") {
          idy = y;
          join_calculate();
       }
    }

}