Произвольная графика в форме 1С:Предприятие 8.x

Интерактивное отображение произвольной 2D графики в форме приложения 1С:Предприятие можно реализовать в стандартном поле формы с установленным видом Поле HTML документа, которое предназначено для отображения изображений описанных языками HTML, XML и их расширениями SVG или VML. Формирование изображения в релизах до релиза 8.3.14 выполняется встроенным в платформу 1С браузером MS Internet Explorer, чьи версия, функциональность и опции отличаются от IE установленного в системе. Начиная с релиза 8.3.14 в платформу встроен кроссплатформенный движок WebKit с поддержкой HTML5, OpenGL, SVG и т.д. (подробней работа WebKit в составе платформы описана на //habr.com)

Поле HTML документа

Управляемая форма может содержать элемент вида Поле HTML документа, использующего в качестве источника данных реквизит типа Строка, в котором может находиться произвольный гипертекст удовлетворяющий требованиям HTML5. Элемент Поле HTML документа создает НаКлиенте веб-браузер Webkit, в котором создает документ соответствующий гипертексту из реквизита источника данных. Элемент обеспечивает НаКлиенте полный динамический доступ к веб-документу, каскаду его элементов и свойств и скриптам.

HTML данные

Строковый реквизит данных допускает массу альтернативных реализаций, типовая структура предполагает:

Гипертекстовый документ отображается в Поле HTML документа с отступом от левого и верхнего края, если размер документа выйдет за правую или нижнюю границы, то в поле будут автоматически отображены полосы прокрутки. Изменить описанные свойства поля можно следующими способами:

  • <style>body{margin:0; padding:0px}</style> — модифицирует внешний и внутренний отступы документа, устраняя их полностью
  • <style>body{overflow:hidden;}</style> — отменяет отображение полос прокрутки при выходе документа за границы
    • overflow-x:hidden; overflow-y:hidden; — отменяют отображение горизонтальной и вертикальной полосы прокрутки отдельно
    • <style>html{overflow:hidden;}</style> — отменяет отображение полос прокрутки в стиле html эквивалентно стилю body
    • overflow: auto | hidden | scroll | visible | inherit — предусмотренные значения
    • на самом деле оригинальные полосы прокрутки Wibkit отключаются средой 1С в любом случае, а наблюдаемые в поле полосы создаются 1С (оригинальные полосы можно кратковременно наблюдать, если в событии onLoad вызывать alert(), который блокирует содержимое поля до того, как 1С отключит оригинальные полосы).
  • <style>svg{overflow:visible;}</style> — отображает элементы блока svg выходящие за его границы (позволяет в тэге svg не указывать размеры).
  • <meta name=«format-detection» content=«telephone=no»> — отключает отображение телефонов как ссылок

///.

Текстовые блоки HTML

Если в поле необходимо реализовать отображение текстов с автоматическим переносом по словам в пределах заданной ширины колонки, то их отображение удобнее реализовать не средствами SVG, а тэгом DIV

style=»transform: rotate(-30deg);» поворачивает

«border-right:none;» без правой границы

.

SVG

Разметка SVG может быть использована в составе HTML для ПолеHTMLДокумента формы или как svg картинка размещенная на форме.

SVG в HTML

Начиная с релиза платформы 1С:Предприятие 8.3.14.xxx Поле HTML документа формы поддерживает формат описания графики SVG, которая предоставляет достаточно развитые графические средства отображения линий, эллипсов, полигонов, текстов, с заливами и окантовками, поворотами, искажениями, операциями с цветами и прозрачностью.

SVG в Картинке

Стандарт предусматривает svg-заголовок:

Но для корректного отображения в форме 1С достаточным svg-заголовком будет:

Элементы SVG

Линия

//

Эллипс
Полигон

Текст

В SVG предусмотрены средства вывода текста тэгом <>, однако в отличие от тэга <div>, он не поддерживается задание ширины колонки вывода текста и поэтому не предоставляет автоматический построчный перенос слов.

 

Стиль

Определение стиля позволяет назначить элементу набор значений атрибутов

 

VML

В релизах платформы 1С:Предприятие до 8.3.13.xxxx Поле HTML документа формы поддерживает формат описания графики VML.

Система координат

Левый верхний угол Поля HTML документа с увеличением x20 крат

В поле формы вида Поле HTML документа используется классическая система координат. Приведенная иллюстрация содержит x20 кратное увеличение левого верхнего угла поля формы с настройками по умолчанию, в котором отображены 3 элемента:

  1. красная линия (0,0)-(1,1)
  2. черная линия (1,1)-(8,8)
  3. синий прямоугольник (10,10)-(14,14)

Внимание: элементы в Поле HTML документа отображаются с отступом полей слева и сверху от рамки поля шириной 8 пикселей. Справа и снизу отступ полей не делается, поэтому элементы Поля HTML документа могут использовать пространство целиком, а в случае выхода за его пределы поле отображает полосы прокрутки. Часть изображения выходящая в отрицательные области системы координат не отображается и полосы прокрутки не вызывает.

Интерактивность

Поле HTML документа позволяет реализовать интерактивную работу с содержимым поля с помощью кода js в гипертексте, значений тэгов html-документа и методов управляемой формы. К сожалению некоторые средства предусмотренные стандартом HTML5 фактически не работают на движке Webkit в актуальных версиях платформы до 8.3.17.xxxx, поэтому ниже приведенные способы будут разделены на Теоретические и Практические.

Для обработки событий, которые могут происходить в Поле HTML документа, для него необходимо установить обработчик НаКлиенте ПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка), который будет вызывать при каждом событии.

