旋转图像后如何使图像在画布上居中（Konva.js）

Question

这是我在codesandbox上的代码，https://codesandbox.io/p/sandbox/adoring-shamir-7q32w7?file=%2Fsrc%2FApp.tsx%3A79%2C26
我试图在旋转图像后将图像置于画布上的中心。

它将图像放置到图像的初始左上角 x,y 位置。
所以如果图像旋转，它就不会再到中心了。
如果有任何解决方法，请分享。谢谢。

Answer 1

这应该有效：

function centerImage() {
    const img = imageRef.current;
    if (img) {
      const box = img.getClientRect();
      const offsetX = img.x() - box.x;
      const offsetY = img.y() - box.y;

      img.setAttrs({
        x: CANVAS_SIZE / 2 - box.width / 2 + offsetX,
        y: CANVAS_SIZE / 2 - box.height / 2 + offsetY,
      });
    }
  }

https://codesandbox.io/p/sandbox/recursing-margulis-txffh9?file=%2Fsrc%2FApp.tsx%3A66%2C3-78%2C4