Kreiszeichnung mit SVGs Bogenpfad

Kurze Frage: Mit dem SVG-Pfad können wir 99,99% eines Kreises zeichnen und er wird angezeigt. Wenn es sich jedoch um 99,99999999% eines Kreises handelt, wird der Kreis nicht angezeigt. Wie kann es behoben werden?

Der folgende SVG-Pfad kann 99,99% eines Kreises zeichnen: (Versuchen Sie es unter http://jsfiddle.net/DFhUF/1381/ und prüfen Sie, ob Sie 4 oder nur 2 Bögen sehen. Beachten Sie jedoch, dass es sich um einen IE handelt in VML gerendert, nicht SVG, aber mit dem gleichen Problem)

M 100 100 a 50 50 0 1 0 0.00001 0

Aber wenn es 99,99999999% eines Kreises ist, wird dann überhaupt nichts angezeigt?

M 100 100 a 50 50 0 1 0 0.00000001 0    

Und das ist auch bei 100% eines Kreises so (es ist immer noch ein Bogen, nicht wahr, nur ein sehr vollständiger Bogen)

M 100 100 a 50 50 0 1 0 0 0 

Wie kann das behoben werden? Der Grund dafür ist, dass ich eine Funktion verwende, um einen Prozentsatz eines Bogens zu zeichnen, und wenn ich einen 99,9999% oder 100% Bogen "Sonderfall" machen muss, um die Kreisfunktion zu verwenden, wäre das irgendwie albern.

Ein Testfall für jsfiddle mit RaphaelJS finden Sie unter http://jsfiddle.net/DFhUF/1381/
(und wenn es sich um VML in IE 8 handelt, wird selbst der zweite Kreis nicht angezeigt ... Sie müssen ihn ändern 0,01)

Aktualisieren:

Dies liegt daran, dass ich einen Bogen für eine Punktzahl in unserem System rendere, sodass 3,3 Punkte 1/3 eines Kreises erhalten. 0,5 ergibt einen halben Kreis und 9,9 Punkte ergeben 99% eines Kreises. Aber was ist, wenn es in unserem System Werte gibt, die 9,99 betragen? Muss ich überprüfen, ob es sich um 99,999% eines Kreises handelt, und eine arcFunktion oder eine circleFunktion entsprechend verwenden? Was ist dann mit einer Punktzahl von 9.9987? Welches verwenden? Es ist lächerlich zu wissen, welche Art von Partituren einem "zu vollständigen Kreis" zugeordnet und zu einer Kreisfunktion gewechselt werden. Wenn es sich um "bestimmte 99,9%" eines Kreises oder eine 9,9987-Partitur handelt, verwenden Sie die Bogenfunktion .

Gleiches gilt für den XAML-Bogen. Schließen Sie einfach den 99,99% -Bogen mit a Zund Sie haben einen Kreis!

Ich weiß, dass es etwas spät im Spiel ist, aber ich erinnerte mich an diese Frage, als sie neu war und ich ein ähnliches Dillemma hatte, und fand versehentlich die "richtige" Lösung, wenn noch jemand nach einer sucht:

<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
    "
/>

Mit anderen Worten:

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

kann als ein Weg damit erreicht werden:

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

Der Trick besteht darin, zwei Bögen zu haben, wobei der zweite dort aufnimmt, wo der erste aufgehört hat, und den negativen Durchmesser verwendet, um zum ursprünglichen Bogenstartpunkt zurückzukehren.

Der Grund, warum es nicht als vollständiger Kreis in einem Bogen gemacht werden kann (und ich spekuliere nur), ist, dass Sie ihm sagen würden, er solle einen Bogen von sich selbst (sagen wir 150.150) zu sich selbst (150.150) zeichnen, den er rendert als "oh, ich bin schon da, kein Lichtbogen nötig!".

Die Vorteile der von mir angebotenen Lösung sind:

1. Es ist einfach, von einem Kreis direkt in einen Pfad zu übersetzen
2. Es gibt keine Überlappung in den beiden Bogenlinien (was zu Problemen führen kann, wenn Sie Markierungen oder Muster usw. verwenden). Es ist eine saubere durchgehende Linie, wenn auch in zwei Teilen gezeichnet.

Nichts davon wäre von Bedeutung, wenn nur Textpfade Formen akzeptieren könnten. Aber ich denke, sie vermeiden diese Lösung, da Formelemente wie Kreise technisch gesehen keinen "Startpunkt" haben.

jsfiddle-Demo: http://jsfiddle.net/crazytonyi/mNt2g/

Aktualisieren:

Wenn Sie den Pfad als textPathReferenz verwenden und möchten, dass der Text am äußeren Rand des Bogens gerendert wird, verwenden Sie genau dieselbe Methode, ändern jedoch das Sweep-Flag von 0 auf 1, sodass die Außenseite des Bogens behandelt wird Pfad als Oberfläche statt nach innen (stellen Sie sich vor, 1,0jemand sitzt in der Mitte und zeichnet einen Kreis um sich selbst, während 1,1jemand in Radiusentfernung um die Mitte geht und seine Kreide neben sich zieht, wenn dies hilfreich ist). Hier ist der Code wie oben, aber mit der Änderung:

<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
    "
/>

In Bezug auf Anthonys Lösung ist hier eine Funktion, um den Pfad zu erhalten:

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';
}

