Raphael.js - преобразование кругового графа в пончик

Question

Я пытаюсь использовать пример Raphael.js, расположенный здесь:

http://raphaeljs.com/pie.html

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

function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        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);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }

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

Как добиться «дыр от бублика» с путями в Рафаэле

Answer 1

Способ создания одного среза пирога выглядит следующим образом:

1. переместиться в центр круга (cx, cy): "M", cx, cy
2. провести линию до края, где дуга начнется (x1, y1): "L", x1, y1
3. нарисоватьдуга, основанная на некоторых математических вычислениях: "A", r, r, 0, + (endAngle - startAngle> 180), 0, x2, y2
4. нарисовать линию назад к серединекруга: в этом случае используется «z»;это означает переход к началу координат (cx, cy)

и срез (путь) готов.

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

Итак, сначала вам нужно найти начальную точку пути, основываясь на радиусе воображаемого пустого круга.это будет в середине пончика (с радиусом рин ).Давайте назовем координаты этой точки xx1 и yy1:

xx1 = cx + rin * Math.cos(-startAngle * rad)
yy1 = cy + rin * Math.sin(-startAngle * rad)

Вы начинаете строить путь из этой точки ( "M", xx1, yy1 );http://jsfiddle.net/EuMQ5/425/

Следующий шаг - нарисовать линию к краю круга ( "L", x1, y1 ).Оттуда вам нужно будет нарисовать внешнюю дугу ( "A", r, r, 0, + (endAngle - startAngle> 180), 0, x2, y2 ), затем еще одну линию к другому ребрувнутренней дуги ( "L", xx2, yy2 ).Чтобы получить значения для xx2 и yy2:

xx2 = cx + rin * Math.cos(-endAngle * rad)
yy2 = cy + rin * Math.sin(-endAngle * rad)  

и последним шагом является завершение пути путем рисования внутренней дуги ( "A", rin, rin, 0, + (endAngle -startAngle> 180), 1, xx1, yy1 ).И теперь у вас есть кусок пончика.

Скрипка здесь.

** обновленная ссылка на скрипку

Answer 2

Почему бы вам просто не нарисовать круг в центре круговой диаграммы?

paper.add([
    {
        type: "circle",
        cx: 250,
        cy: 250,
        r: 150,
        fill: "#ffffff"
    },
]);