Моя "Доминикана" или Я и Рафаэль.

Доброго времени суток!

Конечно черепашка здесь не причем (а Вы о ком подумали? Я подумал вместе со статистикой). Нет сегодня мы попробуем использовать очень интересную библиотеку на JavaScript. Называется она Raphaël.  Она достаточно популярна, имеет хорошую документацию и самое главное выводит графики внутри 1С. Спасибо создателю библиотеки Dmitry Baranovskiy за его открытую лицензию и незабываем его благодарить.

Видео с разработчиком:

http://events.yandex.ru/events/yac/2012/talks/371/

Кто не хочет копаться во внутренностях представляем коммерческие обработки:

http://infostart.ru/public/190734/

http://infostart.ru/public/191306/

http://infostart.ru/public/191307/

А тех, кто засучил рукова и не боиться … (javascript кода). Прошу.

Примеры кода для экспериментов. Вставляйте в поле для кода и нажимайте обновить:

Пример 1:

// Creates canvas 640 × 480
var paper = Raphael(0, 0, 640, 480);

// Creates circle at x = 50, y = 40, with radius 10
var circle1 = paper.circle(100, 240, 100);
var circle2 = paper.circle(540, 240, 100);

// Sets the fill attribute of the circle to red (#f00)
circle1.attr("fill", "#f00");
circle2.attr("fill", "#00f");

// Sets the stroke attribute of the circle to white
//circle1.attr("stroke", "#fff");

var anim = Raphael.animation({cx: 320, cy: 100}, 2e3);
circle1.attr({ "opacity": "0" }).animate({ "opacity": "1" }, 1, "swing").animate(anim); // run the given animation immediately
circle2.attr({ "opacity": "0" }).animate({ "opacity": "1" }, 1, "swing").animate(anim.delay(1000)); // run the given animation after 500 ms

Пример 2:

var paper = Raphael(0, 0, 400, 400);
// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(100, 100, 100);
c.attr("fill", "red");
c.node.onclick = function () {
   color = Raphael.getColor();
   c.attr("fill", color);
};
c.node.onmouseover = function () {
    c.attr("fill", "blue");
};
c.node.onmouseout = function () {
    c.attr("fill", "green");
};

Пример 3:

var paper = Raphael(0, 0, 400, 400);

var attr = {
                fill: "yellow",
                stroke: "red",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
  tr1 = paper.path("M 100 100 L 300 100 L 200 300 z").attr(attr);

 // draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(100, 100, 100);
c.attr("fill", "red");
c.node.onclick = function () {
   color = Raphael.getColor();
   c.attr("fill", color);
};
c.node.onmouseover = function () {
    c.attr("fill", "blue");
};
c.node.onmouseout = function () {
    c.attr("fill", "green");
};

tr1.node.onclick = function () {
   color = Raphael.getColor();
   tr1.attr("fill", color);
};

Библиотека достаточно маленькая, это хорошо. Но примеры в ней я бы назвал слишком низкоуровневыми, видно поэтому автор развивает дополнительный проект http://g.raphaeljs.com/.

Р.S. Вот так незаметно для себя я стал поклоником этой библиотеки...