При разработке интерфейсов на управляемых формах часто возникает задача корректного отображения графической информации. Одной из типичных проблем является ситуация, когда загруженное изображение имеет разрешение, значительно превышающее размеры визуального элемента Поле картинки. В таком случае платформа по умолчанию может отображать только фрагмент изображения или добавлять полосы прокрутки, что портит пользовательский интерфейс. В рамках данной статьи мы разберем, как заставить картинку «вписываться» в отведенное ей пространство.
Самый простой и очевидный способ решить проблему — воспользоваться встроенными свойствами элемента формы. Если мы проанализируем палитру свойств визуального элемента ПолеКартинки, то в группе Оформление обнаружим свойство РазмерКартинки. Для того чтобы изображение автоматически подстраивалось под границы элемента, необходимо выбрать значение Пропорционально.
Рассмотрим подробнее, что происходит при выборе различных режимов:
Иногда требуется изменять поведение формы динамически, в зависимости от контекста или прав пользователя. Для этого мы можем управлять свойством РазмерКартинки непосредственно из кода на языке 1С. Разберем пример реализации в модуле формы. Чаще всего такую настройку логично делать в обработчике события ПриСозданииНаСервере или ПриОткрытии.
Посмотрим на пример кода, который устанавливает пропорциональное масштабирование:
&НаКлиенте
Процедура ПриОткрытии(Отказ)
// Устанавливаем режим отображения для элемента формы
Элементы.АдресКартинки.РазмерКартинки = РазмерКартинки.Пропорционально;
КонецПроцедуры
В данном примере АдресКартинки — это имя вашего элемента формы типа Поле картинки. Обратите внимание, что системное перечисление РазмерКартинки доступно как на клиенте, так и на сервере, что дает гибкость при разработке.
Проанализируем ситуацию, когда поле картинки находится не в самой форме, а в колонке таблицы (например, в динамическом списке номенклатуры). Здесь разработчики часто сталкиваются с проблемой: установка свойства РазмерКартинки.Пропорционально не дает видимого эффекта.
Выясним причину этого поведения. Платформа 1С в динамических списках зачастую не может корректно рассчитать размер картинки до того, как определена высота строки таблицы. Если высота строки установлена в значение 0 (авто), платформа игнорирует настройки масштабирования, чтобы не замедлять отрисовку списка. Чтобы исправить это, выполним следующие шаги:
После жесткого задания высоты строки механизм пропорционального масштабирования в колонках начинает работать корректно.
Важно помнить, что простое визуальное масштабирование на форме не уменьшает объем данных, передаваемых по сети. Если вы выводите фотографию весом в 10 Мб в маленькое поле 100x100 пикселей через режим Пропорционально, пользователь все равно будет ждать загрузки всех 10 Мб. Это критично для мобильных приложений и работы через тонкий клиент по медленным каналам связи.
Рассмотрим более продвинутый подход — изменение физического размера изображения на стороне сервера. Для этого воспользуемся объектом Картинка и его методом Преобразовать().
&НаСервере
Функция ПолучитьОптимизированнуюКартинку(ИсходнаяКартинка)
// Создаем объект на основе исходных данных
ОбъектКартинка = Новый Картинка(ИсходнаяКартинка);
// Если картинка слишком большая, преобразуем ее
// Параметры: Ширина, Высота, Формат, Качество и т.д.
НоваяКартинка = ОбъектКартинка.Преобразовать(ФорматКартинки.Jpeg, 300, 300);
Возврат НоваяКартинка;
КонецФункции
Использование метода Преобразовать позволяет не только изменить размер, но и сжать изображение, сменив его формат (например, из тяжелого BMP в легкий JPEG). Это значительно повышает отзывчивость интерфейса.
Проанализируем ситуацию с качеством отображения. При масштабировании растровых картинок (PNG, JPG) часто возникает эффект «размытости». В современных версиях платформы 8.3 реализована полноценная поддержка векторного формата SVG. Если ваша задача — отображение иконок, логотипов или схем, мы рекомендуем использовать именно SVG. Векторная графика масштабируется без потери качества до любых размеров, что полностью снимает вопрос настройки четкости при выборе режима Пропорционально.
Иногда пользователю недостаточно просто видеть картинку целиком — ему нужно иметь возможность приблизить отдельные детали. Стандартное Поле картинки не поддерживает масштабирование колесиком мыши. В таких случаях мы можем рассмотреть использование Поля HTML-документа.
Разберем логику этого решения: в поле HTML загружается простейший код, отображающий картинку, и добавляется небольшая библиотека на JavaScript, позволяющая реализовать полноценный зум и перемещение изображения внутри контейнера. Это более сложный, но профессиональный подход для работы с чертежами или детальными фото.
Подводя итог, можно сказать, что для большинства повседневных задач достаточно установить РазмерКартинки.Пропорционально, однако для сложных интерфейсов и высоконагруженных систем следует комбинировать визуальные настройки с серверной обработкой изображений.