Как вывести картинки или фотографии горизонтально в ряд в табличном документе 1С

Программист 1С v8.3 (Обычные формы) IT и автоматизация бизнеса
← На главную

При формировании печатных форм, прайс-листов, карточек товаров или рекламных буклетов разработчики часто сталкиваются с необходимостью динамического вывода изображений. Типичная задача — расположить две или более фотографии в одну строку (горизонтально). Однако стандартный код часто преподносит неприятный сюрприз: изображения выводятся друг под другом со сдвигом вниз.

В этой статье мы подробно разберем, почему возникает эта проблема, проанализируем поведение платформы 1С при выводе областей и рассмотрим несколько надежных способов размещения картинок строго в ряд.

Выясняем причину: почему картинки переносятся вниз?

Основная причина нежелательного сдвига картинок по вертикали кроется в алгоритме работы базового метода Вывести(). Давайте обратимся к синтаксис-помощнику платформы 1С. Метод Вывести() добавляет указанную область в результирующий табличный документ всегда вслед за самой нижней выведенной строкой, начиная с первой колонки (то есть с левого края).

Когда мы пишем следующий код:


ТабличныйДокумент.Вывести(ОбластьКартинки1);
ТабличныйДокумент.Вывести(ОбластьКартинки2);

Платформа выполняет эти действия последовательно:

  1. Выводит первую область с первой картинкой в самый верх табличного документа.
  2. Определяет самую нижнюю границу полученного документа.
  3. Выводит вторую область со второй картинкой строго под этой границей.

Даже если программно задать для второго рисунка координаты Лево со смещением вправо, сам контейнер (область ячеек, в которой находится рисунок) все равно будет выведен строкой ниже. В итоге мы получаем ступенчатое расположение картинок.

Решение 1. Использование метода Присоединить()

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

Рассмотрим по шагам, как правильно реализовать этот механизм в коде. Нам потребуется разделить макет на вертикальные секции или использовать одну универсальную область.


// 1. Получаем область из макета
ОбластьКартинки = Макет.ПолучитьОбласть("ОбластьКартинки");

// 2. Создаем и позиционируем первый рисунок
Рисунок1 = ОбластьКартинки.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
Рисунок1.Верх = 5;
Рисунок1.Высота = 40;
Рисунок1.Ширина = 50;
Рисунок1.Лево = 5;
Рисунок1.Картинка = Новый Картинка("D:\base82\Goncharov\Акция.PNG");
Рисунок1.РазмерКартинки = РазмерКартинки.АвтоРазмер;

// Выводим первую картинку (она задает левую границу и строку)
ТабличныйДокумент.Вывести(ОбластьКартинки);

// 3. Очищаем область или подготавливаем второй рисунок
// Чтобы картинки не накладывались, мы можем пересоздать рисунок в этой же области с новыми координатами
ОбластьКартинки = Макет.ПолучитьОбласть("ОбластьКартинки");
Рисунок2 = ОбластьКартинки.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
Рисунок2.Верх = 5;
Рисунок2.Высота = 40;
Рисунок2.Ширина = 50;
Рисунок2.Лево = 5; // Координата "Лево" здесь задается относительно присоединяемой области!
Рисунок2.Картинка = Новый Картинка("D:\base82\Goncharov\Акция.PNG");
Рисунок2.РазмерКартинки = РазмерКартинки.АвтоРазмер;

// Присоединяем вторую область справа
ТабличныйДокумент.Присоединить(ОбластьКартинки);

При использовании метода Присоединить() крайне важно понимать, что координата Лево для второго рисунка рассчитывается не от начала всего табличного документа, а от левого края той области, которую мы присоединяем. Это существенно упрощает позиционирование элементов.

Решение 2. Размещение нескольких рисунков в одной области

Если количество картинок в ряду заранее известно (например, строго две картинки), то более простым и производительным решением будет добавление обоих рисунков в одну и ту же область макета перед ее выводом. В этом случае нам вообще не понадобится метод Присоединить().

Проанализируем пример кода для этого сценария:


// Получаем одну область, которая будет содержать оба изображения
ОбластьКартинки = Макет.ПолучитьОбласть("ОбластьКартинки");

// Добавляем первый рисунок (слева)
РисунокЛевый = ОбластьКартинки.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
РисунокЛевый.Верх = 5;
РисунокЛевый.Высота = 40;
РисунокЛевый.Ширина = 60;
РисунокЛевый.Лево = 5;
РисунокЛевый.Картинка = Новый Картинка("D:\base82\Goncharov\Акция.PNG");
РисунокЛевый.РазмерКартинки = РазмерКартинки.Пропорционально;

// Добавляем второй рисунок (справа, со смещением по координате Лево)
РисунокПравый = ОбластьКартинки.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
РисунокПравый.Верх = 5;
РисунокПравый.Высота = 40;
РисунокПравый.Ширина = 60;
// Смещаем правый рисунок на ширину первого рисунка плюс отступ (60 + 5 + 10 = 75)
РисунокПравый.Лево = 75;
РисунокПравый.Картинка = Новый Картинка("D:\base82\Goncharov\Акция.PNG");
РисунокПравый.РазмерКартинки = РазмерКартинки.Пропорционально;

// Выводим готовую область, содержащую сразу два рисунка
ТабличныйДокумент.Вывести(ОбластьКартинки);

Этот способ избавляет от необходимости совершать множественные вызовы принтера табличного документа и позволяет за один шаг сформировать законченный блок с изображениями.

Важные рекомендации при работе с рисунками в 1С

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

1. Использование метода Расположить() взамен ручного расчета миллиметров

Рассчитывать координаты Лево, Верх, Ширина и Высота вручную в миллиметрах — неблагодарное занятие. Сетка табличного документа измеряется в ячейках, ширина колонок зависит от шрифтов, а масштабирование при печати может сместить программно рассчитанные миллиметры.

Чтобы жестко зафиксировать картинку внутри определенных ячеек, используйте метод Расположить(). Он автоматически вписывает рисунок в указанную область ячеек:


// Выбираем диапазон ячеек внутри выводимой области
ОбластьДляКартинки = ОбластьКартинки.Область("R2C2:R10C5");
// Помещаем рисунок точно в границы этих ячеек
Рисунок.Расположить(ОбластьДляКартинки);

2. Избегайте прямых путей к файлам на диске (Клиент-серверный режим)

В коде из примера автора используется прямой путь к файлу: Новый Картинка("D:\base82\Goncharov\Акция.PNG"). Этот код моментально вызовет ошибку, если конфигурация будет запущена в клиент-серверном режиме работы. У сервера 1С нет доступа к локальному диску D:\ персонального компьютера пользователя.

Правильным подходом является хранение картинок в самой базе данных (например, в справочнике или макете в виде двоичных данных) и их последующая передача в объект:


// Получаем двоичные данные картинки из базы данных или временного хранилища
ДвоичныеДанные = ПолучитьДвоичныеДанныеКартинки(); 
Рисунок.Картинка = Новый Картинка(ДвоичныеДанные);

3. Выбор правильного режима масштабирования

Свойство РазмерКартинки определяет, как именно изображение поведет себя внутри выделенной под него области:

4. Удаление серых границ вокруг фотографий

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

Рисунок.Линия = Новый Линия(ТипЛинииРисункаТабличногоДокумента.НетЛинии);

Применяя данные методы и правила, вы сможете гибко и профессионально управлять выводом графической информации в любых отчетах и печатных формах на платформе 1С.

← На главную