map - 将 SVG map 路径元素转换为 XY 坐标

Question

我正在使用 SVG map 绘制一些数据。我需要获取被描述为 SVG 路径元素的 map 边框的 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 细胞)。目前它们超出了边界，因为我无法限制它们，因为我没有边界坐标。

Answer 1

您可以使用 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 reference 是值得的。还有JavaDocs对于您可能需要的功能。根据您的 svg 的复杂程度，您需要检查 vertex code ( VERTEX, BEZIER_VERTEX, CURVE_VERTEX, or BREAK )。