people9635 / image-vector Goto Github PK

现有情况下，矢量化的方案主要有两种(这里只针对canvas)：
1、基于要素图层的矢量，这也是大多数情况下的矢量，这样可以很好做拓扑关系；
2、基于描述性的矢量，就是没有图层关系，只是表明坐标点范围内是什么颜色的地块。

//des:创建点文件
//@x:横坐标
//@y:纵坐标
//@fileName:需要保存的文件名
//url: domain/create?x=112&y=678&fileName=polygon_text
app.get('/create', create);

//des:获取目录下指定json文件的json对象
//@dirName:
//@fileName:
//url: domain/get?dirName=json&fileName=polygon_text
app.get('/get', get);

//des:将点数据转化成可用坐标数据
//@fileNames:当isMany传入参数为1的时候，fileNames＝file1@file2@file2的形式;
//否则只为fileNames=fileName
//[@isMany]:当需要处理多文件的时候传入
//url:domain/compile?fileNames=xxx[&isMany=1]
app.get('/compile', compile);

//des:列出目录下面的文件
//@dirName:目录名称
//url:domain/dir?dirName=xxx
app.get('/dir', dir);

//des:数据合并
//@fileNames:多文件，以@分割，例如fileNames＝file1@file2@file2
app.get('/contact', contact);

//des:数据压缩
//@fileName需要压缩的文件名
//url:domain/dist?fileName=xxx
app.get('/dist', dist);

2、pc客户端
pc客户端调用的是node.js提供的服务，因此，简单的数据处理使用pc客户端即可。

2、启动pc客户端
（1）点击image-vector/index.html即可访问工具的首页
（2）这时你会看见一只海豚，当然你可以选择自己的图片；修改index.html中
<img class="img" src="img/youyou.png"/>的图片即可，建议小图标放大4倍。

3、数据处理
（1）第一步：
选中单选按钮，比如选中“多变形”，那么采集点就会按照闭合多边形采集；输入文件名，比如“bluebody“蓝色的身
体，那么服务端就会生成对应的polygon_bluebody的文件；鼠标移入到蓝色的边框中，在需要采集点的“海豚身体”
上采集点，如下图，就会出现红色“＋”字和右边的点位信息

(2)矢量完成后，刷新页面，服务端生成的数据格式如下,存放在service/data/xxx
	89	312
	89	312
	91	307
	91	303
	90	299
	90	294
	91	289
	92	284
（3）将相应的坐标点位数据生成可以测试使用的json格式，点击将右边的数据添加至右边，点击数据转化。生成的数
据文件存放在server/json/polygon_body.json.可以通过URL访问：
http://127.0.0.1:3000/get?dirName=json&fileName=polygon_body

（4）可以再回到第一步，处理接下来的其他数据图层；如果处理完成，需要对所有的json文件合并，则可以使用数据
合并功能, 如下图。文件存放在service/contact/目录下：

（5）如果想更好的减少流量，可以进一步的压缩，使用数据压缩功能，这里是简单的压缩，建议依旧业务进一步处理，
比如长位数据变短位；减少key的字节大小等。可以点击链接获取压缩完成的数据。

canvas代码很简单，主要将数据分图层渲染。
（1）定义了对应图层的颜色表：
	//颜色对应表
	var COLOR_LIST = {
		BODY: '#63CEF6',
		DUPI: '#FFF',
		EYE: '#034E68',
		ZUIBA: '#0089B5',
		TOUQUAN: '#BDF9FB',
		JIUWO: '#FFBFE3',
		QIPAO: '#C9E8FB',
		BISHANG: '#46BEEF',
		BIXIA: '#54C5F2',
		GO: '#B1DBF2'
	};
（2）定义多边形、线、圆、文字等绘制规则；这一块主要基于服务返回的数据结构调整
	//draw polygon
	function drawPolygon(data, part, color){		
		addDrawFunc(data, part, color, function(xys){
			context.moveTo(xys[0], xys[1]);
			for(var i = 2; i < xys.length; i++){
				if(i % 2 !== 0){
					context.lineTo(xys[i-1], xys[i]);
				}
			}
		});
	}