получить значение области, выведенное из `<path>` информации .svg - PullRequest
Новая
       11

получить значение области, выведенное из `<path>` информации .svg

0 голосов
/ 26 апреля 2018

Давайте возьмем пример этого простого .svg: enter image description here

Для этой формы я получаю этот код: 

   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <path d="M1000,500c0,276.143-223.857,500-500,500c-276.143,0-57.729-467.521-313.389-571.889C-252.278,248.944,223.858,0,500,0
        C776.143,0,1000,223.857,1000,500z"/>
    </svg>

Есть способ получить значение площади, выведенное из <path> информации .svg? 

<path d="M1000,500c0,276.143-223.857,500-500,500c-276.143,0-57.729-467.521-313.389-571.889C-252.278,248.944,223.858,0,500,0
        C776.143,0,1000,223.857,1000,500z"/>

1 Ответ

0 голосов
/ 28 апреля 2018

Вы можете преобразовать путь в многоугольник, а затем использовать алгоритм «площадь многоугольника».

Точность будет зависеть от того, сколько очков вы используете во время преобразования, и от любых ошибок с плавающей запятой, которые могут накапливаться.

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

function calculateAreaOfPolygon(points)
{
  if (points.length < 3)
    return 0;
  var area = 0, n = points.length;
  for (var i=0; i<(n-1); i++) {
    area += points[i].x * points[i+1].y;
    area -= points[i+1].x * points[i].y;
  }
  area += points[n-1].x * points[0].y;
  area -= points[0].x * points[n-1].y;
  return Math.abs(area) / 2;
}

function convertPathToPolygon(pathId)
{
  var pathElem = document.getElementById(pathId);
  var pathLen = pathElem.getTotalLength();
  var numSteps = Math.floor(pathLen * 2);
  var points = [];
  for (var i=0; i<numSteps; i++) {
    var p = pathElem.getPointAtLength(i * pathLen / numSteps);
    points.push(p);
  }
  return points;
}

var pathPointsArray = convertPathToPolygon("mypath");

console.log(calculateAreaOfPolygon(pathPointsArray));
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <path id="mypath" d="M1000,500c0,276.143-223.857,500-500,500c-276.143,0-57.729-467.521-313.389-571.889C-252.278,248.944,223.858,0,500,0
        C776.143,0,1000,223.857,1000,500z"/>
</svg>
...