React Движение svg за курсором

Question

как на React'e реализовать движение svg фигуры за курсором так, чтобы при попадании курсора в область перемещения фигура перемещалась по оси Y вверх-вниз?

есть div — область появления фигуры при попадании в нее курсора мыши, и затем перемещение только по вертикали?

div размером 320х375px, соответственно, как только курсор попадает на этот div должна появляться фигура размером 320х44рх (пусть это будет прямоугольник)

хотелось бы чтобы было выполнимым условие, при котором прямоугольник стремился бы вертикальным центром к кончику мыши. например, курсор двигался снизу области движения прямоугольника, и при достижении кончика стрелки до середины прямоугольника, а, уже после, прямоугольник далее двигался вверх за курсором. ну и сверху-вниз так же

Answer 1

Нужно получить ref вашего div
Затем с помощью useEffect подписаться на событие div движения мыши.
В колбеке события получить позицию мыши и записать их в state
Соответственно у изображения, которое двигается установить позицию, например через style.

если нужно сделать так, чтобы изображение не выходило за пределы div, то нужно получить его ref и проверять границы

Пример:

export const DrawComponent = () => {
    const ref = useRef();
    const [ imagePos, setImagePos ] = useState({ x: 0, y: 0 });

    const handlerMoveMouse = useCallback((e) => {
        const rect = ref.current.getBoundingClientRect();
        setImagePos({ x: e.x - rect.x, y: e.y - rect.y });
    }, []);

    useEffect(() => {
        const _ref = ref.current;
        _ref.addEventListener('mousemove', handlerMoveMouse);
        return () => {
            _ref.removeEventListener('mousemove', handlerMoveMouse);
        }
    }, [ handlerMoveMouse ]);

    return (
        <div ref={ ref } className='draw-container'>
            <span className='image' style={{ left: imagePos.x, top: imagePos.y }}/>
        </div>
    )
}

.draw-container {
  position: relative;
  width: 300px;
  height: 500px;
  border: 1px solid;
}

.draw-container .image {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #f00;
}

БЛОГ НА HUSL

React Движение svg за курсором

Ответы (1 шт):