При разработке интерфейсов на управляемых формах программисты часто сталкиваются с задачей вывода изображений номенклатуры непосредственно в строках динамического списка. Казалось бы, задача тривиальная: добавить колонку, связать её с навигационной ссылкой и настроить масштаб. Однако на практике многие сталкиваются с неприятным эффектом: как только высота строки таблицы устанавливается больше единицы (для того, чтобы сделать картинку крупнее), изображение либо исчезает, либо отображается лишь его фрагмент (левый верхний угол) в натуральную величину без масштабирования.
В этой статье мы подробно разберем, почему стандартные механизмы 1С могут давать сбой, и рассмотрим наиболее эффективные способы решения этой проблемы, включая архитектурно правильный подход к работе с графикой в списках.
Разберем ситуацию, с которой сталкивается разработчик. В динамическом списке настроено поле с типом Картинка. Пока высота строки в свойстве таблицы установлена в значение 0 или 1, платформа пытается уместить изображение в стандартную ячейку. Но как только мы хотим сделать список более наглядным и устанавливаем ВысотаСтроки = 3 или более, свойство РазмерКартинки.Пропорционально перестает работать ожидаемым образом.
Проанализируем основные причины такого поведения:
АвтоВысотаЯчейки часто вступает в противоречие с механизмом масштабирования. Платформа не может одновременно высчитать высоту строки по контенту и сжать этот контент под заданную высоту.Первым делом рассмотрим "быстрое" решение, которое помогает в ряде случаев без изменения структуры хранения данных. Посмотрим на настройки свойств колонки таблицы и самой таблицы:
АвтоВысотаЯчейки в значение Ложь.ВысотаСтроки (например, 3 или 4).РазмерКартинки установлено в Пропорционально.Отображение в значение Текст и картинка (даже при пустом тексте) заставляет алгоритмы платформы пересчитывать границы изображения корректнее.Рассмотрим пример установки свойств программно, если это необходимо сделать при открытии формы:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Находим элемент формы, отвечающий за колонку с картинкой
НовыйЭлемент = Элементы.СписокИзображение;
НовыйЭлемент.РазмерКартинки = РазмерКартинки.Пропорционально;
// Отключаем автоматическое определение высоты для корректного рендеринга
НовыйЭлемент.АвтоВысотаЯчейки = Ложь;
// Устанавливаем высоту строк всей таблицы
Элементы.Список.ВысотаСтроки = 3;
КонецПроцедуры
Как показывает практика и рекомендации опытных разработчиков, использование оригинальных (полноразмерных) изображений в списках — это плохой тон с точки зрения производительности. Если в списке 1000 строк и каждая картинка весит 2 Мб, то при прокрутке система будет пытаться "прокачать" через память гигабайты данных.
Рассмотрим алгоритм создания миниатюр при сохранении основного изображения номенклатуры. Выясним причину, почему это лучше: миниатюра размером 150x150 пикселей весит в десятки раз меньше оригинала и идеально вписывается в ячейку без дополнительного сложного масштабирования.
Для создания миниатюр можно использовать встроенный объект 1С Картинка. Разберем пример кода для преобразования изображения:
&НаСервере
Функция СформироватьМиниатюру(ДанныеФайла)
ОригинальнаяКартинка = Новый Картинка(ДанныеФайла);
// Используем метод Преобразовать для изменения размера
// Параметры: Ширина, Высота, Формат, Качество и т.д.
Миниатюра = ОригинальнаяКартинка.Преобразовать(ФорматКартинки.JPEG, 200, 150);
Возврат Миниатюра.ПолучитьДвоичныеДанные();
КонецФункции
Внедрение этого подхода требует добавления дополнительного реквизита в справочник (например, ФайлПревью), куда будет записываться сжатая копия. В динамическом списке мы будем выводить именно эту копию.
Если возможностей встроенного метода Преобразовать() недостаточно (например, нужно наложить водяной знак или использовать специфические алгоритмы сглаживания), можно воспользоваться внешней утилитой, такой как ImageMagick (команда convert). Этот метод упоминался как наиболее надежный для получения качественных превью.
Проанализируем, как это работает программно:
ЗапуститьПриложение() консольную команду преобразования.
// Пример вызова внешней утилиты (упрощенно)
Команда = "convert """ + ПутьКФайлу + """ -resize 200x150 """ + ПутьКРезультату + """";
ЗапуститьПриложение(Команда, , Истина); // Ждем завершения
Выясним, какой метод выбрать в зависимости от условий задачи:
img src="..." внутри HTML-строки. Это дает идеальное управление масштабом через CSS (object-fit: contain), но крайне негативно сказывается на производительности списка, так как каждая ячейка становится тяжелым объектом.Если вы всё же решили оставить превью в строках, придерживайтесь следующих правил:
Подводя итог, можно сказать, что проблема "пустого поля" или "обрезанного угла" в таблицах 1С чаще всего связана с попыткой платформы обработать слишком большой объем графических данных в условиях ограниченного пространства ячейки. Переход на использование заранее подготовленных миниатюр не только решает проблему с визуальным отображением, но и значительно повышает комфорт работы пользователя за счет мгновенной прокрутки списка номенклатуры.