новое событие
Информационный поток
Задания вакансии материалы разработки сообщения форума
Яндекс-директ

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

  • Добавить свою разработку
 
Кудашкин Сергей Иванович
Связаться с автором
25.06.2013 14:44:38
+1
Хотите рисовать в 1С современную графику с HTML5? Предлагаю реальный метод работающий в толстом, тонком и web-клиенте 1С 8.2 и 8.3.
Скриншоты
Описание

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

Конечно черепашка здесь не причем (а Вы о ком подумали? Я подумал вместе со статистикой). Нет сегодня мы попробуем использовать очень интересную библиотеку на 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. Вот так незаметно для себя я стал поклоником этой библиотеки...

Ключевые слова:   html   html5   svg   графика   картинки   Тонкий клиент   вэб-клиент
Файлы для скачивания
    • скачиваний: 2418
    • дата загрузки: 24.07.2013 16:59:00
0
    Разработки
    [УТ 11] SubSys: Прайс-лист с остатками и картинками для Управление торговлей 11
    Прайс-лист расширенный- вывод картинок, остатков для УТ 11
    Каталог с изображениями в Торговле
    Как создать каталог с картинками в УТ 10.3
    Универсальный почтовый калькулятор
    Расчет почтовых тарифов
    Универсальный почтовый калькулятор
    Расчет почтовых тарифов
    Читайте также
    Вывод изображения на управляемую форму
    Как вывести изображение на упр. Форму
    ≡ к списку разработок
    Яндекс-директ