PerfectVector
Autor: Irene Kim

AutoTrace: PNG do SVG z opcją linii środkowej

Uruchom polecenie linii środkowej AutoTrace na pliku PNG, zapisz plik SVG i sprawdź jego atrybuty obrysu, atrybut wypełnienia i otwarte ścieżki podrzędne, zanim potraktujesz rysunek jako jedną ciągłą trasę.

7 min czytania
Na tej stronie

Aby przekonwertować plik PNG na format SVG z linią środkową za pomocą samodzielnego interfejsu CLI AutoTrace, dodaj --centerline, poproś o wyjście SVG i nazwij zapisany plik. Następnie sprawdź geometrię. Nasza kontrolka AutoTrace 0.40.0 utworzyła ścieżkę narysowaną obrysem SVG i bez wypełnienia kolorem, ale ten jeden element ścieżki zawierał dwie oddzielne otwarte ścieżki podrzędne. Mała liczba elementów ścieżki SVG nie jest dowodem na to, że trasa rysowania jest ciągła.

Jeśli zamiast tego część Twojej grafiki wymaga konturowych kształtów z wypełnieniem kolorem, zacznij od PerfectVector i sprawdź sylwetki i wewnętrzne otwory podglądu. PerfectVector nie tworzy linii środkowych. Musisz odblokować wynik, zanim będziesz mógł go edytować lub wyeksportować. W przypadku zadania linii środkowej skorzystaj z poniższego pełnego lokalnego przepływu pracy.

Wypróbuj na własnym obrazie
Otwórz pełne narzędzie
Za darmo i bez rejestracji: upuść obraz, aby zobaczyć podgląd swojego wektora.

Potwierdź, że używasz samodzielnego interfejsu wiersza polecenia AutoTrace

W tym przewodniku wykorzystano zainstalowany plik wykonywalny autotrace opisany przez oficjalny projekt AutoTrace. AutoTracer.org to usługa przesyłania danych w przeglądarce z własnym interfejsem; jego elementy sterujące nie są poniższymi poleceniami. Interfejs linii środkowej Inkscape to kolejna droga do osiągnięcia tego zadania. przewodnik SVG dotyczący rysowania do pojedynczej linii opisuje przepływ pracy w interfejsie GUI, przygotowanie źródła, czyszczenie i późniejszą kontrolę plotera.

Potrzebujesz zainstalowanego pliku wykonywalnego AutoTrace, terminala, dozwolonego pliku PNG i przeglądarki SVG lub edytora zwykłego tekstu. Umieść kopię roboczą o nazwie line-control.png w osobnym folderze i zachowaj oryginał. Naszym testowym odniesieniem był specjalnie stworzony 160 × 120 RGB PNG: gruby czarny pionowy rdzeń z dwoma prawymi paskami na nieprzezroczystym białym tle.

Przed śledzeniem sprawdź zainstalowaną kompilację:

autotrace --version
autotrace --help
autotrace --list-input-formats
autotrace --list-output-formats

Nasza wersja zwróciła AutoTrace version 0.40.0. Jej listy formatów obejmowały dane wejściowe PNG i dane wyjściowe SVG. W projekcie zauważono, że obsługa formatu zależy od kompilacji. Jeśli na aktualnej liście wejściowej brakuje formatu PNG, przed skopiowaniem polecenia konwersji sprawdź obsługę danych wejściowych tej kompilacji.

1. Zapisz odniesienie w formacie SVG ze śledzeniem konspektu

Najpierw zapisz zwykły ślad pod własną nazwą pliku:

autotrace --background-color FFFFFF \
  --output-format svg --output-file outline.svg line-control.png

podręcznik poleceń konserwatora dokumentuje kolor tła jako kolor szesnastkowy, który należy zignorować, a opcje wyjściowe jako żądany format i plik docelowy. FFFFFF identyfikuje tutaj kolor biały. Zachowaj ten wybór przywiązany do źródła, zamiast dodawać go na ślepo do każdego obrazu.

