image_pdfimage_print

Градиенты градиенты, а я маленький такой.

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

Рисование графики в 1С с помощью javascript библиотеки Raphael затягивает. И сегодня мы более подробно осветим тему заполнение цветом различных фигур и использовании градиентов.

Начальная обработка для 1С на infostart: http://infostart.ru/public/191248/

 

А теперь в поле для заполнения кода вставим:

Ну подумаешь красный шар. Эка невидаль. Его нарисовать можно и другими средствами. Их целый вагон.
Хорошо. А теперь последнюю строку заменим на другую:

Нравиться мне такая магия. Всего одна строка и немного чисел, а вид стал приятный для глаз. Можно попробовать прямо в браузере

red_ball

В документации к Raphael написано:

Линейный градиент пишется в формате: “‹угол›-‹цвет›[-‹цвет›[:смещение (‹offset›]]*-‹цвет”, например: “90-#fff-#000” — наклон 90° градиент от белого к черному или “0-#fff-#f00:20-#000” — наклон 0° градиент от белого через красный (на 20%) до черного.
Радиальный градиент записывается: “r[(‹fx›, ‹fy›)]‹цвет›[-‹цвет›[:смещение (‹offset›]]*-‹цвет”, например: “r#fff-#000” — градиент от белого к черному или “r(0.25, 0.75)#fff-#000” градиент от белого до черного с точки фокусировки на 0.25, 0.75. Точка фокуса координаты находятся в диапазоне 0..1. Радиальные градиенты могут быть применены только к кругу и эллипсу.

Это достаточно для работы, но в современных сложных технологиях надо понимать основы. Поэтому посмотрим на чем основана такая раскраска элементов. Посмотрим исходный код в браузере IE10:

<svg xmlns=»http://www.w3.org/2000/svg» style=»left: 0px; top: 0px; overflow: hidden; position: absolute;» width=»640″ height=»480″ version=»1.1″ xmlns=»http://www.w3.org/2000/svg»><desc>Created with Rapha?l 2.1.0</desc>
<defs>
<radialGradient id=»0r_0.25__0.75__f00-_400″ fx=»0.25″ fy=»0.75″>
<stop stop-color=»#ff0000″ offset=»0%» />
<stop stop-color=»#440000″ offset=»100%» />
</radialGradient>
</defs>
<circle style=»opacity: 1; fill-opacity: 1;» opacity=»1″ fill=»url(#0r_0.25__0.75__f00-_400)» fill-opacity=»1″ stroke=»#000″ cx=»200″ cy=»200″ r=»150″ />
</svg>

Здесь я советую на будущее погрузиться и узнать немного о CSS3 и SVG для градиентов: htmlbook, www.w3schools.com

 

И сделаем имитацию, как это работает внутри тонкого клиента 1С. Переустанавливаем(F12) режим браузера в совместимый и режим документов в IE7:

<?xml:namespace prefix = «rvml» ns = «urn:schemas-microsoft-com:vml» />
<rvml:shape style=»HEIGHT: 1px; POSITION: absolute; LEFT: 0px; FILTER: ; TOP: 0px; WIDTH: 1px» raphael=»true» raphaelid=»0″ coordsize = «21600,21600» filled = «t» fillcolor = «red» stroked = «t» strokecolor = «black» path = » ar1080000,1080000,7560000,7560000,4320000,1080000,4320000,1080000 x e»><rvml:stroke opacity = «1» miterlimit = «8»></rvml:stroke>
<rvml:skew on = «t» matrix = «1,0,0,1,0,0» offset = «-.5,-.5»></rvml:skew>
<rvml:fill rotate=»false» type = «gradientTitle» color2 = «#400» angle = «0» focus = «100%» focusposition = «.25,.75» focussize = «0,0» method = «none» colors = «0 red»></rvml:fill>
</rvml:shape>

Технологии Microsoft VML и Raphael помогают нам, получить практически такую-же картинку, что и в предыдущем примере.

Но одно разочарование нас все-таки ждет. В тонком клиенте 1C Linux градиент не работает. Может там просто webkit старый? Ну как обычно поворчим на 1С…

id=»0r_0.25__0.75__f00-_400″ fx=»0.25″ fy=»0.75″>

Расшифровки в 1С из графиков Рафаэля(raphaeljs)

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

Читая на досуге писание библиотеки Raphaelsj — RaphaëlJs Tutorial: http://cancerbero.mbarreneche.com/raphaeltut/

Задумаемся над интеграцией графиков Рафаэль и 1С. Что нам хочется? Хочется, чтобы нажатие на элемент графика можно было отловить в 1с и точно сказать на каком элементе мы нажали. Дальше внутри кода 1С мы сможем сделать что нам надо. Можно открыть форму пересчитать суммы или обновить график.

Возьмем обработку из предыдущей статьи Моя “Доминикана” или Я и Рафаэль.

В поле для кода наберем или скопируем следующий пример:

Наши идентификаторы элементов графика подчеркнуты. В коде 1С напишем обработку нажатия на поле HTML.

И все начинает работать!
Наложение фигур работает правильно.
Но есть нюанс, который вы наверно сразу заметили. Во всех браузерах(вэб клиентах) границы фигур определяются правильно. В тонком клиенте Windows границы расширяются до квадрата содержащего фигуру. Плохо, но видимо движок в тонком клиенте очень специфичный. Бороться с этим не получиться, просто будем знать специфику.

Второй метод заключается в инициализации внутри htmlПоля события click. Пример:

Но не все так безоблачно становиться с новыми версия 1С 8.3. Передача параметров становиться нестабильной. Для работы во всех версиях 1С прдлагаю использовать строковой параметр window.event.data и почутать данные в 1С следующим образом:

 

P.S.

Так постепенно 1С становиться понятнее. Хотя некоторые ответственные товарищи утверждают, что это магия

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

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

Привет ‘Доминикане’ в Тайланде (http://infostart.ru/dominikana/) из пыльной и грязной Москвы.

dominicana1C-2

Конечно черепашка здесь не причем. А Вы о ком подумали? Я подумал вместе со статистикой. Нет сегодня мы попробуем использовать очень интересную библиотеку на JavaScript. Называется она Raphaël [‘ræfeɪə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 кода. Прошу. Обработка на infostart.ru http://infostart.ru/public/191248/.

Пример анимации

Смотрим. Нравиться? Есть поле для изменения кода на javascript, начнем экспериментировать…

 

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

Пример 1: Начало

raphaeljs1

Пример 2: Анимация

raphaeljs2
Пример 3: Отслеживание событий

raphaeljs3
Пример 4: Псевдотрехмерность

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

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