Ein ganz anderer Ansatz:

Anstatt mit Pfaden zu fummeln, um einen Bogen in svg anzugeben, können Sie auch ein Kreiselement nehmen und ein Strich-Dasharray im Pseudocode angeben:

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" />

Die Einfachheit ist der Hauptvorteil gegenüber der Methode mit mehreren Bogenpfaden (z. B. wenn Sie beim Erstellen von Skripten nur einen Wert eingeben und für jede Bogenlänge fertig sind)

Der Bogen beginnt am äußersten rechten Punkt und kann mithilfe einer Drehtransformation verschoben werden.

Hinweis: Firefox hat einen seltsamen Fehler, bei dem Drehungen über 90 Grad oder mehr ignoriert werden. Um den Bogen von oben zu starten, verwenden Sie:

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

Adobe Illustrator verwendet Bezierkurven wie SVG und erstellt für Kreise vier Punkte. Sie können einen Kreis mit zwei elliptischen Bogenbefehlen erstellen ... aber für einen Kreis in SVG würde ich ein <circle />:) verwenden

Es ist eine gute Idee, mit zwei Bogenbefehlen einen vollen Kreis zu zeichnen.

Normalerweise benutze ich eine Ellipse oder ein Kreiselement, um einen vollen Kreis zu zeichnen.

Aufbauend auf den Antworten von Anthony und Anton habe ich die Möglichkeit integriert, den generierten Kreis zu drehen, ohne das gesamte Erscheinungsbild zu beeinträchtigen. Dies ist nützlich, wenn Sie den Pfad für eine Animation verwenden und steuern müssen, wo sie beginnt.

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;
}

Für diejenigen wie mich, die nach Ellipsenattributen für die Pfadkonvertierung suchten:

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`

Als Funktion geschrieben sieht es so aus:

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";
}

Diese Antworten sind viel zu kompliziert.

Eine einfachere Möglichkeit, dies zu tun, ohne zwei Bögen zu erstellen oder in verschiedene Koordinatensysteme zu konvertieren.

Dies setzt voraus, dass Ihr Leinwandbereich Breite wund Höhe hat h.

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

Verwenden Sie einfach die Flagge "Langer Bogen", damit die volle Flagge gefüllt ist. Machen Sie dann die Bögen zu 99,9999% zum vollen Kreis. Optisch ist es das gleiche. Vermeiden Sie die Sweep-Flagge, indem Sie den Kreis am äußersten rechten Punkt des Kreises beginnen (ein Radius direkt horizontal von der Mitte).

Eine andere Möglichkeit wäre die Verwendung von zwei kubischen Bezierkurven. Dies ist für iOS- Benutzer gedacht, die PocketSVG verwenden, das den Parameter svg arc nicht erkennt.

C x1 y1, x2 y2, xy (oder c dx1 dy1, dx2 dy2, dx dy)

Der letzte Satz von Koordinaten hier (x, y) ist der Punkt, an dem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1, y1) ist der Kontrollpunkt für den Beginn Ihrer Kurve und (x2, y2) für den Endpunkt Ihrer Kurve.

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

Ich habe eine Jsfiddle gemacht, um es hier zu tun:

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

Verknüpfung

Alles, was Sie tun müssen, ist, die Eingabe von console.log zu ändern und das Ergebnis in console zu erhalten