Векторная графика

_static/vector.PNG

Начиная с версии 10.00 добавлена возможность использовать в экранах векторные графические объекты, нарисованные в векторном редакторе или сгенерированные из кода, управлять ими из обработчиков (онлайн и оффлайн), получать события. Общая идея – возможность размещения в контейнерах графичесикх полей, в которых есть некий рисунок(схема), состоящая из объектов к которым можно обратиться из кода по тегам (теги устанавливаются в редакторе), которые взаимодействуют с пользователем (пользователь может например нажимать) – т.е. объекты не только отображаются но и генерируют события, которые можно обработать в обработчике.

В общем случае работа с графикой начинается с векторного редактора, всторенного в приложение, где создается sug-файл (по сути JSON с объектами, размещенными на схеме). Потом этот файл можно прикрепить к конфигурации через Медиафайлы в конструкторе,ссылка на схему размещается в контейнере и далее с ним можно работать из обработчиков. Но такой вариант необязательный – файла может не быть. Схема склада, например может быть сгенерирована автоматически. Еще есть так называемый «режим редактирования» уже непосредственно в «экранах», где можно работать с хостом в пользовательском режиме.

С общими принципами работы можно ознакомиться в видео: Векторная графика в Simple UI

А также рекомендуется посмотреть примеры в конфигурации Примеры

И статью с обзором режима: Инфостарт: Векторная графика в Simple UI

Далее приведена справочная информация по используемым командам в различных режимах

Важные принципы по работе с векторной графикой:

  • Элемент контейнера называется «Поле карты»

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

  • Карты векторный редактор сохраняет в папку «Загрузки» (возможно изменится в других релизах)

  • Можно указывать имя карты в явном виде (по ключу медиафайла), можно через переменную

Работа с ячейками и схемами хранения

map_highlight_cells – установка цвета ячеек по адресам, параметр - JSON массив цветов и ячеек, например [{"color":"#f56042","cells":["1-1","1-2"]},{"color":"#2a60b8","cells":["2-4"]}] map_add_move – задание маршрута (шага) из ячейки в ячейку. Пример [{"from":"1-2","to":"2-2"},{"from":"2-2","to":"3-5] map_nav_mode - включает режим навигации с помощью алгоритмов map_set_size - задает относительные размеры холста. Пример параметра {"width":1000,"height":2000} map_add_rows – добавляет новый ряд ячеек с параметрами x,y – верхний левый угол, количество рядов и строк а также размер ячейки. Также задаются сразу адреса ячеек. Все переменные обязательны. Пример параметра команды: [{"x":20,"y":30,"row_count":5,"column_count":1,"cell_size":50,"tags":[["1-1","1-2","1-3","1-4","1-5"]]}] map_clear_rows - очистка списка рядов

Примечание

Данную комманду имеет смысл использовать совместно с командой map_set_size, так как размеры и координаты указываемые для ячеек должны быть пропорциональны размерам виртуального холста

Работа с событиями и тегами

При работе с объектами, подписанными тегами возникают следующие события c event = MapAction:

  • map_action_down – нажатие на объект

  • map_action_up - отпускание объекта

  • map_text_input – ввод текста в объект

Взаимодействие с объектами, кроме рядов ячеек

map_set_color – установить цвет элемента. Пример [{"tag":"arr1","color":"#000000"},{"tag":"btn1","color":"#000000"}] map_map_set_visibility – включить/выключить видимость элемента. Пример [{"tag":"arr2","visible":1},{"tag":"btn2","visible":1}]

Работа с картой

map_edit_mode – включение режима пользовательского редактирования. С пустым параметром map_background_picture – установка фона – картинки. Принципы работы такие же как с картинками в Simple UI map_background_html – установка в качестве картинки html на экране, по сути скриншот содержимого html. Важно! Данный метод можно вызывать только на экране, где есть html поле, т.е. до экрана в котором присутствует поле карты. Таким образом если нужно передать на редактирование печатную форму/отчет html, то должно быть 2 экрана – сначала html, потом экран редактирования map_save – сохранение того, что нарисовал пользователь вместе с фоном. В случае с включенным режимом mm_local возвращается переменная map_saved_file с именем файла, куда это записалось, если не включен этот режим то возвращается в map_saved_base64 map_zoom – увеличение карты. Пример «1.5» - увеличение в 1,5 раза map_move_x и map_move_y – сдвиги по осям. Имеет смысл использовать совместно с map_zoom. Можно указывать положительные (вправо, вниз) и отрицательные (влево, вверх) значения map_edit_mode – включение режима пользовательского редактирования. С пустым параметром

Запуск редактора карты в пользовательском режиме

RunVectorEditor, <путь к файлу карты *.sug> - открывает векторный редактор в режиме редактирования заданного файла, без возможности смены (если файла нет-создает). Доступна только кнопка сохранения. В случае успешного сохранения будет сгенерировано событие «vector_editor»