react-konva使用可拖动的stage和滚动缩放功能拖放图像-如何更改拖放位置以匹配缩放/当前位置

npm install react-konva konva

import React, { useState } from 'react';
import { Stage, Layer, Image } from 'react-konva';

const MyComponent = () => {
  const [scale, setScale] = useState(1);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDragEnd = (e) => {
    // 更新拖放位置
    setPosition({ x: e.target.x(), y: e.target.y() });
  };

  const handleWheel = (e) => {
    e.evt.preventDefault();

    // 计算缩放比例
    const scaleBy = 1.1;
    const newScale = e.evt.deltaY > 0 ? scale / scaleBy : scale * scaleBy;

    // 更新缩放比例
    setScale(newScale);
  };

  return (
    <Stage
      width={window.innerWidth}
      height={window.innerHeight}
      draggable
      onWheel={handleWheel}
    >
      <Layer>
        <Image
          draggable
          x={position.x}
          y={position.y}
          scaleX={scale}
          scaleY={scale}
          image={yourImage}
          onDragEnd={handleDragEnd}
        />
      </Layer>
    </Stage>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};