Круговой рисунок с дуговой дорожкой SVG

Следующий путь SVG может нарисовать 99,99% круга: (попробуйте на http://jsfiddle.net/DFhUF/46/ и посмотрите, видите ли вы 4 дуги или только 2, но обратите внимание, что если это IE, он отображается в VML, а не SVG, но имеют аналогичную проблему)

M 100 100 a 50 50 0 1 0 0.00001 0 

Но когда это 99.99999999% круга, тогда ничего не покажется вообще?

 M 100 800 a 50 50 0 1 0 0.00000001 0 

И это то же самое со 100% круга (это еще дуга, не правда ли, просто очень полная дуга)

 M 100 800 a 50 50 0 1 0 0 0 

Как это можно исправить? Причина в том, что я использую функцию, чтобы нарисовать процент от дуги, и если мне нужно «специальный случай» использовать 99,9999% или 100% дугу для использования функции круга, это было бы глупо.

Опять же, тестовый пример jsfiddle с использованием RaphaelJS находится по адресу http://jsfiddle.net/DFhUF/46/
(и если это VML на IE 8, даже второй круг не покажет … вы должны изменить его на 0,01)


Обновить:

Это потому, что я даю дугу для оценки в нашей системе, поэтому 3,3 балла получают 1/3 круга. 0,5 получает половину круга, а 9,9 очков получают 99% круга. Но что, если в нашей системе есть оценки, которые составляют 9.99? Нужно ли проверять, близко ли оно к 99,999% круга, и использовать функцию arc или функцию circle ? Тогда как насчет оценки 9.9987? Какой из них использовать? Смешно знать, какие оценки будут отображаться в «слишком полном круге» и переключиться на функцию круга, а когда это «некий 99,9%» круга или 9,9987 баллов, то используйте функцию дуги ,

То же самое для дуги XAML. Просто закройте дугу 99.99% с Z и у вас есть круг!

Я знаю, что это немного поздно в игре, но я помнил этот вопрос, когда он был новым, и у меня была подобная диллемма, и я случайно нашел «правильное» решение, если кто-то еще ищет его:

  

Другими словами, это:

  

может быть достигнуто как путь с этим:

   

Хитрость состоит в том, чтобы иметь две дуги, вторая – вверх, где первая остановилась, и используя отрицательный диаметр, чтобы вернуться к начальной точке начала дуги.

Причина, по которой она не может быть выполнена как полный круг в одной дуге (и я просто размышляю), заключается в том, что вы будете говорить ей, чтобы рисовать дугу от себя (скажем 150 150) к себе (150 150), которую она отображает как «о, я уже там, нет дуги!».

Преимущества решения, которое я предлагаю:

  1. его легко перевести из круга непосредственно в путь, и
  2. в двух линиях дуги нет перекрытия (что может вызвать проблемы, если вы используете маркеры или шаблоны и т. д.). Это чистая сплошная линия, хотя и нарисованная двумя частями.

Ничто из этого не имело бы значения, если бы они просто разрешали текстовым путям принимать фигуры. Но я думаю, что они избегают этого решения, поскольку элементы формы, такие как круг, технически не имеют точки начала.

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

Обновить:

Если вы используете путь для ссылки textPath и вы хотите, чтобы текст отображался на внешнем краю дуги, вы использовали бы тот же самый метод, но изменили бы флаг sweep с 0 на 1, чтобы он обрабатывал внешний вид путь как поверхность вместо внутренней (подумайте об 1,0 когда кто-то сидит в центре и рисует круг вокруг себя, в то время как 1,1 как кто-то ходит по центру на расстоянии радиуса и перетаскивает их мелом рядом с ними, если это любая помощь). Вот код, как указано выше, но с изменением:

  

См. Решение Anthony’s здесь, это функция, чтобы получить путь:

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

Совершенно иной подход:

Вместо того, чтобы прокручивать пути для указания дуги в svg, вы также можете взять элемент окружности и указать штрих-dasharray в псевдокоде:

 with $score between 0..1, and pi = 3.141592653589793238 $length = $score * 2 * pi * $r $max = 7 * $r (ie well above 2*pi*r)  

Его простота является основным преимуществом по сравнению с методом с несколькими дугами (например, при написании сценариев вы подключаете только одно значение, и вы делаете это для любой длины дуги)

Дуга начинается в самой правой точке и может быть сдвинута с помощью поворотного преобразования.

Примечание. В Firefox есть странная ошибка, в которой игнорируются вращения более 90 gradleусов и более. Чтобы начать дугу сверху, используйте:

  

Adobe Illustrator использует кривые безье, такие как SVG, а для кругов – четыре точки. Вы можете создать круг с двумя эллипсовыми командами дуги … но затем для круга в SVG я бы использовал 🙂

Это хорошая идея, что использование двух команд дуги для рисования полного круга.

Обычно я использую элемент эллипса или круга, чтобы нарисовать полный круг.

Написанная как функция, она выглядит так:

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

Основываясь на ответах Энтони и Антона, я включил способность поворачивать созданный круг, не затрагивая его общий вид. Это полезно, если вы используете путь для анимации, и вам нужно контролировать, где он начинается.

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

Для таких, как я, которые искали атрибуты эллипса для преобразования пути:

 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` 

я сделал jsfiddle, чтобы сделать это здесь:

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

ссылка

все, что вам нужно сделать, это изменить входной файл console.log и получить результат в консоли

Другой способ – использовать два кубических кривых Безье. Это для iOS-пользователей, использующих pocketSVG, который не распознает параметр svg arc.

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

Кубическая кривая Безье

Последний набор координат здесь (x, y) – это то место, где вы хотите, чтобы линия заканчивалась. Остальные два являются контрольными точками. (x1, y1) – контрольная точка начала вашей кривой и (x2, y2) для конечной точки вашей кривой.

  

Эти ответы слишком сложны.

Простейший способ сделать это без создания двух дуг или преобразования в разные системы координат.

Это предполагает, что ваша область canvasа имеет ширину w и высоту h .

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

Просто используйте флаг «длинной дуги», чтобы заполнить полный флаг. Затем сделайте дуги 99.9999% полного круга. Визуально это одно и то же. Избегайте флага развертки, просто начиная круг в самой правой точке круга (один радиус прямо горизонтальный от центра).

Эти примеры слишком сложны !!!

Просто сделайте это с помощью шаблонов шаблонов es6.

Простейший способ сделать это без создания двух дуг.

Это предполагает, что ваша область canvasа имеет ширину w и высоту h.

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

Просто используйте флаг «длинной дуги», чтобы заполнить полный флаг. Затем сделайте дуги 99.9999% полного круга. Визуально это одно и то же. Избегайте флага развертки, просто начиная круг в самой правой точке круга (один радиус прямо горизонтальный от центра).

Давайте будем гением компьютера.