20160805周国康作业-绘制实心/空心图形

2016-08-08  本文已影响0人  ZGKzm
//写在前面
//局限性强,输入坐标按照左上右上右下左下顺序,未作判断
//小坐标系,固定插值描点命中率太低,所以斜线只支持45度角
//深化的话 放大坐标系,描点可以用三角函数来计算,有效扩大描点的命中率
//使用了两种方法:1、通过单纯的描点画实心图形 2、以画线的方式画空心图形
var printStr="";
var tArray = new Array();
//初始化、重置坐标系  10*10
function InitStr(){
for(var k=0;k<10;k++){
  tArray[k]=new Array();
for(var j=0;j<10;j++){
  tArray[k][j]="0";
    }
  }
}
function Backstr() {
  printStr="";
}
function Wrap() {
  printStr+="\n";
}
function AddChar() {
  printStr+="*";
}
function AddSpace(){
  printStr+=" ";
}
//描点画线  四种算法,横线、竖线、左倾45、右倾45
//坐标系较小,不考虑其他角度
function line(x1,y1,x2,y2){
   if(x1==x2){
    for(var x=0;x<=y2-y1;x++){
      tArray[y1+x][x1]=1;
    }
  }else if(y1==y2){
     for(var x=0;x<=x2-x1;x++){
       tArray[y1][x1+x]=1;
     }
   }else if(x1>x2&&y1<y2) {
     for(var x=0;x<=x1-x2;x++){
       tArray[y1+x][x1-x]=1;
   }
   }else{
     for(var x=0;x<=x2-x1;x++){
       tArray[y1+x][x1+x]=1;
   }
 }
}
//全描点画实心图形
//可以改成带参数来决定空心实心,稍作修改即可
function Point(x1,y1,x2,y2,x3,y3,x4,y4) {
  var n=0;
  for (var i = 0; i<10; i++) {
    if(i>=y1&&i<=y4){
     if(x2-x1==x3-x4){
       for(var j = 0; j <= x2-x1; j++)
          {tArray[i][x1+j]=1;}
      }else{
        for(var j = 0; j <= x2-x1+n; j++)
           {tArray[i][x1-i+y1+j]=1;}
           n+=2;
      }
    }
  }
}
//四边形 三角形就是上边两个顶点重合
function FourB(x1,y1,x2,y2,x3,y3,x4,y4) {
  line(x1,y1,x2,y2);
  line(x2,y2,x3,y3);
  line(x4,y4,x3,y3);
  line(x1,y1,x4,y4);
}
//拼接printStr字符串并展示
function Show() {
  for (var i = 0; i < 10; i++) {
     for (var j = 0; j < 10; j++) {
          if(tArray[i][j]==1){
            AddChar();
          }else{
            AddSpace();
          }
      }
     Wrap();
   }
   console.log(printStr);
 }
 console.log('打印坐标为 2,0,7,0,7,5,2,5 的实心矩形');
 InitStr();
 Backstr();
 Point(2,0,7,0,7,5,2,5);
 Show();
 console.log('打印坐标为 5,0,5,0,8,3,2,3 的实心三角形');
 InitStr();
 Backstr();
 Point(5,0,5,0,8,3,2,3);
 Show();
 InitStr();
 Backstr();
 console.log('打印坐标为 3,0,6,0,9,3,0,3 的实心梯形');
 Point(3,0,6,0,9,3,0,3);
 Show();
 //三角形
InitStr();
Backstr();
console.log('打印坐标为 5,0,5,0,8,3,2,3 的空心三角形');
FourB(5,0,5,0,8,3,2,3);
Show();
//矩形
InitStr();
Backstr();
console.log('打印坐标为 2,0,7,0,7,5,2,5 的空心矩形');
FourB(2,0,7,0,7,5,2,5);
Show();
//梯形
InitStr();
Backstr();
console.log('打印坐标为 3,0,6,0,9,3,0,3 的空心梯形');
FourB(3,0,6,0,9,3,0,3);
Show();
上一篇下一篇

猜你喜欢

热点阅读