Получить центр пути SVG и VML - PullRequest
Новая
       30

Получить центр пути SVG и VML

2 голосов
/ 27 декабря 2011

Я пробую разные вещи с: http://jvectormap.owl -hollow.net

Я очень заинтересован в том, чтобы получить центр разных стран (поэтому я могу поставить небольшой маркер на страну).

Но я вроде как борюсь с этим, и я попробовал несколько вещей, таких как получение окружающего прямоугольника пути и затем получение центра от этого.

Но это своего рода неудача из-за некоторых форм некоторых стран. Например, США, где середина объемного блока находится в Канаде.

Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 27 декабря 2011

Просто учитывая данные SVG, предоставленные URL-адресом, в вычислительном отношении невозможно определить, какую часть США (или любую другую страну) следует рассматривать как основную / центральную часть.

Примерным решением будет подсчетНаибольшую заполняемую область в качестве основной области и рассчитать центр этой области.К сожалению, SVG API не предоставляет метода для вычисления площади.

То, что у вас осталось, - это возможность итерировать по каждому отдельному сегменту пути, вычислять их отдельные длины и реализовывать достаточно хороший алгоритм аппроксимации для нахождения центраОсновная часть.Помните, что только команды «lineto», «curveto» и «arcto» являются частью общей длины пути, которую вы можете получить, вызвав .getTotalLength() для элемента path.

Действительно примитивный скелет кода: 

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
    }
  }
};

Invoke like: 

var usPath, usCenterCoords;

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