konva.js变压器裁剪盒行为问题

有什么方法可以在下面的链接中对crospbox操作进行同样的操作吗？

我使用的是最新版本的konva，但在版本4之后，链接似乎不起作用。

https://codepen.io/kade87/pen/vYavQMp?editors=1011

如何使用它像最新版本中的链接一样工作？

我们必须解决这个问题。或者有一个javascript裁剪库同时支持pc和移动？如果是，请推荐。然而，大多数图书馆并没有按照我们想要的方式工作。

  <script src="https://unpkg.com/konva@^4/konva.min.js"></script>
  <div id="container"></div>

<script>
// noprotect

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
    img.setAttrs({
      width: stage.width(),
      height: stage.height(),
      opacity: 0.5
    });
  layer.add(img)
})

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  
  var group = new Konva.Group({
    clipFunc: (ctx) => {
      ctx.save();
      ctx.translate(fakeShape.x(), fakeShape.y())
      ctx.rotate(Konva.getAngle(fakeShape.rotation()))
      ctx.rect(0, 0, fakeShape.width() * fakeShape.scaleX(), fakeShape.height() * fakeShape.scaleY());
      ctx.restore()
    }
  })
  layer.add(group);
  img.setAttrs({
     width: stage.width(),
    height: stage.height(),
  });
  group.add(img);
  
  
  var fakeShape = new Konva.Rect({
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    fill: 'rgba(0,0,0,0)',
    draggable: true
  })
  layer.add(fakeShape);
  
  var tr = new Konva.Transformer({
    enabledAnchors: ['top-left', 'bottom-right'],
    rotateEnabled: false,
    keepRatio: false,
    flipEnabled: true,
    node: fakeShape,
    boundBoxFunc: (oldBox, newBox) => {
      if(newBox.width < 50) {
          newBox.width = 50
          // newBox.x = oldBox.x
      }
      if(newBox.height < 50) {
          newBox.height = 50
          // newBox.y = oldBox.y
      }
      return newBox
    }
  });
  layer.add(tr);
  
  layer.draw();
});
</script>