Рисуем круговую диаграмму с помощью ActionScript 2.0

Сегодня будем делать круговую диаграмму на ActionScript 2.0

Я недавно столкнулся с такой задачей и подумал: "Ох, сейчас придется лезть в математику и тригонометрию, высчитывать углы и тому подобную ерунду!"

Но на самом деле все оказалось проще, чем я думал. Не нужно было изобретать велосипед, достаточно было лишь задействовать уже готовый метод, разработанный программистом по имени Ric Ewing. Этот метод называется drawArc и позволяет нам рисовать арки заданного радиуса и угла.

Скачать эти методы и посмотреть, как они работают можно здесь http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html
Итак, что у нас имеется. У нас есть метод drawArc, который принимает значения x и y пера (то есть точки, откуда начнется рисование дуги), радиус окружности, направление рисования (положительные значения задают рисование против часовой стрелки, отрицательные - по часовой) и изначальный угол поворота дуги (для наших целей он будет равен 0).
Ну, приступим =)

Нарисуем основу для нашей диаграммы, а именно окружность. Я нарисовал 130px в диаметре.

Поверх этой окружности будем рисовать сегменты - процентные доли. Я вижу это так: мы создаем пустой мувиклип, рисуем прямую с радиусом, оттуда рисуем арку, и возвращаем перо обратно. Затем центрируем сегмент относительно окружности и задаем нужный угол поворота.

Чтобы использовать метод, подключим сначала файл drawArc.as

#include "drawArc.as"

Напишем маленькую функцию для перевода процентов в градусы. Она нам пригодится =)

function percentToDegree(percent) {
    return (360*percent/100);
}

Теперь же напишем функцию для рисования сектора. В качестве параметров зададим мувиклип, в котором будем рисовать, радиус и угол.

function drawIt(mc, radius, degree) {
    mc.clear();
    mc.lineStyle(1,0x6688AA); //сойдет любой, позже объясню почему
    mc.beginFill(0x3366); // здесь тоже не имеет значения цвет
    mc.moveTo(0,0);
    mc.lineTo(radius,0);
    mc.drawArc(radius,0,radius,-degree,0);
    mc.lineTo(0,0);
    mc.endFill();
}

Итак, почему цвет не имеет значения. А только потому, что мне сейчас не особо хочется углубляться в программирование только для того, чтобы все выглядело красиво. Это я как-нибудь в отдельном посте оформлю. Пока что я хочу лишь показать принцип рисования сегмента окружности. Но я все-таки хочу, чтоб все было красиво, поэтому сделаем поверх нашей окружности еще мувиклип с окружностью, закрашенной красивым градиентом. Да и применим фильтр DropShadow заодно. А нарисованный сегмент будет служить нам маской =) Обзовем новую окружность green_mc.

Теперь можно и рисовать. Создаем новый мувиклип, в котором будем рисовать сегмент.

this.createEmptyMovieClip("segment1", this.getNextHighestDepth());
drawIt(segment1, 60, percentToDegree(20));
/* рисуем сегмент с помощью нашей функции, так как основа диаграммы 130px в диаметре, то я задал радиус 60px, сегмент сам будет занимать 20 процентов диаграммы */
green_mc.setMask(segment1);
segment1._x = green_mc._x + green_mc._width/2; // центрируем сегмент
segment1._y = green_mc._y + green_mc._height/2;
segment1._rotation = 0; // задаем угол поворота

Вот, что должно получиться:

Чтобы добавить еще один сегмент в 20 процентов, нужно написать такой код:

this.createEmptyMovieClip("segment2", this.getNextHighestDepth());
drawIt(segment2, 60, percentToDegree(20));
yellow_mc.setMask(segment2); // yellow_mc это новая окружность с желтым градиентом, также поверх основы нашей
segment2._x = green1_mc._x + green1_mc._width/2;
segment2._y = green1_mc._y + green1_mc._height/2;
segment2._rotation = segment1._rotation + percentToDegree(20); // поворот задаем относительно первого сегмента

И вот, что получается теперь:

Момент, на который стоит обратить внимание: если вы _rotation задаете цифрой, то все нормально, но если же вы хотите добавить динамичности и делать так, как мы сделали со вторым сегментом, то необходимо учесть, что углы более 180 градусов становятся отрицательными. Вот картинка для наглядности.

Надеюсь вам пригодится этот урок. Спасибо за внимание и удачи =)

Исходники можно скачать здесь (Flash CS3)

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.