Tato dokumentace popisuje výpočet plochy složitých SVG prvků. K dispozici jsou tři algoritmy.

Všechny algoritmy potřebují ID kořenového SVG prvku. V demu je to tutorial_svg Algoritmus vyhodnocuje každý prvek s třídou area-calculate. 

<rect x="352" y="1649" width="774" height="178" fill="#90929C" class="area-calculate random-generate" areagroup="2"></rect>

1. Lazy algoritmus

Algoritmus vzorkuje každý bod v SVG a ověřuje, zda leží uvnitř polygonu. Všechny takové body se sečtou jako celková plocha sloučených polygon;.

const areaCalculator = new svgAreaCalculation();
const area = areaCalculator.lazyStupidAreaCalculation('tutorial_svg');
  • Snadná implementace
  • Velká spotřeba výkonu
  • Nepřesný kvůli omezení pixelů (hraniční body mohou být chybně klasifikovány).

2. Lehoczkyho heuristický algoritmus

Algoritmus vezme vzorek bodů z každého SVG prvku a testuje, zda jsou v jiných polygonech, aby zjistil, kolik procent polygonu je zakryto jiným polygonem.

Ilustrace SVG heuristiky
  1. První (černý) obdélník má plochu a1 * b1.
  2. Druhý (červený) obdélník má plochu a2 * b2, ale protíná se s černým.
  3. Vygenerujte v červeném obdélníku náhodné body. Příklad: 10 bodů.
  4. 8 bodů neleží uvnitř černého tvaru, takže plocha je (8 / 10) * (a2 * b2).
  5. Výsledná plocha obou obdélníků je a1 * b1 + 0.8 * a2 * b2.
const areaCalculator = new svgAreaCalculation();
const area = areaCalculator.areaInSvgWithIntersection('tutorial_svg', numberOfRandomPoints);
  • LIT_RANDOM_POINTS = 1000 — Rychlé, nízká přesnost
  • MOD_RANDOM_POINTS = 10000 — Nejlepší kompromis (doporučeno)
  • HIGH_RANDOM_POINTS = 100000 — Vysoká přesnost, pomalé
  • Při vysokém počtu bodů dostatečně přesné
  • Efektivní pro malý počet prvků
  • Pomalé pro velký počet prvků

3. Lehoczkyho algoritmus slučování polygonů

Algoritmus sloučí všechny SVG prvky do jednoho či více polygonů (včetně mezer), plochu spočítá pomocí Shoelace vzorce a plochy mezer odečte.

const intersectElements = new svgAreaIntersection('tutorial_svg');
const area = intersectElements.polygonIntersectionInSvg(show, redraw, color, opacity, group);
  • Rychlé a přesné
  • Někdy sloučí polygony špatně, pokud mají hrany poblíž sobě.

4. Testování

  • 10 polygonů — 32 378 ms — 1 056 609 px — odchylka: -5 218 px
  • 50 polygonů — 270 252 ms — 3 730 421 px — odchylka: -2 915 px
  • 100 polygonů — 456 986 ms — 3 711 372 px — odchylka: -7 690 px
  • 10 polygonů, 1000 bodů — 55 ms — 1 048 854 px — odchylka: 2 537 px
  • 10 polygonů, 10000 bodů — 518 ms — 1 050 992 px — odchylka: 399 px
  • 10 polygonů, 100000 bodů — 4 769 ms — 1 051 543 px — odchylka: -152 px
  • 50 polygonů, 1000 bodů — 1 664 ms — 3 632 566 px — odchylka: 94 940 px
  • 50 polygonů, 10000 bodů — 15 994 ms — 3 696 840 px — odchylka: 30 666 px
  • 50 polygonů, 100000 bodů — 160 527 ms — 3 717 148 px — odchylka: 10 358 px
  • 100 polygonů, 1000 bodů — 6 742 ms — 3 721 066 px — odchylka: -17 384 px
  • 100 polygonů, 10000 bodů — 67 215 ms — 3 710 963 px — odchylka: -7 281 px
  • 100 polygonů, 100000 bodů — 663 222 ms — 3 696 769 px — odchylka: 6 913 px
  • 10 polygonů — 23 ms — 1 051 391 px — odchylka: 0 px
  • 50 polygonů — 267 ms — 3 727 506 px — odchylka: 0 px
  • 100 polygonů — 369 ms — 3 703 682 px — odchylka: 0 px