Рисование круга с траекторией дуги SVG

Короткий вопрос: используя путь SVG, мы можем нарисовать 99,99% круга, и он появляется, но если он равен 99,999999999% круга, то круг не будет отображаться. Как это можно исправить?

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

M 100 100 a 50 50 0 1 0 0.00001 0

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

M 100 100 a 50 50 0 1 0 0.00000001 0    

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

M 100 100 a 50 50 0 1 0 0 0 

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

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

Обновить:

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

То же самое для дуги XAML. Просто закройте дугу 99,99%, Zи вы получите круг!

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

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

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

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

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

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

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

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

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

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

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

Демонстрация jsfiddle: http://jsfiddle.net/crazytonyi/mNt2g/

Обновить:

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

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

В отношении решения Энтони, вот функция для получения пути:

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, вы также можете взять элемент круга и указать штрих-черту в псевдокоде:

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

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

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

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

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

Adobe Illustrator использует кривые Безье, такие как SVG, а для кругов создает четыре точки. Вы можете создать круг с помощью двух команд эллиптической дуги ... но тогда для круга в SVG я бы использовал <circle />:)

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

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

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

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`

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

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

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

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

Это предполагает, что ваша область холста имеет ширину 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% полным кругом. Визуально это то же самое. Избегайте флага развертки, просто начав круг в крайней правой точке круга (один радиус прямо горизонтально от центра).

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

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

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

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,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 и получить результат в консоли