Рисование круга с траекторией дуги SVG - PullRequest
Новая
       90

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

134 голосов
/ 21 апреля 2011

Короткий вопрос: используя путь 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, тогда использовать функцию дуги .

Ответы [ 12 ]

0 голосов
/ 04 октября 2017

Я сделал 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 и получить результат в консоли

0 голосов
/ 01 марта 2016

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

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

Cubic Bezier curve

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

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />
Страница:
...