На каких технологиях создаются онлайн-конструкторы товаров и как реализовать их поддержку в 1С

← На главную

Современные веб-интерфейсы для заказа продукции с индивидуальным дизайном (конструкторы футболок, кружек, визиток) прошли долгий путь от громоздких Flash-приложений до высокопроизводительных решений на базе HTML5. В этой статье мы подробно разберем, какие технологии пришли на смену устаревшим стандартам, как работают современные графические движки и каким образом интегрировать подобные решения в экосистему 1С.

Графические движки: Canvas против SVG

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

HTML5 Canvas: Это растровый холст, который идеально подходит для работы с фотографиями и сложными эффектами. Большинство библиотек для конструкторов используют именно его, так как он обеспечивает высокую производительность при манипуляции тысячами пикселей.
SVG (Scalable Vector Graphics): Векторная графика. Она незаменима, если конечный результат должен быть отправлен на плоттер или широкоформатную печать без потери качества. SVG позволяет легко управлять объектами через DOM, но может замедляться при огромном количестве элементов.

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

Fabric.js — пожалуй, самый популярный выбор. Она создает объектную модель поверх Canvas. Это означает, что вы работаете не просто с набором пикселей, а с объектами: fabric.Rect, fabric.IText или fabric.Image. Каждый объект можно программно вращать, масштабировать и изменять его свойства. Выясним причину популярности: Fabric позволяет легко сериализовать весь проект в формат JSON и восстановить его позже, что критически важно для передачи данных в 1С.

Konva.js — мощный конкурент, ориентированный на производительность и сложную иерархию слоев. Если ваш конструктор предполагает создание сложных многослойных композиций с анимацией, Konva станет отличным выбором.

Современная 3D-визуализация на базе WebGL

Выясним, что пришло на смену Flash в контексте объемного представления товаров. Если раньше для демонстрации кружки с принтом со всех сторон требовалось делать десятки фотографий, то сегодня стандартом является Three.js. Эта библиотека работает с технологией WebGL и позволяет:

Загружать реальные 3D-модели изделий (форматы .obj, .gltf).
Накладывать пользовательский принт как текстуру на 3D-объект в реальном времени.
Настраивать освещение и материалы, чтобы покупатель видел, как будет выглядеть глянцевый или матовый принт.

Реализация логики конструктора на стороне 1С

Теперь разберем, как объединить возможности современного веба и учетной системы 1С. Существует два основных сценария работы:

Сценарий 1: Интеграция через Поле HTML документа

В управляемых формах 1С мы можем использовать стандартный реквизит типа Строка, связанный с элементом формы Поле HTML документа. Проанализируем ситуацию: мы можем загрузить внутрь 1С полноценный JS-конструктор. Менеджер по продажам сможет корректировать макет прямо в интерфейсе 1С.

Для передачи данных из JS в 1С используется событие ПриНажатии или специализированные механизмы взаимодействия (в зависимости от версии платформы). Посмотрим на пример того, как может выглядеть обработка JSON-данных макета в 1С:


// Пример разбора структуры макета, пришедшей из JS-конструктора
Процедура ОбработатьМакетИзВебФормы(ДанныеJSON)
    Чтение = Новый ЧтениеJSON;
    Чтение.УстановитьСтроку(ДанныеJSON);
    СтруктураМакета = ПрочитатьJSON(Чтение);
    
    Для Каждого ЭлементДизайна Из СтруктураМакета.objects Цикл
        Если ЭлементДизайна.type = "text" Тогда
            Сообщить("Пользователь добавил текст: " + ЭлементДизайна.text);
        ИначеЕсли ЭлементДизайна.type = "image" Тогда
            Сообщить("Использовано изображение из источника: " + ЭлементДизайна.src);
        КонецЕсли;
    КонецЦикла;
КонецПроцедуры

Сценарий 2: Получение готовых заказов через HTTP-сервисы

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

Пользователь собирает макет в браузере.
Сайт формирует JSON-описание макета и, опционально, PNG-превью.
Данные отправляются в 1С через HTTP-сервис.
1С создает документ Заказ клиента и прикрепляет к нему данные макета.

Генерация файлов для печати (Print-Ready Files)

Одной из сложнейших задач является перевод того, что пользователь видел в браузере (в разрешении 72 DPI), в качественный макет для типографии (300 DPI и выше). Использовать для этого встроенные средства 1С крайне затруднительно. Рассмотрим правильный архитектурный подход:

Для генерации макета на сервере часто применяются «безголовые» браузеры (например, Puppeteer). Схема работы такова: 1С отправляет команду серверу печати, тот запускает скрытый экземпляр браузера, рендерит макет в огромном разрешении и сохраняет его в PDF или TIFF. 1С получает ссылку на готовый файл, который менеджер отправляет в производство.

Возможно ли сделать конструктор полностью на 1С?

Как отмечалось в обсуждении, технически в 1С можно реализовать перемещение картинок по форме. Используя управляемые формы, мы можем обрабатывать координаты кликов и программно изменять положение элементов. Однако стоит признать, что такой интерфейс будет значительно уступать специализированным JS-библиотекам по плавности и возможностям (например, по работе с кривыми, тенями или сложными шрифтами).

Резюмируем: наиболее эффективный подход сегодня — это использование Fabric.js или React-based решений для фронтенда и глубокая интеграция с 1С через JSON-протоколы для хранения и обработки заказов. Это позволяет бизнесу получить современный инструмент продаж, а программисту — надежную систему управления данными.