您的位置：首页 > Web前端 > JavaScript

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

2017-10-24 10:51 1196 查看

格式问题

• 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>
<ti
4000
tle>名称编码</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
=-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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航