Kreiszeichnung mit dem Bogenweg des SVG

Ich weiß, es ist etwas spät, aber ich erinnerte mich an diese Frage aus, wenn es neu war, und ich hatte eine ähnliche dillemma, und ich habe versehentlich das "richtige" Lösung, falls jemand noch auf der Suche nach einem:

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

In anderen Worten:

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

erreicht werden kann, als ein Pfad mit dieser:

  <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 ist, mit zwei Bögen, der zweite picking up, wo der erste aufgehört hat, und mit dem negativen Durchmesser, um wieder auf den ursprünglichen arc Startpunkt.

Der Grund, warum es nicht getan werden kann als ein voller Kreis in einem Bogen (und ich bin nur spekulieren, da würden Sie sagen, zeichnet einen Bogen von sich (sagen wir mal 150,150) zu sich selbst (150,150), die es macht, als "oh, ich bin schon da, kein arc nötig!".

Die Vorteile der Lösung, die ich anbiete, sind:

1. es einfach zu übersetzen aus einem Kreis direkt auf einen Pfad, und
2. es keine überlappung in den zwei arc-Linien (das kann Probleme verursachen, wenn Sie mit Markern oder mustern, etc). Es ist eine saubere, kontinuierliche Linie, wenn auch gezeichnet in zwei Stücke.

Nichts von alledem wäre die Sache, wenn Sie würde nur lassen textpaths zu akzeptieren, Formen. Aber ich denke, Sie vermeiden, dass die Lösung, da Sie Form-Elemente wie Kreis, nicht technisch eine "start" - Punkt.

jsfiddle demo: http://jsfiddle.net/crazytonyi/mNt2g/

Update:

Wenn Sie den Pfad für eine textPath Referenz-und Sie wollen den text zu Rendern, der auf dem äußeren Rand des Bogens, die Sie verwenden würden, die genau die gleiche Methode, aber ändern Sie die sweep-flag von 0 auf 1, so dass es behandelt die außerhalb des Pfades, wie die Oberfläche anstatt des innen (denken Sie an die 1,0 als jemand sitzt in der Mitte und zeichnen einen Kreis um sich herum, während 1,1 wie jemand zu Fuß rund um das Zentrum des radius der Entfernung und ziehen Ihre Kreide neben Ihnen, wenn es das ist keine Hilfe). Hier ist der code wie oben, jedoch 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
    "
/>

InformationsquelleAutor der Antwort Anthony

Einen ganz anderen Ansatz:

Statt hantieren mit Pfaden angeben, einen Bogen in svg, können Sie auch ein Kreis-element, und geben eine stroke-dasharray, in pseudo-code:

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

Seiner Einfachheit ist der Hauptvorteil gegenüber der multiple-arc-Pfad-Methode (z.B. bei der Skripterstellung für Sie nur plug-in einen Wert und Sie sind fertig für Lichtbogen-Länge)

Arc beginnt am rechten Punkt, und kann verschoben werden, um mit einem drehen verwandeln.

Hinweis: Firefox hat einen seltsamen bug wo die Drehungen über 90 Grad oder mehr sind, werden ignoriert. So starten Sie die Bogen von der Oberseite verwenden:

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

InformationsquelleAutor der Antwort

Ist es eine gute Idee, dass mit zwei arc-Befehl zeichnen Sie einen vollständigen Kreis.

in der Regel, ich benutze ellipse oder Kreis-element zu zeichnen Sie einen Kreis.

InformationsquelleAutor der Antwort cuixiping

Aufbauend auf Anthony und Anton Antworten, die ich aufgenommen die Fähigkeit, sich zu drehen, die generiert Kreis, ohne die es den Gesamteindruck. Dies ist nützlich, wenn Sie den Pfad für eine animation, und Sie brauchen, um zu kontrollieren, wo es 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;
}

InformationsquelleAutor der Antwort

machte ich ein jsfiddle, es zu tun hier:

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

link

alles, was Sie tun müssen, ist zu ändern Sie die Eingabe von der Konsole.anmelden und erhalten das Ergebnis in der Konsole

InformationsquelleAutor der Antwort

Diese Antworten sind viel zu kompliziert.

Einen einfacheren Weg, dies zu tun, ohne die Schaffung von zwei Bögen oder konvertieren in unterschiedlichen Koordinatensystemen..

Diese übernimmt Ihre canvas-Bereich hat eine Breite w und Höhe h.

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

Einfach nur die "lange Bogen" - flag, so dass das vollständige Kennzeichen gefüllt wird. Dann machen die Bögen von 99,9999% der Kreis. Optisch ist es das gleiche. Vermeiden Sie das sweep-flag durch die gerade ab den Kreis in der rechten Punkt im Kreis (der einen radius direkt horizontal von der Mitte).

InformationsquelleAutor der Antwort