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

格式问题

• ESRI ArcInfo Generate文件格式

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

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

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>

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

js空间平面坐标变换（涉及文件读取，文本提取数字，特别是x,y点，以及html下拉框设计）
要求在上一篇博客"名称编码"的基础上实现 1.名字的左斜变换 2.名字的耸肩变换 3.名字的比例变换 4.名字的旋转变换 5.名字的对称变换 6.名字的平移变换变换原理结果展 ...
教你用html+js制作一个自己的点名系统，实例代码分享
简介教你用html+js制作一个自己的点名系统,实例代码如下. 效果代码 HTML <div class="wrapper"><h1 align=" ...
使用 js 实现文本过多时隐藏部分文本
使用 js 实现文本过多时隐藏部分文本情景描述: 有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个[查看全文],让用户选择是否查看全部解决方法: 第一步:在一个 id 为 ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用Java ...
采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜 ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
滚轮y坐标html,web交互之js事件
前言事件是用来实现js和html之间交互的,可以用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(js)与页面的外观(htm ...
JS单曲调用百度mp3音乐播放器代码
在网上找的单曲调用百度mp3音乐播放器的代码,改了改,文本框输入歌曲名,中文逗号,歌手名,回车就可以试听了.几点说明: 百度音乐api 音乐文件地址,span,p,div,等都可以,ID 必须是so ...

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

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

最新文章

热门文章