Dessin de cercle avec la trajectoire de l'arc de SVG

Question courte: en utilisant le chemin SVG, nous pouvons dessiner 99,99% d'un cercle et cela apparaît, mais quand il s'agit de 99,99999999% d'un cercle, le cercle n'apparaîtra pas. Comment y remédier?

Le chemin SVG suivant peut dessiner 99,99% d'un cercle: (essayez-le sur http://jsfiddle.net/DFhUF/1381/ et voyez si vous voyez 4 arcs ou seulement 2 arcs, mais notez que si c'est IE, c'est rendu en VML, pas SVG, mais ont le même problème)

M 100 100 a 50 50 0 1 0 0.00001 0

Mais quand il s'agit de 99,99999999% d'un cercle, alors rien ne s'affiche du tout?

M 100 100 a 50 50 0 1 0 0.00000001 0    

Et c'est pareil avec 100% d'un cercle (c'est toujours un arc, n'est-ce pas, juste un arc très complet)

M 100 100 a 50 50 0 1 0 0 0 

Comment cela peut-il être réglé? La raison en est que j'utilise une fonction pour dessiner un pourcentage d'un arc, et si j'ai besoin d'un "cas particulier" un arc de 99,9999% ou 100% pour utiliser la fonction de cercle, ce serait un peu idiot.

Encore une fois, un cas de test sur jsfiddle utilisant RaphaelJS est à http://jsfiddle.net/DFhUF/1381/
(et s'il s'agit de VML sur IE 8, même le deuxième cercle ne s'affiche pas ... vous devez le changer en 0,01)

Mettre à jour:

C'est parce que je suis en train de rendre un arc pour un score dans notre système, donc 3,3 points donnent 1/3 d'un cercle. 0,5 correspond à un demi-cercle et 9,9 points à 99% d'un cercle. Mais que faire s'il y a des scores de 9,99 dans notre système? Dois-je vérifier s'il est proche de 99,999% d'un cercle et utiliser une arcfonction ou une circlefonction en conséquence? Alors qu'en est-il d'un score de 9,9987? Lequel utiliser? Il est ridicule d'avoir besoin de savoir quel type de scores correspondra à un "cercle trop complet" et basculera vers une fonction de cercle, et quand il s'agit "d'un certain 99,9%" d'un cercle ou d'un score de 9,9987, alors utilisez la fonction arc .

Idem pour l'arc de XAML. Fermez simplement l'arc à 99,99% avec un Zet vous avez un cercle!

Je sais que c'est un peu tard dans le jeu, mais je me suis souvenu de cette question quand c'était nouveau et j'avais un dillemma similaire, et j'ai accidentellement trouvé la «bonne» solution, si quelqu'un en cherche encore une:

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

En d'autres termes, ceci:

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

peut être réalisé comme un chemin avec ceci:

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

L'astuce consiste à avoir deux arcs, le second reprenant là où le premier s'était arrêté et utilisant le diamètre négatif pour revenir au point de départ de l'arc d'origine.

La raison pour laquelle cela ne peut pas être fait comme un cercle complet dans un arc (et je ne fais que spéculer) est que vous lui diriez de dessiner un arc de lui-même (disons 150,150) à lui-même (150,150), ce qu'il rend comme "oh, je suis déjà là, pas d'arc nécessaire!".

Les avantages de la solution que je propose sont:

1. il est facile de traduire directement d'un cercle en chemin, et
2. il n'y a pas de chevauchement dans les deux lignes d'arc (ce qui peut poser des problèmes si vous utilisez des marqueurs ou des motifs, etc.). C'est une ligne continue propre, bien que dessinée en deux morceaux.

Rien de tout cela n'aurait d'importance s'ils autorisaient simplement les chemins de texte à accepter des formes. Mais je pense qu'ils évitent cette solution car les éléments de forme comme le cercle n'ont techniquement pas de point de «départ».

Démo jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

Mettre à jour:

Si vous utilisez le tracé pour une textPathréférence et que vous souhaitez que le texte soit rendu sur le bord extérieur de l'arc, vous utiliseriez exactement la même méthode, mais changez l'indicateur de balayage de 0 à 1 afin qu'il traite l'extérieur du chemin comme surface au lieu de l'intérieur (pensez 1,0à quelqu'un assis au centre et à dessiner un cercle autour d'eux, tandis 1,1que quelqu'un marchant autour du centre à distance de rayon et traînant sa craie à côté d'eux, si cela peut aider). Voici le code comme ci-dessus mais avec le changement:

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

En référence à la solution d'Anthony, voici une fonction pour obtenir le chemin:

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

Une approche totalement différente:

Au lieu de jouer avec les chemins pour spécifier un arc en svg, vous pouvez également prendre un élément de cercle et spécifier un stroke-dasharray, en 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" />

Sa simplicité est le principal avantage par rapport à la méthode de chemins d'arc multiples (par exemple, lors du script, vous ne branchez qu'une seule valeur et vous avez terminé pour n'importe quelle longueur d'arc)

L'arc commence au point le plus à droite et peut être déplacé à l'aide d'une transformation de rotation.

Remarque: Firefox a un bug étrange où les rotations de plus de 90 degrés ou plus sont ignorées. Donc, pour démarrer l'arc par le haut, utilisez:

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

Adobe Illustrator utilise des courbes de Bézier comme SVG et pour les cercles, il crée quatre points. Vous pouvez créer un cercle avec deux commandes d'arc elliptique ... mais alors pour un cercle en SVG, j'utiliserais un <circle />:)

C'est une bonne idée d'utiliser la commande deux arc pour dessiner un cercle complet.

généralement, j'utilise une ellipse ou un élément de cercle pour dessiner un cercle complet.

En me basant sur les réponses d'Anthony et Anton, j'ai intégré la possibilité de faire pivoter le cercle généré sans affecter son apparence générale. Ceci est utile si vous utilisez le chemin pour une animation et que vous devez contrôler son point de départ.

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

Pour ceux comme moi qui recherchaient des attributs d'ellipse en conversion de chemin:

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`

Ecrit comme une fonction, il ressemble à ceci:

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

Ces réponses sont beaucoup trop compliquées.

Une façon plus simple de le faire sans créer deux arcs ou convertir en différents systèmes de coordonnées.

Cela suppose que votre zone de canevas a une largeur wet une hauteur h.

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

Utilisez simplement le drapeau "long arc", de sorte que le drapeau complet soit rempli. Faites ensuite les arcs à 99,9999% du cercle complet. Visuellement, c'est pareil. Évitez le drapeau de balayage en commençant simplement le cercle au point le plus à droite du cercle (un rayon directement horizontal du centre).

Une autre façon serait d'utiliser deux courbes de Bézier cubiques. C'est pour les gens iOS qui utilisent pocketSVG qui ne reconnaît pas le paramètre d'arc svg.

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

Le dernier ensemble de coordonnées ici (x, y) est l'endroit où vous voulez que la ligne se termine. Les deux autres sont des points de contrôle. (x1, y1) est le point de contrôle pour le début de votre courbe, et (x2, y2) pour le point final de votre courbe.

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

j'ai fait un jsfiddle pour le faire ici:

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

lien

tout ce que vous avez à faire est de changer l'entrée de console.log et d'obtenir le résultat dans console