Рисование в 1С: от линий до интерактивных диаграмм — полное руководство с примерами кода

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

Мы разберём три ключевых подхода: использование ГрафическойСхемы для статических изображений, Канвы в управляемых формах для динамического рисования, и интеграцию с Библиотекой стандартных подсистем (БСП) для построения бизнес-графиков. Особое внимание уделим практическим примерам кода, которые можно сразу внедрить в свои конфигурации. Если вы когда-нибудь хотели добавить в отчёт цветную диаграмму или создать интерактивную карту склада — этот материал для вас.

1. Базовые инструменты для рисования в 1С

Платформа 1С:Предприятие 8 предлагает несколько встроенных механизмов для работы с графикой. Их выбор зависит от задачи:

• 📊 Графическая схема — статичные изображения (органиграммы, блок-схемы), создаются в конструкторе и хранятся в базе.
• 🎨 Канва — динамическое рисование в управляемых формах (линии, фигуры, текст) с обработкой событий мыши.
• 📈 Диаграммы БСП — бизнес-графики (столбчатые, круговые), требуют подключения библиотеки стандартных подсистем.
• 🖼️ Внешние компоненты — для сложной графики (например, GDI+ или SkiaSharp через COM-объекты).

Наиболее универсальными являются ГрафическаяСхема и Канва. Первая подходит для хранения шаблонов (например, схемы документооборота), вторая — для интерактивных элементов интерфейса (например, подписи на фотографии товара). Рассмотрим их подробнее.

⚠️ Внимание: Возможности рисования зависят от версии платформы. В 1С:Предприятие 8.3.20+ появилась поддержка сглаживания линий (антиалиасинг) на канве, а в 8.3.22 — новые методы для работы с градиентами. Уточните версию вашей платформы в Справка → О программе.

2. Графическая схема: создание и редактирование

Графическая схема — это объект конфигурации, который позволяет хранить в базе данных векторные изображения. Она состоит из Узлов (прямоугольники, эллипсы) и Соединителей (линии между узлами). Типичные применения:

• 🗺️ Схемы организационной структуры предприятия.
• 📄 Блок-схемы алгоритмов (например, для описания бизнес-процессов).
• 🏭 Планы размещения оборудования на складе.

Чтобы создать графическую схему:

1. В Конфигураторе добавьте новый объект ГрафическаяСхема (раздел Общие → Графические схемы).
2. В конструкторе перетащите узлы из палитры на рабочую область.
3. Настройте свойства узлов: цвет, текст, размеры.
4. Сохраните схему и используйте её в формах через элемент ПолеГрафическойСхемы.

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

Схема = ГрафическиеСхемы.Создать();
Узел = Схема.Узлы.Добавить();
Узел.Тип = ТипУзлаГрафическойСхемы.Прямоугольник;
Узел.Текст = "Отдел продаж";
Узел.ЦветФона = ВебЦвет.Аквамарин;

3. Канва: динамическое рисование в формах

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

• 🖌️ Интерактивность: обработка кликов, перетаскивания.
• 🔄 Динамическое обновление: перерисовка при изменении данных.
• 🎨 Сложные фигуры: дуги, кривые Безье, градиенты.

Добавьте канву на форму через палитру элементов (ПолеКанвы). Основные методы для рисования:

Канва.Очистить();
Канва.Линия(10, 10, 100, 100, ВебЦвет.Красный, 2); // Линия от (10,10) до (100,100)
Канва.Прямоугольник(50, 50, 150, 100, ВебЦвет.Синий, 1, ВебЦвет.Жёлтый); // Прямоугольник с заливкой
Канва.Текст(20, 20, "Пример текста", Новый Шрифт("Tahoma", 12), ВебЦвет.Чёрный);

Для обработки событий (например, рисование мышью) используйте процедуры формы:

Процедура ПолеКанвыМышь(Элемент, ДанныеМыши, СтандартнаяОбработка)
Если ДанныеМыши.КнопкаМыши = КнопкаМыши.Левая Тогда
Канва.Точка(ДанныеМыши.X, ДанныеМыши.Y, ВебЦвет.Зелёный, 3);
КонецЕсли;
КонецПроцедуры

