Реагировать, хотите получить текущую позицию мыши текущего элемента

Я хочу получить текущую позицию мыши в <div>, а затем нарисовать что-то в этой позиции в <div>.

<chrome screen>
----------------------------------------------
|                                            |
|    <div>                                   |
|    --------------------------              |
|    |                        |              |
|    |                        |              |
|    | .  <-- mouse position and i want to draw something here  
|    |        when clicking here             |
|    |------------------------|              |
|                                            |
|--------------------------------------------|

Я пытался кодировать с помощью React Framework. А проблема в том, что у меня не может получить точную позицию, чтобы что-то нарисовать.

Я погуглил, как получить текущую позицию текущего элемента в реакции, и попробовал ниже

render(){
    return (
        <canvas ref = "canvas" className = "DrawReflect" onMouseDown = {this.startDrawing}>
        </canvas>
    );
}

startDrawing(e){

    switch(this.context.drawingTool){

        case "pen":
            // Stuck on getting mouse position. None of google's source is not accurate.
            //this.drawPen(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
            //this.drawPen(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);

            break;
    }
}

drawPen(cursorX, cursorY){
    // Just for showing drawing information in a label
    this.context.updateDrawInfo({
        cursorX: cursorX,
        cursorY: cursorY,
        drawingNow: true
    });

    // Draw something
    const canvas = this.refs.canvas;
    const canvasContext = canvas.getContext("2d");
    canvasContext.beginPath();
    canvasContext.arc(
                    cursorX, cursorY /* start position */, 
                    1, /* radius */
                    0, /* start angle */
                    2 * Math.PI /* end angle */);
    canvasContext.stroke();

}

Проще говоря, Как получить текущую позицию мыши в div в React?

e.clientX/Y Я верю.

Anthony Z 31.05.2019 03:09

Это тоже не сработало... Если я нажму в верхнем левом углу div, он покажет (98, 188), а не (0,0)...

user5685187 31.05.2019 03:13

Не могли бы вы объяснить, что не так с e.clientX - e.target.offsetLeft и e.clientY - e.target.offsetTop?

Anthony Z 31.05.2019 03:24

Я предполагаю, что это для текущего X div... Я не знаю, как создается формула. Я погуглил.

user5685187 31.05.2019 03:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
3 329
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я сделал тебе ручку с использованием e.clientX - e.target.offsetLeft и e.clientY - e.target.offsetTop. Верхний левый угол холста (розовый) дает мне 0,0, что кажется правильным.

Спасибо, код работает в положении мыши. Первая строка моего кода (e.nativeEvent.offsetX) не работает, поэтому я погуглил другие, и код (e.clientX - e.target.offsetLeft) работает с положением мыши, но не с местоположением нарисованного объекта, и я забыл об этом (положение мыши работает, но не местоположение объекта для рисования) и только что опубликовал этот вопрос как проблему с положением мыши. Мне жаль...

user5685187 31.05.2019 03:45

Другие вопросы по теме