在React中使用鼠标滚轮缩放图像

npm install react-zoom-pan-pinch

import React from 'react';
import { Viewer } from 'react-zoom-pan-pinch';

const ImageZoom = () => {
  return (
    <div>
      <Viewer
        imageUrls={['path/to/your/image.jpg']}
        containerId="image-container"
      />
    </div>
  );
};

export default ImageZoom;

import React, { useEffect } from 'react';
import { Viewer, initializeViewer } from 'react-zoom-pan-pinch';

const ImageZoom = () => {
  useEffect(() => {
    initializeViewer('image-container');
  }, []);

  return (
    <div>
      <Viewer
        imageUrls={['path/to/your/image.jpg']}
        containerId="image-container"
      />
    </div>
  );
};

export default ImageZoom;

import React, { useEffect } from 'react';
import { Viewer, initializeViewer, zoomIn, zoomOut } from 'react-zoom-pan-pinch';

const ImageZoom = () => {
  useEffect(() => {
    initializeViewer('image-container');

    const handleMouseWheel = (event) => {
      if (event.deltaY < 0) {
        zoomIn();
      } else {
        zoomOut();
      }
    };

    document.getElementById('image-container').addEventListener('wheel', handleMouseWheel);

    return () => {
      document.getElementById('image-container').removeEventListener('wheel', handleMouseWheel);
    };
  }, []);

  return (
    <div>
      <Viewer
        imageUrls={['path/to/your/image.jpg']}
        containerId="image-container"
      />
    </div>
  );
};

export default ImageZoom;