Clipping Mask With Konva.js

Question

I've been using Konva.js's crop function to limit what can be seen inside a bounding shape (svg shape). I managed to place an image inside the shape.

Has anyone managed to write a similar function, but one that can move/resize/rotate the shape with the image inside, with the shape and the image moving together? It can also be possible to resize/move/rotate the content inside the shape.

It's very similar to CorelDraw's PowerClip function.

Thanks for the contribution.

https://codepen.io/Michael-Campos-the-solid/pen/emYwZvy

const frame = document.getElementById('meuFrame'); const elementos = frame.querySelectorAll('.elemento');

// Função para tornar o frame movível
interact(frame)
 .draggable({
 listeners: {
 start(event) {
 console.log(event.type, event.target);
 },
 move(event) {
 const target = event.target;
 const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
 const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 target.style.transform = `translate(${x}px, ${y}px)`;
 target.setAttribute('data-x', x);
 target.setAttribute('data-y', y);
 },
 }
 })
 .resizable({
 edges: { left: true, right: true, bottom: true, top: true },
 listeners: {
 move(event) {
 let { x, y } = event.target.dataset;
 x = (parseFloat(x) || 0) + event.deltaRect.left;
 y = (parseFloat(y) || 0) + event.deltaRect.top;
 Object.assign(event.target.style, {
 width: `${event.rect.width}px`,
 height: `${event.rect.height}px`,
 transform: `translate(${x}px, ${y}px)`
 });
 event.target.dataset.x = x;
 event.target.dataset.y = y;
 }
 },
 modifiers: [
 interact.modifiers.restrictEdges({
 outer: 'parent'
 }),
 interact.modifiers.restrictSize({
 min: { width: 100, height: 100 }
 })
 ],
 inertia: true
 });
// Função para tornar os elementos internos arrastáveis dentro do frame
elementos.forEach(el => {
 interact(el)
 .draggable({
 listeners: {
 move(event) {
 const target = event.target;
 const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
 const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 target.style.transform = `translate(${x}px, ${y}px)`;
 target.setAttribute('data-x', x);
 target.setAttribute('data-y', y);
 },
 },
 modifiers: [
 interact.modifiers.restrictRect({
 restriction: 'parent',
 endOnly: true
 })
 ]
 });
});