SVG-виджеты для tcl/tk. Градиентная заливка и прозрачность. Часть II
Продолжим знакомство с svg-виджетами для tcl/tk. Напомним, что рассматриваемые примеры, сам пакет svgwidgets и интерпретаторы tcl/tk с необходимыми пакетами можно найти на github-е. После выхода первой статьи все они претерпели изменения. Начнем мы статью с рассмотрения примера скрипт_button_PACK.tcl:
$/usr/local/bin64/tclexecomp140_svg_Linux64 скрипт_button_PACK.tcl
В этом примере добавлена кнопка для запуска интерпретатора tclexecomp. При нажатии на эту кнопку появляется окно консоли, а кнопка перепрофилируется в кнопку скрытия консоли:
Если щелкнуть по любой из кнопок (кроме кнопки управления консоли), то в консоли будет напечатан идентификатор объекта кнопки. Итак, щелкаем по кнопке Эллипс и в консоли получаем следующий результат:
%
Эллипс=::oo::Obj61 Левый фрейм=::oo::Obj58
%Посмотрим заливку объекта «левый фрейм»:
%::oo::Obj58 config -fillnormal
snow
%Поменяем заливку фрейма с цвета снега (snow) на голубую (cyan):
%::oo::Obj58 config –fillnormal cyan
Мы видим, что виджеты не прямоугольной формы имеют прямоугольное обрамление с заливкой отличной от цвета виджета, в котором они размещены. Это обрамление имеет цвет холста, на котором размещен виджет:
% [::oo::Obj61 canvas] configure -background
-background background Background #d9d9d9 snow
%Это уже знакомый нам цвет снега snow. Чтобы все привести в порядок необходимо наследование заливки -background для стандартных виджетов или –fillnormal для svg-виджетов. В нашем примере это можно сделать следующим образом:
% set colframe [::oo::Obj58 config -fillnormal]
cyan
% foreach wincan [pack slaves [::oo::Obj58 canvas]] {$wincan configure -background $colframe }
%
А что будет, если заливку cyan заменить на градиентную заливку?
Для начала создадим градиентную заливку для нашего фрейма:
% set gradCloud [[::oo::Obj58 canvas] gradient create linear -method pad -units bbox -stops { { 0.05 "#87ceeb" 1.00} { 0.17 "#ffffff" 1.00} { 0.29 skyblue 1.00} { 0.87 "#ffffff" 1.00} { 1.00 skyblue 1.00}} -lineartransition {1.00 0.00 0.75 1.00} ]
gradient5
%После создания градиента зальем им наш холст:
% ::oo::Obj58 config -fillnormal gradient5
%
Мы снова столкнулись с той же проблемой, что и при смене просто цвета заливки, но разрешить эту проблему тем же способом не удастся. Кстати, такая же проблема возникает при использовании для размещения виджеты компоновщика place. И тут нам на помощь приходит пакет treectrl, в котором есть функция loupe.
Эта функция позволяет делать снимок любого участка экрана, а при желании, и масштабировать его. Отсюда и название функции loupe:
loupe <имя image> где поле <имя image> содержит идентификатор изображения, создаваемого командой
image create photo –width <ширина> -height <высота>
Координаты x и y задают центр снимаемой области (подчеркиваю, ЦЕНТР), w — это ширина области, а h — высота снимаемой области.
Таким образом, функция loupe снимает (делает скриншот) участок со следующими координатами:
X0 = x – w/2, y0 = y – h/2
X1 = x + w/2, y1 = y + h/2
Для решения вышеуказанной проблемы был реализован в каждом классе svg-виджетов метод fon. Задачей этого метода является сделать снимок участка экрана, на котором будет размещен svg-виджет и разместить этот снимок на нижнем слое холста виджета.
Если внимательно посмотреть на команду foreach, то можно заметить, что для виджета :: Прямоугольник метод fon не применялся. Для прямоугольных виджетов его можно не применять, картинка будет закрыта самим виджетом. Но тут есть нюанс. Этот нюанс связан с прозрачностью виджета. SVG-виджеты могут быть прозрачными. Прозрачность svg-виджетов задается через опцию –fillopacity, которая может принимать значение от 0 (полностью прозрачный виджет) до 1 (непрозрачный виджет). Прозрачность позволяет видеть либо цвет холста виджета (параметр -background), либо просматривать фон, на котором лежит виджет и который создается при вызове метода fon. Посмотрим на прозрачность на примере кнопки «Эллипс». Для начала установим его значение равным 1 (По умолчанию это значение не определено и виджет непрозрачен), а затем установим значение 0.5, т.е. сделаем полупрозрачным:
Для полной прозрачности svg-виджеты опция –fillopacity устанавливается в 0. Кстати, окантовка виджетов тоже может быть прозрачной (опция -strokeopacity).
Если вы попробуете изменить размеры окна (обратите внимание на стрелку в правом нижнем углу скриншота), то может быть нарушена градиентная заливка на холстах вложенных виджетов:
Чтобы исправить ситуацию, нужно повторно обратиться к методу fon:
%foreach obj "Прямоугольник ::oo::Obj95 ::oo::Obj96 ::oo::Obj97" {$obj fon}
%А можно ли избежать этих недостатков? Да, можно. Все, что для этого нужно, так это размещать svg-виджеты на одном холсте с указанием координат каждого размещаемого виджета. Итак, создаем холст, на котором будем размещать необходимые нам svg-виджеты:
% set mainfr [cframe new .mainf -type frame -fillnormal yellow -rx 0 -strokewidth 0 -stroke ""]
::oo::Obj108
% ::oo::Obj108 pack -fill both -expand 1
%
По умолчанию для такого холста (класс cframe и тип frame) установлена обработка события
%bind .mainf
::oo::Obj151 scaleGroup .mainf %w %h %x %y;::oo::Obj151 resize %w %h 0
% На период разработки gui (отладки) можно отключить эту обработку, а по завершении ее можно будет восстановить:
%set bindorig [bind .mainf ]
% bind .mainf {}
#разработка gui
#Восстановление обработки
% bind .mainf $bindorig
% Теперь на созданном холсте (.mainf или [:: oo: Obj108 canvas]) можно размещать svg-виджеты, например:
%set went [cframe new .mainf -type centry -rx 2m -height 7m -x 25m -y 10m -width 10c] 
При создании виджетов на уже существующем холсте необходимо явно указывать его коордитаты (опции –x и –y), а также высоту и длину виджета (опции –height и -width. Если опции –x и –y не указаны, то виджет размещается с координатами равными нулю. В этом случае для размещения виджета в нужном месте потребуется метод move (переместить):
где dx и dy задают сдвиг по оси X и Y.
Если dx и dy равны 0, то метод возвращает дескриптор объекта:
%::oo::Obj065 move 0 0
canvasbObj65
%Продвинутые юзеры могут его использовать для низкоуровнего конфигурирования svg-виджета.
Можно не только перемещать виджет, но и менять его размеры:
При размещении svg-виджетов непосредственно на существующем холсте необходимость в методах fon, place, pack и grid отпадает, они в этом случае не используются.
Иногда бывает полезным скрыть (сделать невидимым) тот или иной виджет:
Возврат виджета в нормальное состояние выполняется командой:
В примерах на github-е лежит скрипт скрипт_button_Холст.tcl. Если вы запустите его, то получите следующую картинку:
Как работает обработка события
Проект находится в начале пути, но уже сегодня с ним вполне можно создавать различные приложения с gui.
Кто-то может спросить, а что со средой разработки. На мой взгляд, графика tcl/tk настолько проста в использовании, что имея под рукой интерпретатор типа freewrap или его клон tclexecomp, можно достаточно быстро создать прототип графического интерфейса. Кстати, вместо freewrap и tclexecomp можно использовать и пакет tkcon.
Но все же, в голове сидит: «А почему бы не написать конструктор графического интерфейса?»
И вот параллельно с самим проектом потихоньку создается плагин (windowMegaWidgets.tcl), который можно будет использовать и в vTcl, и в TkProE, и даже в графическом редакторе tksvgpaint:
А там, глядишь, svg-виджеты перекочуют в python/Tkinter, а плагин станет доступен в графическом конструкторе Page для Python.
Но обо всем этом в следующих публикациях.
Добавим, что svg-виджеты, также как и tcl/tk, доступны на платформах Linux, Windows и Android.
Habrahabr.ru прочитано 1735 раз
