将SVG地图路径元素转换为XY坐标

Question

将SVG地图路径元素转换为XY坐标

5

我正在使用SVG地图绘制一些数据。我需要获取描述为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 px。我需要获取XY坐标，以便可以使用边框来标记我的可视化中的边界。

我正在使用Processing 2.0进行可视化。

我能否将路径元素转换为XY坐标？或者是否有任何方法可以标记该边界？想象一下，我必须在领土边界内制作单元格（Voronoi单元格）。目前，它们超出了边界，因为我无法限制它们，因为我没有边界坐标。

- Vijay

你能发布完整的SVG吗？ - George Profenza

@GeorgeProfenza 这是我正在使用的SVG图像 [链接] http://en.wikipedia.org/wiki/File:Afghanistan_location_map.svg 我已经下载了完整分辨率的地图。 - Vijay

我需要找到阿富汗的边界坐标。 - Vijay

你是否想要找到路径的边界框的X,Y坐标？边界框是包围路径的最小矩形。 - nicholaswmin

@NicholasKyriakides 我正在尝试找到阿富汗的轮廓坐标，即该国的实际领土边界，而不是边界框。 - Vijay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Profenza · Accepted Answer

你可以使用 PShape 的 getVertexCount() 和 getVertex() 方法：

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

在使用getVertex()时遇到了错误：

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参考，还要查看JavaDocs以获取可能需要的功能。根据您的SVG的复杂程度，您需要检查vertex code(VERTEX、BEZIER_VERTEX、CURVE_VERTEX或BREAK)。