2013-04-27 93 views
4

我正在使用SVG地图绘制一些数据。我需要获取描述为SVG路径元素的地图边界的XY坐标。将SVG地图路径元素转换为XY坐标

这里是我与

<path id="path9" fill="#FEFEE9" d="M920.059,219.437c0.127,1.93,0.201,3.877-0.029,5.803c-0.178,1.481-1.184,5.296-0.36,6.535 
    c1.039,1.563,4.821,3.389,6.673,3.596c1.609,0.18,5.432-0.127,6.617,0.441c0.4,0.874-0.001,1.517-0.168,2.396 
    c-0.069,0.37,0.633,3.127,0.752,3.716c1.961,1.148,3.784,2.506,5.716,3.698c1.087,0.67,2.413,1.076,3.386,1.913 
    c0.365,0.314,0.62,0.738,0.922,1.109c-0.016,1.154,0.506,3.383,1.086,4.377c0.135,0.232,0.789,1.036,1.063,1.116 
    c2.15,0.636,3.828-0.681,5.791-1.207c0.861-0.231,1.766-0.3,2.611-0.604c0.881-0.316,3.353-2.991,3.869-3.849 
    c2.478-1.148,3.059-0.635,5.38-2.728c1.101-0.992,4.065-4.614,5.544-4.467c0.447,0.044,0.893,0.115,1.336,0.174 
    c2.113,0.279,2.188,0.777,3.697,2.003c0.047,0.038,1.65,0.608,1.873,0.69c0.804-0.67,1.566-1.387,2.301-2.132l0.605-5.29 
    c0.268-2.339,0.69-6.967,3.691-7.332c2.594-0.315,4.773,1.322,7.347,1.322c0.692,0,4.183-1.588,4.554-2.079 
    c0.514-0.679,0.42-2.522,0.443-3.369c0.111-0.162,0.236-0.396,0.37-0.536c0.461-0.488,2.526-0.31,3.205-0.366 
    c1.001-0.082,1.985-0.316,2.976-0.476l0.729-0.638c2.227-0.24,4.326-1.121,6.552-1.373c0.393-0.569,2.722-2.864,3.288-3.083 
    c2.049-0.792,8.942-1.78,9.938-3.577c0.465-0.841-0.443-2.831,0.233-3.917c0.923,0.353,1.54,1.016,2.575,1.151 
    c-0.166-1.493-1.109-2.96-0.582-4.482l1.215-0.951c1.877,0.542,3.863,0.518,5.793,0.69c1.293-0.857,4.697-2.529,6.225-1.804 
    c1.408,0.668,0.947,4.653,3.629,5.542c0.715-0.29,1.691-1.052,1.951-1.8c-0.627-2.991-0.695-2.316-2.588-4.539l0.305-2.169 
    l1.818-1.26l2.143-0.162c0.751,0.488,1.803,0.99,2.443,1.588c0.814,0.761,2.076,3.795,2.711,4.324 
    c0.436,0.363,1.728,0.591,2.296,0.6c0.26,0.004,1.422-0.569,1.741-0.709l0.5-0.751c-0.501-0.794-1.596-1.51-2.432-1.917 
    c-0.246-1.607-1.506-2.717-2.244-4.094l0.496-0.642l0.84-0.301c0.77,0.181,2.451,0.857,2.799,1.599 
    c1.125-0.17,2.313-0.491,3.454-0.343c3.124,0.405,9.103,2.854,8.682,6.78c2.558,2.942,4.063,3.596,6.68,5.965 
    c1.634,1.479,2.741,3.536,3.966,5.347c0.487,0.72,0.84,1.612,1.467,2.222c1,0.973,2.729,1.023,3.312,2.433.......//more elements//................z"/> 

这是实际的路径元素的只是一个小片段工作路径元素。

它包含很多'c'和'l'元素。图像是1807x1331像素。我需要获取XY坐标,以便我可以使用边框在可视化中标记边界。 我正在使用Processing 2.0进行可视化。

我可以将路径元素转换为XY坐标吗?或者有什么办法来标记边界?想象一下,我必须在领土边界内制造细胞(Voronoi细胞)。目前它们超出了边界,因为我不能限制它们,因为我没有边界坐标。

+0

你可以发布完整的SVG吗? – 2013-04-28 03:30:57

+0

@GeorgeProfenza这里是我正在使用的svg图像 [link] http://en.wikipedia.org/wiki/File:Afghanistan_location_map.svg 我已经下载了完整的res地图。 – Vijay 2013-04-29 02:45:54

+0

我需要找到阿富汗的边界统筹。 – Vijay 2013-04-29 02:48:52

回答

3

您可以使用PShape的 getVertexCount()getVertex()方法:使用 getVertex()

for(int i = 0 ; i < yourPShape.getVertexCount(); i++) println("vertex["+i+"]:"+yourPShape.getVertex(i)); 

我遇到了一个错误:

java.lang.ArrayIndexOutOfBoundsException: 2 

所以getVertex()可能仍然是一个有点儿车。 幸运的是getVertexX()getVertexY()仍然工作:

void setup(){ 
    PShape map = loadShape("Afghanistan_location_map.svg"); 
    size((int)map.width,(int)map.height); 
    //fetch the border shape - peaked at the path name using Illustrator 
    PShape border = map.getChild("path157"); 
    //manually traverse the path 
    beginShape(); 
    for(int i = 0 ; i < border.getVertexCount(); i++){ 
    vertex(border.getVertexX(i),border.getVertexY(i)); 
    } 
    endShape(); 
} 

注意,你可以拥有线(L)和曲线(C),所以它的价值不只是在看普通PShape reference也是JavaDocs你可能需要的功能。根据您的svg有多复杂,您需要检查vertex codeVERTEX, BEZIER_VERTEX, CURVE_VERTEX, or BREAK)。

+0

我尝试了上述方法,但它不工作。 getVertex不返回坐标。 – Vijay 2013-04-29 02:50:40

+0

@Vijay我已经测试过你的形状并更新了代码 – 2013-04-29 09:30:22

+0

@Vijay另外,你可以使用PShape的contains(x,y)检查一个点是否在形状内:http://processing.googlecode.com /svn/trunk/processing/build/javadoc/core/processing/core/PShape.html#contains(float,float)method但[be aware](http://stackoverflow.com/questions/12327606/pshapesvg-contains- function-doesnt-work-when-scale-is-applied/12350632#12350632)如果您在PShape实例上使用转换。 – 2013-04-29 10:57:41