Добавьте элемент ПолеКанвы на форму|

Установите размеры канвы (например, 800×600)|

Настройте обработчики событий (ПриИзмененииРазмера, Мышь)|

Определите глобальные переменные для хранения координат|-->

⚠️ Внимание: При большом количестве объектов на канве (более 1000) может наблюдаться торможение интерфейса. Для оптимизации используйте слои или упрощайте фигуры. В 1С:Предприятие 8.3.23+ появилась поддержка аппаратного ускорения для канвы — проверьте настройку ИспользоватьАппаратноеУскорение = Истина.

4. Построение диаграмм с помощью БСП

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

Алгоритм создания диаграммы:

1. Подключите БСП в конфигурации (если ещё не подключена).
2. Создайте на форме элемент ПолеДиаграммы.
3. В модуле формы инициализируйте диаграмму и загрузите в неё данные.

Пример кода для столбчатой диаграммы:

Диаграмма = ЭлементыФормы.ПолеДиаграммы.Диаграмма;
Серия = Диаграмма.Серии.Добавить();
Серия.Заголовок = "Продажи по месяцам";
Серия.ТипГрафика = ТипГрафикаДиаграммы.Столбик;

Данные = Новый Массив;
Данные.Добавить(Новый Структура("Категория,Значение", "Январь", 150000));
Данные.Добавить(Новый Структура("Категория,Значение", "Февраль", 180000));
Серия.Данные = Новый МассивДанныхДиаграммы(Данные);

БСП поддерживает следующие типы графиков:

• 📊 Столбчатая/линейная — для временных рядов.
• 🍩 Круговая — для долей (например, структура продаж по регионам).
• 🌡️ Точечная — для корреляционного анализа.
• 📈 Область — для накопленных значений.

ТабДок = Новый ТабличныйДокумент;
ТабДок.Вывести(ЭлементыФормы.ПолеДиаграммы.Диаграмма);
ТабДок.Записать("C:\Temp\Диаграмма.xlsx", ТипФайлаТабличногоДокумента.XLSX);

5. Практический пример: рисуем график продаж

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

Шаг 1. Подготовка данных

Предположим, у нас есть выборка продаж за неделю:

ДанныеПродаж = Новый Массив;
ДанныеПродаж.Добавить(Новый Структура("День,Сумма", "Пн", 12000));
ДанныеПродаж.Добавить(Новый Структура("День,Сумма", "Вт", 15000));
// ... остальные дни

Шаг 2. Рисование осей и графиков

В обработчике ПриОткрытии формы добавим код:

Процедура ПриОткрытии()
Канва = ЭлементыФормы.ПолеКанвы;
Канва.Очистить();

// Рисуем оси
Канва.Линия(50, 250, 750, 250, ВебЦвет.Чёрный, 2); // Ось X
Канва.Линия(50, 250, 50, 50, ВебЦвет.Чёрный, 2);   // Ось Y

// Рисуем столбцы
Для Каждого День Из ДанныеПродаж Цикл
X = 50 + (День.День = "Пн" ? 0 : (День.День = "Вт" ? 100 : 200)); // Упрощённо
Высота = День.Сумма / 500; // Масштаб
Канва.Прямоугольник(X, 250 - Высота, X + 80, 250, ВебЦвет.Голубой, 1, ВебЦвет.Синий);
Канва.Текст(X + 30, 270, День.День, Новый Шрифт("Arial", 10));
КонецЦикла;
КонецПроцедуры

Шаг 3. Добавление интерактивности

Чтобы при наведении на столбец показывалась подсказка с суммой, добавим обработчик Мышь:

Процедура ПолеКанвыМышь(Элемент, ДанныеМыши, СтандартнаяОбработка)
Если ДанныеМыши.Движение Тогда
Для Каждого День Из ДанныеПродаж Цикл
X = 50 + (День.День = "Пн" ? 0 : (День.День = "Вт" ? 100 : 200));
Если ДанныеМыши.X >= X И ДанныеМыши.X <= X + 80 Тогда
Сообщить("Продажи в " + День.День + ": " + День.Сумма);
КонецЕсли;
КонецЦикла;
КонецЕсли;
КонецПроцедуры

