Проблема с изменением размера изображения на KonvaJs Jquery Canvas ⇐ Jquery

[Гость]

Я столкнулся с проблемой изменения размера изображения при наложении изображения на фоновое изображение с помощью KonvaJs JQuery. Я хочу установить изменение размера только для изображения, а не для всего размера изображения. Пожалуйста, найдите прикрепленный скриншот. Это поможет вам легко понять. Мне нужна ваша помощь, чтобы решить проблему. Измените размер изображения KonvaJs. Я ожидаю, что результат будет выглядеть следующим образом. Ожидаемое изменение размера изображения KonvaJs. Наложение фонового изображения. Спасибо

Я попробовал этот код.
// Создаем этап Konva.js var stage = новый Konva.Stage({ контейнер: 'холст-контейнер', ширина: 712, высота: 575, }); // Создаем слой Konva.js вар слой = новый Konva.Layer(); stage.add(слой); // Загрузите фоновое изображение (без возможности изменения размера) вар backgroundImg = новое изображение (); backgroundImg.src = customBgImagePath; backgroundImg.onload = функция () { вар фон = новый Konva.Image({ изображение: фонImg, ширина: 712, высота: 575, }); Layer.add(фон); // Загрузите изображение наложения (размер которого можно изменить) вар overlayImg = новое изображение (); overlayImg.src = удаленныйBgImagePath; overlayImg.onload = функция () { var overlay = новый Konva.Image({ изображение: оверлейимг, x: stage.width()/2 - overlayImg.width/2, // Центрировать по горизонтали y: stage.height()/2 - overlayImg.height/2, // Центрировать по вертикали перетаскивание: true, // Включить перетаскивание }); Layer.add(оверлей); сцена.рисовать(); // Создаем преобразователь Konva.js для изменения размера только наложенного изображения var tr = новый Konva.Transformer({ узлы: [наложение], //keepRatio: правда, //игнорироватьОбводку: правда }); тр.скрыть(); Layer.add(тр); // При нажатии на изображение overlay.on('клик', функция () { // Переключаем видимость и интерактивность Трансформера tr.visible(!tr.visible()); tr.enabled(tr.visible()); слой.рисовать(); }); stage.on('click', функция (событие) { // Скрываем Трансформер, если пользователь щелкнет где-нибудь еще на сцене tr.visible(ложь); tr.enabled (ложь); слой.рисовать(); }); // Включаем изменение размера наложенного изображения tr.on('transform', function () { Layer.batchDraw(); // Перерисовываем слой, }); /* dataURL = stage.toDataURL({ PixelRatio: 3 });*/ слой.Рисовать(); //// Перерисовываем холст при перетаскивании и изменении размера //overlay.on('dragmove', function () { // Layer.draw(); //}); //overlay.on('transform', function () { // Layer.draw(); //}); }; };