实现鼠标滚轮放大缩小元素，鼠标移动带动元素移动从而调整元素位置

啊啊啊～～

于 2024-05-31 11:22:16 发布

阅读量149

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/qq_40891322/article/details/139347747

版权

import { useState, useEffect, useRef, useCallback } from 'react';
import IMG from './assets/fans.png';

import style from './index.module.css';

const Home = () => {
    const [scale, setScale] = useState(1);
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [mousePosition, setMousePositon] = useState(null) as any;
    const [isDown, setIsDown] = useState(false);
    const divRef = useRef() as any;

    const onWheel = useCallback(
        (e) => {
            e.preventDefault(); // wheel要用js原生方法监听，并且使用此句，阻止外层有滚动条的元素滚动
            const { deltaY } = e;
            if (deltaY > 0) {
                const newScale = Math.min(scale * (1 + deltaY / 500), 10);
                setScale(newScale);
            }

            if (deltaY < 0) {
                const newScale = Math.max(scale * (1 - Math.abs(deltaY) / 500), 0.3);
                setScale(newScale);
            }
        },
        [scale],
    );

    useEffect(() => {
        const dom = document.getElementById('divRef');
        dom?.addEventListener('wheel', onWheel);

        return () => {
            dom?.removeEventListener('wheel', onWheel);
        };
    }, [onWheel]);

    const onMouseDown = useCallback((e) => {
        // e.preventDefault();
        // e.stopPropagation();
        setIsDown(true);
        const { clientX, clientY } = e;
        console.log('onMouseDown', clientX, clientY);
        setMousePositon({ clientX, clientY });
    }, []);

    const onMouseUp = useCallback((e) => {
        // e.preventDefault();
        // e.stopPropagation();
        console.log('onMouseUp', e);
        setIsDown(false);
        setMousePositon(null);
    }, []);

    const onMouseMove = useCallback(
        (e) => {
            // e.preventDefault();
            // e.stopPropagation();
            if (isDown) {
                // console.log('onMouseMove', e);
                const { clientX, clientY } = e;
                console.log('mousePosition', mousePosition);
                const moveX = clientX - mousePosition.clientX;
                const moveY = clientY - mousePosition.clientY;
                console.log('moveX', moveX, moveY);
                setMousePositon({ clientX, clientY });
                setPosition((pos) => {
                    const newPos = { x: pos.x + moveX, y: pos.y + moveY };
                    return newPos;
                });
            }
        },
        [isDown, mousePosition],
    );

    useEffect(() => {
        const dom = document.getElementById('divRef');
        dom?.addEventListener('onmousedown', onMouseDown);
        dom?.addEventListener('onmouseup', onMouseUp);
        dom?.addEventListener('onmousemove', onMouseMove);

        return () => {
            dom?.removeEventListener('onMouseDown', onMouseDown);
            dom?.removeEventListener('onmouseup', onMouseUp);
            dom?.removeEventListener('onmousemove', onMouseMove);
        };
    }, [onMouseDown, onMouseUp, onMouseMove]);

    return (
        <div className={style.Home}>
            <div className={style.test} ref={divRef} id="divRef" onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseMove={onMouseMove}>
                <img
                    className={style.testImg}
                    src={IMG}
                    style={{
                        transformOrigin: '(50%, 50%)',
                        transform: `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`,
                    }}
                    draggable={false}
                />
            </div>
            <div className={style.bottom}></div>
        </div>
    );
};

export default Home;