Нажатия мыши

Клик мыши в Поле HTML документа обрабатывается 1С автоматически и не требует специального программирования в гипертексте. В этом случае 1С определяет объект под кликом и создает для него структуру события, которую передает обработчику события поля формы. В структуре

  • ДанныеСобытия.Event
    • .Event.type —
    • .Event.which —
    • .Event.clientX, .clientY — 120
    • .Event.layerX, .layerX — 20
    • .Event.offsetX, .offsetX — 20
    • .Event.pageX, .pageX — 120
    • .Event.screenX, .screenX — 777
    • .Event.x, .x — 120
    • .Event.shiftKey, .altKey, .ctrlKey — Ложь Булево
  • ДанныеСобытия.Button
    • .Button.id —
    • .Button.offsetLeft —
    • .Button.offsetTop —
    • offsetWidth — 200 Число
    • .Button.offsetHeight —
    • outerText — «Подготовка к начальному состоянию» Строка
    • innerText — «Подготовка к начальному состоянию» Строка
    • outerHTML — «<div class=»sp» id=»c42e96a9-59dc-11e9-8658-d0509947e11a» style=»left:100; top:120;
    • «>Подготовка к начальному состоянию</div>» Строка
    • innerHTML «Подготовка к начальному состоянию» Строка
  • ДанныеСобытия.Document
    • .Document.body —
      • .Document.body.offsetWidth
      • .Document.body.offsetHeight
      • .Document.body.offsetLeft
      • .Document.body.offsetTop
      • .Document.body.scrollLeft
      • .Document.body.scrollTop
      • .Document.body.outerHTML

При реализации интерактивности в Поле HTML документа его значение потребуется переустанавливать в модуле в процедуре обработки события поля ПриНажатии.

///

Прокрутка

///

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

Теоретически

Стандартным способом восстановления положения прокрутки /// в html-коде нового значения поля необходимо определить функцию init с вызовом метода window.scrollTo() с параметрами предыдущих значений положения

Практически

Однако в актуальных версия платформы 1С описанный способ не работает!!!…

Изменение размера

<body onResize=’onResize.click()’>
<button id=’onResize’ style=’display:none’></button> устанавливает по событию onResize документа нажатие одноименной скрытой кнопки, которое вызовет обработку события в 1С

События мыши

.x .y .clientX .clientY

.pageX .x — в окне

.offsetX .offsetY

.screenY абсолютные

pageYOffset всегда 0

событие scroll не вызывается и при описании в <body onscroll=’…’>, и при программном назначении document.body.scroll(function() {…})
пример назначения и отмены обработчиков событий: .on(«scroll», handler), поэтому убрать установленный обработчик можно с помощью .off( «scroll» )

Контекстное меню

.

Примеры

Источники

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