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

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″>

Добавить комментарий