常州做的网站的公司哪家好,搭建网站注册完域名应该怎么做,定制手机微网站,网站排名是什么意思背景
上一章我们讲过#xff0c;当标注平台解析完数据后#xff0c;会把数据存入Graph#xff0c;数据格式为osmEntity。为了渲染出osmEntity#xff0c;我们还需要将osmEntity转换为fabric.Object的格式。本章介绍这一步的具体实现以及一些坑。
转换原理
我们知道…背景
上一章我们讲过当标注平台解析完数据后会把数据存入Graph数据格式为osmEntity。为了渲染出osmEntity我们还需要将osmEntity转换为fabric.Object的格式。本章介绍这一步的具体实现以及一些坑。
转换原理
我们知道osmEntity具有geometry属性这个属性是一个标准的Geometry格式。即
{type: Point,coordinates: [10, 10]
}
对于fabric.Object而言geometry是无法直接使用的需要进行转换。而且不同的Object需要的参数有些许差异。转换的伪代码如下
class osmEntity {// osmEntity转fabric.ObjecttoFabricObject() {let object null;const options this.toFabricCoordinate();switch(type) {case Point: object new NPoint(options);;case Polyline: ;case Polygon: ;case Rectangle: ; }return object;},// 坐标转换toFabricCoordinate() {// ...}
}
点
NPoint继承自fabric.Circle其坐标参数为
{left: 10,top: 10
}
因此其toFabricCoordinate可写为
toFabricCoordinate() {const loc this.geometry.coordinates;return {left: this.loc[0], top: this.loc[1]};
}
线
NPolyline继承自fabric.Polyline其坐标参数为
{left: 10,top: 10,points: [{x: 0, y: 0}, {x: 5, y: 0}]
}
这边注意找到线的最小外界矩形的左上角点所有点都转为以该点为坐标原点。
toFabricCoordinate(){let result;const coordinates this.geometry.coordinates;const extent bbox(this.geometry);result.left extent[0];result.top extent[1];result.points coordinates.map((p) {return { x: p[0] - extent[0], y: p[1] - extent[1] };});return result;
}
矩形
NRectangle继承自fabric.Rect其参数为
{left: 10,top: 10,width: 100,height: 100
}
同样地转换函数为
toFabricCoordinate(){let result;const extent bbox(this.geometry); // 矩形的geometry存的是polygonreturn {left: extent[0],top: extent[1],width: extent[2] - extent[0],height: extent[3] - extent[1]}
}
多边形
NPolygon继承自fabric.Path其参数如下
{path: M 10 10 Z,left: 10,top: 10
}
这里我们需要一个方法将geojson转为svg path的方法。这里参考一些开源仓库写法如下
toFabricCoordinate(){const extent bbox(this.geometry);let result;result.left extent[0];result.top extent[1];let mainStr, holes;// 多边形外环mainStr this.getCoordString(coordinates[0], result.left as number, result.top as number);// 多边形孔洞if (coordinates.length 1) {holes coordinates.slice(1, coordinates.length);}let path M mainStr;if (holes) {for (var i 0; i holes.length; i) {path M this.getCoordString(holes[i], result.left as number, result.top as number);}}path Z;result.path fabric.util.makePathSimpler(fabric.util.parsePath(path)); // string转数组参考fabric源码return result;
},
getCoordString(coords, left, top) {let coordStr coords.map((coord) coord[0] - left , (coord[1] - top));return coordStr.join( );
}
预告
下一章我们讲讲编辑器里解决性能问题常用的sketchLayer架构。
