Более элегантный способ изменить размер пути к сектору с помощью Raphaël JS и SVG?

Я использую Raphaëlв первый раз с небольшим опытом работы с svg, и мне нужен кто-то, кто действительно хорошо разбирается в этих двух, чтобы помочь мне.

Я создал круговую диаграмму с динамическими секторами. Размер секторов можно изменить, перетаскивая круглые кнопки. См. эту скрипку.Я тестировал только в Chrome и Safari, которые являются единственными необходимыми браузерами.

Круговая диаграмма еще не завершена. Сектора могут перекрываться. Пожалуйста, пока игнорируйте это.

Столкнулся с проблемой, когда начальный угол сектора был больше конечного угла. Это тот случай, когда конечный угол выходит за отметку 0/360°. Чтобы решить эту проблему, я использовал параметр path-rotate. Я переместил сектор вперед, а углы назад, пока конечный угол не будет равен 360. Вы можете увидеть это на скрипке в этой функции:

function sector_update(cx, cy, r, startAngle, endAngle, sec) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);


    var rotation = 0;

    // This is the part that I have the feeling could be improved.
    // Remove the entire if-clause and let "rotation" equal 0 to see what happens
    if (startAngle > endAngle) {
        rotation = endAngle;
        startAngle = startAngle - endAngle;
        endAngle = 360;
    }

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]);
}

Хотя это работает хорошо, я немного скептичен. Можно ли это решить без поворота пути? Я ценю любую помощь или указатели.

15
задан halfer 6 June 2012 в 11:23
поделиться