Rysowanie okręgu ze ścieżką łuku SVG

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ć arcfunkcji lub circlefunkcji? 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 .

To samo dotyczy łuku XAML. Po prostu zamknij łuk 99,99% za pomocą Zi masz koło!

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:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

Innymi słowy, to:

<circle cx="100" cy="100" r="75" />

można osiągnąć jako ścieżkę za pomocą tego:

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

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:

1. łatwo jest przetłumaczyć z okręgu bezpośrednio na ścieżkę i
2. dwie linie łuków nie nakładają się (co może powodować problemy, jeśli używasz markerów lub wzorów itp.). To czysta, ciągła linia, choć narysowana w dwóch częściach.

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 textPathodniesienia 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 o 1,0kimś siedzącym w środku i rysującym okrąg wokół siebie, podczas 1,1gdy 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ą:

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

W odniesieniu do rozwiązania Anthony'ego, oto funkcja do uzyskania ścieżki:

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

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:

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

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:

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe 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 />:)

Dobrym 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.

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.

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}

Dla takich jak ja, którzy szukali atrybutów elipsy do konwersji ścieżki:

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

Zapisany jako funkcja wygląda tak:

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

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ść wi wysokość h.

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

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).

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.

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />

Zrobiłem jsfiddle, aby to zrobić tutaj:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

połączyć

wszystko, co musisz zrobić, to zmienić dane wejściowe console.log i uzyskać wynik w konsoli