テーブルデータからロボットの描画（テスト済みコーディング掲載）（２）
//
//ロボットの描画
//
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;
}
