Я хочу получить текущую позицию мыши в <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?
Это тоже не сработало... Если я нажму в верхнем левом углу div, он покажет (98, 188), а не (0,0)...
Не могли бы вы объяснить, что не так с e.clientX - e.target.offsetLeft
и e.clientY - e.target.offsetTop
?
Я предполагаю, что это для текущего X div... Я не знаю, как создается формула. Я погуглил.
я сделал тебе ручку с использованием e.clientX - e.target.offsetLeft
и e.clientY - e.target.offsetTop
. Верхний левый угол холста (розовый) дает мне 0,0, что кажется правильным.
Спасибо, код работает в положении мыши. Первая строка моего кода (e.nativeEvent.offsetX) не работает, поэтому я погуглил другие, и код (e.clientX - e.target.offsetLeft) работает с положением мыши, но не с местоположением нарисованного объекта, и я забыл об этом (положение мыши работает, но не местоположение объекта для рисования) и только что опубликовал этот вопрос как проблему с положением мыши. Мне жаль...
e.clientX/Y Я верю.