Test trafień tekstu SVG

Question

Próbuję zaimplementować wykrywanie kolizji dla elementów tekstowych SVG przy użyciu JavaScript po stronie klienta. Test trafności powinien sprawdzić, czy jakikolwiek glif tekstu pokrywa się z jakimkolwiek glifem innego elementu tekstowego. Od getBBox i getExtentOfChar nie są dokładne, potrzebuję niestandardowego rozwiązania.

Moim pierwszym podejściem było uzyskanie koloru każdej współrzędnej/piksela elementu i wykonanie testu trafień ręcznie, ale to nie działa, ponieważ nie można uzyskać koloru współrzędnych. Wymagałoby to dodatkowego płótna, aby uzyskać kolory pikseli -> okropne obejście.

Teraz myślę o konwersji tekstu lub glifów na wielokąty w celu testowania trafień. Czy to możliwe? Czy ma ktoś inne podejście do testowania trafień opartych na glifach?

Pozdrawiam

Answer 1

chodzi o przebojowym-testów opartych pikseli - po przełączeniu do HTML5 Canvas, to staną się możliwe. Kilka projektów zapewnia łatwe przejście z SVG do Canvas, np. fabric.js. See a comparison table here.

Jeśli chodzi o podejście oparte na poligonie - możliwe, ale trudne. Możesz konwertować tekst lub glify na wielokąty (ścieżki) za pomocą jakiegoś narzędzia (np. Tekst do ścieżki Inkscape'a). A potem będą obliczenia. Tworzenie ogólnego rozwiązania dla dowolnego tekstu będzie wymagało wiele pracy. Jeśli jednak tekst się nie zmieni, ręczne narysowanie tekstu za pomocą ścieżek może być szybkim i brudnym rozwiązaniem.

Answer 2

Naprawdę wkraczasz w świat bólu i problemów z przeglądarką. W efekcie wykonałem niestandardowe renderowanie ścieżki czcionek, aby uzyskać całkowitą spójność tekstu o długości o łącznej długości. Nie chcę nawet myśleć o uderzeniu glifem.

Jednym z problemów jest na przykład to, że firefox (co najmniej 3.6) i iirc również niektóre wersje opery mają pewien błąd zaokrągleń podczas skalowania, więc gdy skaluje się element-rodzic przytrzymujący tekst i skaluje tekst przez odwrotność tej skali , wtedy odstępy między literami będą nieco inne niż bez skali. (Ponieważ każda litera musi zaczynać się od liczby parzystej lub coś podobnego, problem można rozwiązać, mnożąc zarówno wartość wyższą, jak i niższą, z wartością 10000, ale to już inna historia)

Wpływ na wydajność przy użyciu ścieżki w porównaniu z tekstem jest niestety dość zauważalny. Jeśli twoje płótno wykonuje jakąkolwiek formę animowanego przesuwania lub powiększania, powinieneś przełączyć się na czyste elementy tekstowe podczas animacji, a po statycznym włączyć renderowanie ścieżki w celu uzyskania dokładności.

Konwersja czcionek svg na ścieżki jest bardzo łatwa, jest tekstem jawnym i używa dokładnie tego samego formatu, co element ścieżki. (uważaj jednak na licencje osadzania czcionek!) Pamiętaj także o rozmiarze pliku, ponieważ nie możesz używać czcionek z systemu użytkownika,)