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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/zhoujiaaw/article/details/78327142

格式问题

• ESRI ArcInfo Generate文件格式 

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

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

 END   

END


以某一个字为例:


L1
8,6.5
8.5,7
9,8 
end        
L2          
10.5,6.5
9.5,8.5
end
L3          
7.5,8.5
9.5,8.5
11.5,8.5
end
L4          
7,10.5
9.5,10.5
11.5,10.5
end
L5          
9.5,8.5
9.5,10.5
9.5,11.5
9,12.5
7.5,14
end
L6          
9.5,11.5
10.5,12.5
11.5,13.5
end
L7
12.5,7
12.5,14.5
end
L8          
12.5,7
15,7
13,10
14.5,11
15,12
14.5,12.5
14,13 
13,12.5
end
代码描述:

要求:

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

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

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

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

结果:


源码:

<html>  
    <head>  
        <title>名称编码</title>  
    </head>  
        <body>             
            <input id="fileInput" type="file" οnchange="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.οnlοad=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> 



猜你喜欢

转载自blog.csdn.net/zhoujiaaw/article/details/78327142