Krótkie pytanie: używając ścieżki SVG możemy narysować 99,99% okręgu i to się pojawia, ale gdy jest to 99,999999999% okręgu, to koło się nie pojawi. Jak to naprawić?
Następująca ścieżka SVG może narysować 99,99% okręgu: (wypróbuj na http://jsfiddle.net/DFhUF/1381/ i zobacz, czy widzisz 4 łuki, czy tylko 2 łuki, ale zwróć uwagę, że jeśli to IE, to jest renderowane w VML, a nie SVG, ale mają podobny problem)
M 100 100 a 50 50 0 1 0 0.00001 0
Ale kiedy jest to 99,999999999% koła, to w ogóle nic się nie pokaże?
M 100 100 a 50 50 0 1 0 0.00000001 0
I tak samo jest ze 100% okręgu (to nadal jest łuk, prawda, tylko bardzo pełny łuk)
M 100 100 a 50 50 0 1 0 0 0
Jak można to naprawić? Powodem jest to, że używam funkcji do rysowania procentu łuku, a jeśli potrzebuję „specjalnego przypadku” 99,9999% lub 100% łuku, aby użyć funkcji okręgu, to byłoby trochę głupie.
Ponownie, przypadek testowy na jsfiddle przy użyciu RaphaelJS znajduje się pod adresem http://jsfiddle.net/DFhUF/1381/
(a jeśli jest to VML w IE 8, nawet drugie kółko się nie pokaże ... musisz zmienić to na 0,01)
Aktualizacja:
Dzieje się tak, ponieważ w naszym systemie renderuję łuk dla wyniku, więc 3,3 punktu otrzymuje 1/3 koła. 0,5 daje pół koła, a 9,9 punktów to 99% koła. Ale co, jeśli w naszym systemie są wyniki 9,99? Czy muszę sprawdzić, czy jest blisko 99,999% koła i odpowiednio użyć arc
funkcji lub circle
funkcji? A co z wynikiem 9,9987? Którego użyć? To śmieszne, gdy trzeba wiedzieć, jakiego rodzaju wyniki będą mapowane na „zbyt pełne koło” i przełączać się na funkcję koła, a kiedy jest to „pewne 99,9%” koła lub 9,9987, należy użyć funkcji łuku .
Odpowiedzi:
To samo dotyczy łuku XAML. Po prostu zamknij łuk 99,99% za pomocą
Z
i masz koło!źródło
z
na końcu i gotowe. Być może trzeba będzie usunąć zera, na przykład w najnowszym Chrome musiałem napisać,0.0001
aby to działało. Jeśli szukasz miejsca na ścieżkę, spójrz na Paths na MDN .Wiem, że w grze jest trochę za późno, ale zapamiętałem to pytanie z czasów, gdy było nowe i miałem podobny dylemat i przypadkowo znalazłem „właściwe” rozwiązanie, jeśli ktoś jeszcze takiego szuka:
Innymi słowy, to:
można osiągnąć jako ścieżkę za pomocą tego:
Sztuczka polega na tym, aby mieć dwa łuki, drugi wychwytujący w miejscu, w którym skończył się pierwszy i używając ujemnej średnicy, aby wrócić do pierwotnego punktu początkowego łuku.
Powodem, dla którego nie można tego zrobić jako pełnego koła w jednym łuku (i tylko spekuluję), jest to, że kazałbyś mu narysować łuk od siebie samego (powiedzmy 150,150) do siebie (150,150), który renderuje jako „och, już tam jestem, łuk nie jest potrzebny!”.
Zalety oferowanego przeze mnie rozwiązania to:
Nic z tego nie miałoby znaczenia, gdyby po prostu zezwalały ścieżkom tekstowym na akceptowanie kształtów. Ale myślę, że unikają tego rozwiązania, ponieważ elementy kształtu, takie jak koło, nie mają technicznie punktu „początkowego”.
Demo jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/
Aktualizacja:
Jeśli używasz ścieżki jako
textPath
odniesienia i chcesz, aby tekst był renderowany na zewnętrznej krawędzi łuku, użyłbyś dokładnie tej samej metody, ale zmień flagę przeciągnięcia z 0 na 1, tak aby traktowała zewnętrzną stronę łuku ścieżka jako powierzchnia zamiast wnętrza (pomyśl o1,0
kimś siedzącym w środku i rysującym okrąg wokół siebie, podczas1,1
gdy ktoś spaceruje po środku w promieniu i ciągnie obok siebie kredę, jeśli to w ogóle pomoże). Oto kod jak powyżej, ale ze zmianą:źródło
W odniesieniu do rozwiązania Anthony'ego, oto funkcja do uzyskania ścieżki:
źródło
Zupełnie inne podejście:
Zamiast majstrować przy ścieżkach, aby określić łuk w svg, możesz również wziąć element okręgu i określić tablicę kresek obrysów w pseudokodzie:
Jego prostota jest główną zaletą w stosunku do metody z wieloma ścieżkami łuku (np. Podczas tworzenia skryptów podłączasz tylko jedną wartość i gotowe dla dowolnej długości łuku)
Łuk zaczyna się w skrajnym prawym punkcie i można go przesuwać za pomocą funkcji obracania.
Uwaga: Firefox ma dziwny błąd, w którym obrót o ponad 90 stopni lub więcej jest ignorowany. Aby więc rozpocząć łuk od góry, użyj:
źródło
stroke-dasharray="0 10cm 5cm 1000cm"
temu można uniknąć transformacjiAdobe Illustrator używa krzywych Beziera, takich jak SVG, a dla okręgów tworzy cztery punkty. Możesz utworzyć okrąg za pomocą dwóch poleceń dotyczących łuku eliptycznego ... ale wtedy dla okręgu w SVG użyłbym
<circle />
:)źródło
circle
, zapoznaj się z aktualizacją w pytaniu.arc
do tworzenia pełnego koła, używając lewego i prawego łuku? Więc łuk nie może narysować pełnego koła ... aby to zrobićarc
potrzebne są dwie ścieżkiDobrym pomysłem jest użycie dwóch poleceń łuku, aby narysować pełne koło.
zwykle używam elipsy lub koła, aby narysować pełne koło.
źródło
Opierając się na odpowiedziach Anthony'ego i Antona, włączyłem możliwość obracania wygenerowanego koła bez wpływu na jego ogólny wygląd. Jest to przydatne, jeśli używasz ścieżki do animacji i musisz kontrolować, gdzie się zaczyna.
źródło
Dla takich jak ja, którzy szukali atrybutów elipsy do konwersji ścieżki:
źródło
Zapisany jako funkcja wygląda tak:
źródło
<circle>
, trzeba zmienić kierunek na wschód, południe, zachód, północ:"M" + cx + "," + cy + "m" + (r) + ",0" + "a" + r + "," + r + " 0 1,1 " + (-r * 2) + ",0" + "a" + r + "," + r + " 0 1,1 " + (r * 2) + ",0"
Zaletą jest to, żestroke-dashoffset
istartOffset
teraz działają w ten sam sposób.Te odpowiedzi są zbyt skomplikowane.
Prostszy sposób na zrobienie tego bez tworzenia dwóch łuków lub konwertowania do różnych układów współrzędnych.
Zakłada się, że obszar roboczy ma szerokość
w
i wysokośćh
.Po prostu użyj flagi „długi łuk”, aby cała flaga była wypełniona. Następnie wykonaj łuki 99,9999% pełnego koła. Wizualnie jest tak samo. Unikaj flagi zamiatania, zaczynając okrąg w najbardziej prawym punkcie okręgu (jeden promień bezpośrednio poziomo od środka).
źródło
Innym sposobem byłoby użycie dwóch sześciennych krzywych Beziera. To dla użytkowników iOS używających pocketSVG, który nie rozpoznaje parametru arc svg.
C x1 y1, x2 y2, xy (lub c dx1 dy1, dx2 dy2, dx dy)
Ostatni zestaw współrzędnych tutaj (x, y) to miejsce, w którym linia ma się kończyć. Pozostałe dwa to punkty kontrolne. (x1, y1) to punkt kontrolny dla początku twojej krzywej, a (x2, y2) dla punktu końcowego twojej krzywej.
źródło
Zrobiłem jsfiddle, aby to zrobić tutaj:
połączyć
wszystko, co musisz zrobić, to zmienić dane wejściowe console.log i uzyskać wynik w konsoli
źródło