javascript - 获取 SVG 路径和 VML 的中心

Question

我正在尝试不同的东西：http: //jvectormap.owl-hollow.net

我对获得不同国家的中心非常感兴趣（所以我可以在国家上放置一个小标记）。

但我有点挣扎，我已经尝试了几件事，比如获取路径的周围盒子，然后从中获取中心。

但由于某些国家的某些形状，它有点失败。例如，环绕框的中间在加拿大的美国。

谁能帮我吗？

Answer 1

仅考虑 URL 提供的 SVG 数据，在计算上不可能找出美国（或任何其他国家）的哪个部分来考虑主要/中心部分。

一个近似的解决方案是将最大的可填充区域计为主要区域并计算该区域的中心。不幸的是，SVG API 没有提供面积计算的方法。

剩下的就是迭代每个单独的路径段，计算它们各自的长度并实现一个足够好的近似算法来找到主要部分的中心。请注意，只有“lineto”、“curveto”和“arcto”命令是总路径长度的一部分，您可以通过.getTotalLength()在路径元素上调用来获得。

一个非常原始的代码骨架：

var getCenterOfCountry = function (path) {

  var posX, posY, i, ii, seg;

  posX = 0;
  posY = 0;

  for (i=0, ii=path.pathSegList.numberOfItems; i<ii; i++) {

    seg = path.pathSegList.getItem(i);

    switch (seg.pathSegTypeAsLetter) {
      case 'z':
      case 'Z':
        // handle case close path, update pos
        break;
      case 'M':
        // handle case moveto abs, update pos
        break;
      case 'm':
        // handle case moveto rel, update pos
        break;

      // ... handle all remaining cases, remember to update pos

      default:
        // handle case path segment unknown
    }
  }
};

像这样调用：

var usPath, usCenterCoords;

usPath = document.querySelector('#jvectormap1_us');
usCenterCoords = getCenterOfCountry(usPath);