65 votos

Círculo de dibujo con SVG de la ruta de acceso arc

El siguiente SVG ruta de acceso puede dibujar el 99.99% de un círculo: (pruebe en http://jsfiddle.net/DFhUF/46/ y ver si ves 4 arcos o sólo 2, pero tenga en cuenta que si se es decir, que se representa en VML, no SVG, pero tiene el problema similar)

M 100 100 a 50 50 0 1 0 0.00001 0

Pero cuando es el 99.99999999% de un círculo, entonces no se muestra nada en absoluto?

M 100 800 a 50 50 0 1 0 0.00000001 0    

Y ese es el mismo con el 100% de un círculo (que es todavía un arco, ¿no es así, tan sólo un arco completo)

M 100 800 a 50 50 0 1 0 0 0 

¿Cómo puede ser solucionado? La razón es que el uso de una función para dibujar un porcentaje de un arco, y si me necesitan "caso especial" un 99.9999% o 100% arco a utilizar el círculo de la función, que sería un poco tonto.

De nuevo, un caso de prueba en jsfiddle utilizando RaphaelJS es en http://jsfiddle.net/DFhUF/46/
(y si es VML en IE 8, el segundo círculo no mostrar... usted tendrá que cambiar a 0.01)


Actualización:

Esto es debido a que yo soy la representación de un arco para una puntuación en nuestro sistema, de 3,3 puntos de 1/3 de un círculo. 0.5 recibe la mitad de un círculo, y el 9.9 puntos obtiene el 99% de un círculo. Pero lo que si hay son las puntuaciones que se 9.99 en nuestro sistema? Tengo que comprobar si se está cerca de 99,999% de un círculo, y el uso de un arc función o un circle función en consecuencia? Entonces ¿qué pasa con una puntuación de 9.9987? Cuál utilizar? Es ridículo necesita saber qué tipo de calificaciones se asignan a una "demasiado círculo completo" y cambiar a un círculo de la función, y cuando se trata de "una cierta 99.9%" de un círculo o un 9.9987 puntuación, a continuación, utilizar la función arco.

173voto

Anthony Puntos 14424

Sé que es un poco tarde en el juego, pero me acordé de esta pregunta desde cuando era nuevo y tenía una similar dillemma, y yo accidentalmente encontró la solución "correcta", si alguien sigue buscando uno:

<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 otras palabras, este:

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

puede lograrse, como una ruta de acceso con esto:

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

El truco es tener dos arcos, el segundo recogiendo donde la primera a la izquierda y usar el negativo de diámetro para volver a la original de arco punto de inicio.

La razón por la que no se puede hacer como un círculo completo en un arco (y sólo estoy especulando) es porque estaría diciendo que para dibujar un arco de sí mismo (digamos 150,150) a sí mismo (150,150), que se representa como "oh, ya estoy allí, no hay arco necesario!".

Los beneficios de la solución que estoy ofreciendo son:

  1. es fácil traducir de un círculo directamente a una ruta de acceso, y
  2. que no se superponen en las dos líneas de arco (que puede causar problemas si usted está utilizando los marcadores o los patrones, etc). Es una limpia línea continua, aunque dibujados en dos piezas.

Nada de esto tendría importancia si se acaba de permitir textpaths a aceptar formas. Pero yo creo que están evitando que la solución, ya que forma a elementos como el círculo técnicamente no tiene un "inicio".

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

Actualización:

Si usted está utilizando la ruta de acceso para un textPath de referencia y que está deseando que el texto a representar en el borde exterior del arco, usted podría usar el mismo método pero en cambio el traspaso de la bandera de 0 a 1, de modo que se trata a los fuera de la ruta, ya que la superficie en lugar de dentro (creo que de 1,0 como alguien sentado en el centro y dibujar un círculo alrededor de ellos, mientras que 1,1 como alguien caminando por el centro en el radio de la distancia y el arrastre de sus tiza junto a ellos, a si que cualquier tipo de ayuda). Aquí está el código como el anterior pero con el cambio:

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

16voto

Todd Main Puntos 24036

Mismo para XAML del arco. Acaba de cerrar el 99.99% arco con un Z y tienes un círculo!

4voto

Phrogz Puntos 112337

Adobe Illustrator utiliza las curvas de bézier como SVG, y para los círculos crea cuatro puntos. Usted puede crear un círculo con dos arco elíptico comandos...pero luego de un círculo en SVG que me gustaría utilizar una <circle /> :)

3voto

cuixiping Puntos 644

Es una buena idea que el uso de dos arco de comandos para dibujar un círculo completo.

por lo general, el uso de la elipse o círculo elemento para dibujar un círculo completo.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X