Коловий малюнок з дуговим шляхом SVG

Коротке запитання: використовуючи шлях SVG, ми можемо намалювати 99,99% кола, і воно з’явиться, але коли це 99,99999999% кола, то коло не з’явиться. Як це можна виправити?

Наступний шлях 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,99999999% кола, то взагалі нічого не покаже?

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,9987? Який використовувати? Смішно потрібно знати, які показники будуть відображати на "занадто повне коло" і переходити на функцію кола, а коли це "певні 99,9%" кола або 9,9987 бал, а потім використовувати функцію дуги .

Те саме для дуги 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 людей, які використовують кишеньковийSVG який не розпізнає параметр svg дуги.

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 і отримати результат у консолі