js+html空间数据编码问题--以姓名为例（代码设涉及文件读取，文本数字提取，特别是文本x,y坐标的提取）

来源：互联网发布：php周末培训班编辑：程序博客网时间：2024/05/18 17:55

格式问题

• ESRI ArcInfo Generate文件格式

• 点数据格式 <ID>, <X,Y> , {Angle},{Scale} END

• 线数据格式 <ID> <X,Y>

END

以某一个字为例：

L18,6.58.5,79,8 end        L2          10.5,6.59.5,8.5endL3          7.5,8.59.5,8.511.5,8.5endL4          7,10.59.5,10.511.5,10.5endL5          9.5,8.59.5,10.59.5,11.59,12.57.5,14endL6          9.5,11.510.5,12.511.5,13.5endL712.5,712.5,14.5endL8          12.5,715,713,1014.5,1115,1214.5,12.514,13 13,12.5end

代码描述：

要求：

1、绘制16x16网格，并在其上书写实习人的姓名，字体采用等线体

2、依据网格对网格中的汉字笔画进行几何特征的编码

3、按照ArcInfo的Gen格式形成编码文件（上图）

4、编写程序读取Gen格式文件，并将结果绘制在屏幕上

结果：

源码：

<html>      <head>          <title>名称编码</title>      </head>          <body>                         <input id="fileInput" type="file" onchange="processFiles()"/>            <br>            <canvas id="myCanvas" width="1000" height="600" style="border:1px solid #c3c3c3">your browser does not support the canvas tag </canvas>                        <script>                  function processFiles(){                    var file=document.getElementById("fileInput").files[0];                    var reader=new FileReader();                    reader.readAsText(file);                    reader.onload=function(e)                    {                        var str = this.result;//读取文本                        var number = new Array();                        number= digitalExtraction(str,number);//提取数字并存入数组                        draw(number);//画图                    }                                    }                //提取数字，并存入数组               function digitalExtraction(str,number){                    var heap= str.replace(/[^0-9.L]/ig,"A");                    var numcharacter="";//存储数字字符                    var number =new Array();//提取数字数组                    var i=0;                    var flag=0;//heap字符串当前标记                    var n=0;//标识数字与字符转换位置                    var character=heap[flag];//获取字符串的一个字符                   // document.write(heap);                    while(character!=null){                        if(character=="L"){                             number[i++]=-1;                             flag+=2;                             character=heap[flag];                         }                        if(character!="A"){                            n=1;                            numcharacter+=character;                          }                        else{                            if(n){                                number[i++]=parseFloat(numcharacter);                                numcharacter="";                                n=0;                            }                        }                         character=heap[++flag];                    }                                       return number;               }               function draw(number){                    var canvas=document.getElementById('myCanvas');                                        var cxt=canvas.getContext('2d');                     var n= number.length;                    number[n]=-1;                    var n= number.length;                   var flag=0;                   var x= new Array();                   var y =new Array();                   var j=0;                    for(var i=1,j=0;i<n;i++){                        if(number[i]!=-1){                            x[j]=number[i]*10;                            y[j]=number[++i]*10;                            j++;                        }else{                            cxt.moveTo(x[0],y[0]);                            for(var k=1;k<j;k++){                                cxt.lineTo(x[k],y[k]);                            }                            cxt.stroke();                            j=0;                        }                    }                                   }                        </script>           </body>  </html>

阅读全文

1 0