Rzeczywisty plik outline.svg zawierał jedną zamkniętą ścieżkę z fill:#000000; stroke:none;. Opisał granicę grubego czarnego obszaru. Szersze objaśnienie grafiki liniowej reprezentowanej przez kształty wypełnione kolorem znajdziesz w artykule grafika liniowa do formatu SVG.

2. Dodaj linię środkową i zapisz osobny plik SVG

Uruchom to samo źródło z opcją linii środkowej i nową nazwą pliku wyjściowego:

autotrace --background-color FFFFFF \
  --output-format svg --output-file centerline.svg \
  --centerline line-control.png

Oficjalny projekt i podręcznik odróżniają śledzenie linii środkowej od śledzenia konturów. Nasz zapisany centerline.svg miał stroke:#000000; fill:none;, jeden element ścieżki i brak elementu obrazu. Jego geometria podążała cienkimi drogami przez gęste obszary źródła, zamiast wypełniać ich kształt graniczny.

Przetestowaliśmy także to samo źródło bez wyraźnej opcji białego tła:

autotrace --centerline --output-format svg \
  --output-file centerline-background-retained.svg line-control.png

Ten plik był bajt po bajcie identyczny z centerline.svg w tym teście referencyjnym. Dlatego też wyraźna flaga tła nie była konieczna dla tego źródła i kompilacji. Nie traktuj tego jako uniwersalnego rozwiązania brakujących gałęzi lub wyjaśnienia każdego wyniku w tle.

3. Sprawdź zapisane trasy, a nie tylko liczbę ścieżek

Są to obserwacje z trzech faktycznie zapisanych plików, sprawdzone jako znaczniki SVG i renderowane lokalnie. Pliki zostały zachowane z naszego oryginalnego testu wiersza poleceń; kontrola ponownie wykorzystała te wyniki i nie twierdzimy, że przeprowadziliśmy drugą konwersję.

Zapisany plikElementy ścieżkiMalowanie i zamykanieCo ustanawia
outline.svgJedenCzarne wypełnienie, bez obrysu; jedna zamknięta podścieżkaZwykły wypełniony ślad granicy
centerline.svgJedenCzarny obrys, bez wypełnienia; dwie otwarte podścieżkiGeometria linii środkowej z przerwą na ścieżce rysowania
centerline-background-retained.svgJedenIdentyczne bajty z plikiem linii środkowejPominięcie opcji tła nie miało tutaj żadnego znaczenia

Podścieżka to oddzielny kontur wewnątrz elementu ścieżki. W danych ścieżki SVG M rozpoczyna podścieżkę, a Z ją zamyka, zgodnie z definicją w specyfikacji ścieżek SVG. Nasza ścieżka linii środkowej zawierała dwa polecenia M i nie zawierała żadnego polecenia Z. Odpowiednie zapisane dane, z dodanymi spacjami do odczytu, to:

M30 30L30 75
C30 80.0707 28.3961 88.5616 31.6034 92.8519
C35.7319 98.3743 47.9272 96 54 96L117 96
M31 56L87 56

Pierwsza trasa zaczyna się wzdłuż pionowego pnia w miejscu x = 30. Drugi zaczyna się od x = 31, y = 56. Ten oddzielny początek nie jest dowodem połączonej gałęzi. Nawet te proste dane wejściowe wymagają kontroli punktu końcowego, zanim ktokolwiek potraktuje je jako ciągłą trasę.

Ilustracja
Koncepcyjny dokument ścieżki zawierający oddzielne otwarte krzywe z kropkami na końcach i powiększoną przerwą
Sprawdź punkty końcowe i przerwy w ścieżce rysunku w zapisanym obiekcie ścieżki.

Otwórz plik SVG obok źródła. Sprawdź główny pień, każdą boczną gałąź, punkty końcowe i nieoczekiwane pętle. Użyj zapisanych atrybutów obrysu/wypełnienia i danych ścieżki, aby odpowiedzieć na pytania strukturalne; sam cienki podgląd może ukryć wypełniony kontur lub odłączoną gałąź. Te kontrole sprawdzają zawartość pliku. Nie weryfikują pomyślnego importu lub kreślenia pisakiem w innym narzędziu.

Odzyskaj po nieudanej kontroli

