// 处理鼠标滚轮缩放

    const handleWheel = useCallback((e: KonvaEventObject<WheelEvent>) => {

        // 1. 阻止原来的默认滚动事件

        e.evt.preventDefault();

        const stage = stageRef.current;

        if (!stage) return;

        console.log(stage.x(), stage.y())

        // 2. 获取当前的缩放状态

        const oldScale = stage.scaleX();

        const pointer = stage.getPointerPosition();

        console.log(pointer)

        if (!pointer) return;

        // 3. 计算鼠标点在内容坐标系的真实位置

        const mousePointTo = {

            x: (pointer.x - stage.x()) / oldScale,

            y: (pointer.y - stage.y()) / oldScale,

        };

        // 4. 确定缩放方向和比例

        let direction = e.evt.deltaY > 0 ? 1 : -1;

        // 如果按住 Ctrl 键，反转方向

        if (e.evt.ctrlKey) {

            direction = -direction;

        }

        const scaleBy = 1.2; // 每次缩放的比例

        let newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;

        // 5. 限制缩放比例

        newScale = Math.max(0.2, Math.min(4, newScale));

        // 更新缩放比例

        stage.scale({ x: newScale, y: newScale });

        // 计算新的偏移量

        const newPos = {

            x: pointer.x - mousePointTo.x * newScale,

            y: pointer.y - mousePointTo.y * newScale,

        };

        // 应用变换

        stage.position(newPos);

    }, []);