Наложение картинок или отображение картинок слоями в УФ - толстый/тонкий/web клиент ?

[oooo800]

Самописная конфигурация, УФ, платформа 8.3.23.1782.
Форма элемента справочника.
На ней несколько полей ввода, соответствующие реквизитам формы, типа СправочникСсылка, например:

Код Выделить Развернуть

- Фактура = СправочникСсылка.Фактуры;
- Фреза = СправочникСсылка.Фрезы;
- Фурнитура1 = СправочникСсылка.Фурнитура;
- Фурнитура2 = СправочникСсылка.Фурнитура;
- Фурнитура3 = СправочникСсылка.Фурнитура;
На этой форме потенциально размещено поле типа Картинка или Html.
Выбираем фактуру - она отображается как картинка на форме.
Далее выбираем фрезу и она добавляется - накладывается на уже отображаемые текстуру.
Аналогично и для фрнитуры1 ... фурнитуры3.
Если меняется фактура или фреза или фурнитураХ, то и о ответствующая часть изображения меняется.
Что-то вроде Пример на 4 шаге.
Там, правда, фурнитура не выбирается.

Как это возможно реализовать в 1С УФ - на "толстом" , "тонком" и web клиенте,без внешних компонент ?

Пока вижу вариант Html поля.
Дальше не понятно - слои через js или svg или контейнеры ?

Или все таки поле типа картинка "понянет" такое ?

[antoneus]

PNG с прозрачным фоном + CSS.

[oooo800]

antoneus, при этом возможно и замена картинки из "любого слоя" ?

[antoneus]

Ну в атрибут src подсовывать другие данные, возможно, почему нет.

[oooo800]

antoneus, при этом слой1 - базовый, тоже надо "перерисовывать" ?

У меня пока не получилось изменить слой2, не трогая слой1.

То есть:

Код Выделить Развернуть

<img class=""overlay-img_l1"" src=""data:image/png;base64," + КартинкаСлой1 + """>
<img class=""overlay-img_l2"" src=""data:image/png;base64," + КартинкаСлой2 + """>

По сути, полностью переформируется строка Html поля, с новым слой2, но старым Слой1
Или со старым Слой2, но новым Слой1.
Смотря, что меняется:
- Слой2 - да, Слой1 - нет;
- Слой2 - нет, Слой1 - да;

Возможно как-то этого избежать ?

[antoneus]

А если через объектную модель документа HTML? Раздать картинкам id-ы

Код Выделить Развернуть

<img id="img1" class=""overlay-img_l1"" src=""data:image/png;base64," + КартинкаСлой1 + """>
потом при изменении картинки

Код Выделить Развернуть

doc = Элементы.ПолеHTML.Документ;
elem = doc.getElementById(ИдКартинки);
elem.setAttribute("src", НовыеДанныеКартинки);

(не пробовал)

[oooo800]

antoneus, с некоторыми видоизменениями сработало.
Например, надо указывать полные параметры картинки:

Код Выделить Развернуть

elem.setAttribute("src", "data:image/png;base64," + КартинкаСлой2);

[antoneus]

Ну естественно)