Nieudana kontrolaNastępna akcja
Plik PNG został odrzuconySprawdź zainstalowaną listę formatów wejściowych i zależności tej kompilacji
SVG jest nadal wypełnionym, zamkniętym kształtemPotwierdź, że użyto --centerline i sprawdź nowo nazwane dane wyjściowe, a nie referencyjny SVG ze śladem konturu
Ścieżkę trudno dostrzecSprawdź obrys i wypełnienie, a następnie wybierz kontrastujące tło przeglądarki
Brakuje gałęzi lub jest ona odłączonaPonownie odwiedź źródło, sprawdź punkty końcowe i celowo napraw trasę
Jedna ścieżka traktowana jest jako jedna ciągła liniaSprawdź oddzielne M początki i rzeczywiste połączenia w obrębie tego elementu

Zachowaj zaakceptowany plik SVG z jego oryginalnym formatem PNG, wersją AutoTrace i pełnym poleceniem. Kontrolą ukończenia tego zadania CLI jest zapisany plik SVG z zamierzonymi ścieżkami rysowania reprezentowanymi przez obrysy SVG i sprawdzone przerwy. Nie testowaliśmy aplikacji odbierającej, edycji natywnej, fizycznego rysowania piórem ani fizycznego cięcia. Skorzystaj z czyszczenia i sprawdzania plotera w przewodniku rysowania jednoliniowego przy podejmowaniu kolejnych decyzji; automatyczne śledzenie nie jest dowodem doskonałej rekonstrukcji gałęzi.

Jeśli osobna część projektu wymaga jednolitych kształtów z wypełnieniem kolorem, zacznij od PerfectVector i porównaj zewnętrzne kształty i wewnętrzne dziury podglądu ze źródłem. Zachowaj część linii środkowej w procesie roboczym obsługującym linię środkową.

Często zadawane pytania

Jakie jest polecenie AutoTrace dla linii środkowej PNG do SVG?

Użyj autotrace z --centerline, --output-format svg, miejscem docelowym --output-file i wejściem PNG. Najpierw sprawdź zainstalowaną wersję i obsługiwane formaty wejściowe, a następnie sprawdź obrys, wypełnienie i trasy zapisanego pliku SVG.

Czy jedna ścieżka SVG jest zawsze jedną ciągłą linią środkową?

Nie. Element ścieżki może zawierać kilka podścieżek. Nasz rzeczywisty SVG linii środkowej miał jeden element ścieżki, ale dwie otwarte ścieżki podrzędne, więc sama liczba elementów nie dowodziła ciągłej trasy.

Czy wymagana jest opcja białego tła?

Nie było to wymagane w przypadku naszego obrazu testowego z białym tłem w AutoTrace 0.40.0: pominięcie go spowodowało powstanie identycznych bajtów SVG. Wybierz obsługę tła dla źródła i zainstalowanej kompilacji, zamiast zakładać, że naprawia geometrię linii środkowej.

Czy PerfectVector może uzyskać taki sam wynik linii środkowej?

PerfectVector tworzy zarysowane kształty wektorowe z wypełnieniem kolorem, a nie liniami środkowymi. Może pełnić oddzielne zadanie polegające na wypełnieniu kształtu, podczas gdy znaki wymagające poprowadzenia przez środek wymagają narzędzia obsługującego linię środkową lub celowego rysowania.

Źródła

  1. Oficjalny projekt AutoTrace — samodzielny interfejs CLI, obsługa linii środkowej, formaty wejściowe zależne od użycia i kompilacji.
  2. Instrukcja poleceń AutoTrace — opcje linii środkowej, tła, pliku wyjściowego i formatu wyjściowego.
  3. Specyfikacja ścieżek W3C SVG — podścieżki, polecenia moveto i zamknięcie.
  4. AutoTracer.org — osobna usługa przeglądarki, odróżniana od zainstalowanego CLI.

Więcej z bloga

PerfectVector

Zamień obraz w
czyste, edytowalne ścieżki wektorowe

Wektoryzuj i sprawdzaj podgląd za darmo, bez dziennego limitu.