美文网首页
20160805周国康作业-绘制实心/空心图形

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

作者: ZGKzm | 来源:发表于2016-08-08 10:11 被阅读0次
    //写在前面
    //局限性强,输入坐标按照左上右上右下左下顺序,未作判断
    //小坐标系,固定插值描点命中率太低,所以斜线只支持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();
    

    相关文章

      网友评论

          本文标题:20160805周国康作业-绘制实心/空心图形

          本文链接:https://www.haomeiwen.com/subject/ssxrsttx.html