6. Оптимизация и производительность

При работе с графикой в 1С важно учитывать ограничения платформы:

• ⏳ Производительность канвы падает при большом количестве объектов. Оптимизируйте код, рисуя только видимые элементы.
• 🖼️ Графические схемы хранятся в базе — не перегружайте их высокодетализированными изображениями.
• 🔄 Диаграммы БСП автоматически масштабируются, но могут тормозить при большом объёме данных (более 1000 точек).

Советы по ускорению:

1. Используйте Канва.НачатьРисование() и Канва.ЗакончитьРисование() для пакетной отрисовки.
2. Для статичных изображений экспортируйте графику в Картинку и отображайте её через ПолеКартинки.
3. При работе с БСП ограничьте количество серий в диаграмме (оптимально — не более 5).

Пример оптимизированного кода для канвы:

Канва.НачатьРисование();
Для Инд = 1 По 1000 Цикл
Канва.Точка(Индекс, Индекс % 500, ВебЦвет.Красный, 1);
КонецЦикла;
Канва.ЗакончитьРисование();

⚠️ Внимание: В веб-клиенте 1С производительность канвы может быть ниже, чем в толстом клиенте, из-за особенностей рендеринга в браузере. Тестируйте графические элементы на целевой платформе.

7. Альтернативные подходы: внешние компоненты и интеграции

Если встроенных средств 1С недостаточно, рассмотрите следующие варианты:

Пример вызова GDI+ для создания изображения:

GDI = Новый COMОбъект("GDIPlus.GDIPlus");
Изображение = GDI.СоздатьИзображение(800, 600);
Кисть = GDI.СоздатьКисть(ВебЦвет.Красный, 2);
GDI.НарисоватьЛинию(Изображение, Кисть, 10, 10, 790, 590);
GDI.СохранитьИзображение(Изображение, "C:\Temp\Линия.png");

Для интеграции с Python можно использовать HTTP-Сервис:

1. Настройте на сервере скрипт на Python, который принимает данные и возвращает изображение.
2. В 1С отправляйте данные через HTTPСоединение и получайте картинку.
3. Отображайте результат в форме через ПолеКартинки.

8. Типичные ошибки и их решение

При работе с графикой в 1С разработчики часто сталкиваются со следующими проблемами:

• 🔴 Не отображается канва — проверьте, что элемент ПолеКанвы добавлен на форму и его свойство Видимость = Истина.
• 🔴 Диаграмма не обновляется — вызовите метод Обновить() после изменения данных.
• 🔴 Искажение изображений при экспорте — установите правильное соотношение сторон в настройках канвы.
• 🔴 Тормоза при рисовании — используйте НачатьРисование()/ЗакончитьРисование().

Пример решения проблемы с обновлением диаграммы:

Диаграмма = ЭлементыФормы.ПолеДиаграммы.Диаграмма;
Диаграмма.Серии.Очистить();
// ... загрузка новых данных
Диаграмма.Обновить(); // Явное обновление!

Если графическая схема не сохраняется, проверьте:

1. Права пользователя на изменение конфигурации.
2. Отсутствие блокировок объекта другими пользователями.
3. Корректность XML-структуры схемы (при ручном редактировании).

FAQ: Частые вопросы по рисованию в 1С

Картинка = ЭлементыФормы.ПолеКанвы.ПолучитьКартинку();
Картинка.Записать("C:\Temp\Рисунок.png");

ТабДок.ОриентацияСтраницы = ОриентацияСтраницы.Альбомная;
ТабДок.Вывести(Диаграмма, 0, 0, ТабДок.ШиринаСтраницы, ТабДок.ВысотаСтраницы);

Диаграмма.Легенда.Позиция = ПозицияЛегендыДиаграммы.Справа;

Процедура ТаймерАнимации(Элемент)
Статическая Угол = 0;
Угол = Угол + 5;
Канва.Очистить();
Канва.Линия(100, 100, 100 + 50  Cos(Угол), 100 + 50  Sin(Угол), ВебЦвет.Красный, 2);
КонецПроцедуры