The starting and ending points of the drawing do not coincide with the mouse click.
The inclined plane is not doing any favors and the closest I’ve managed to get to success is in the code below.
The shared code snippet contains adjustments to offset calculations to take plane tilt into account. They may be adjusting the coordinates of the mouse click according to the position and rotation of the .floor element, thus ensuring that the start and end points of the drawing align correctly with the click position, but they are not perfect.
.container {
height: 100%;
perspective: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.floor {
top: 80%;
width: 85%;
height: 300px;
background-color: #e0e0e0;
position: relative;
bottom: 0;
transform-style: preserve-3d;
transform: rotateX(70deg) translateZ(0px);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.colored-point {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
}
.grey-point {
background-color: grey;
}
.blue-point {
background-color: blue;
}
.yellow-point {
background-color: yellow;
}
.green-point {
background-color: green;
}
const [closestGreyPoint, setClosestGreyPoint] = useState<{ x: number; y: number; distance: number } | null>(null);
const canvasRef = React.useRef<HTMLCanvasElement>(null);
const [isDrawing, setIsDrawing] = React.useState(false);
const [greyPoints, setGreyPoints] = useState<{ x: number; y: number }[]>([]);
const [greenPoints, setGreenPoints] = useState<{ x: number; y: number }[]>([]);
const handleMouseMove: MouseEventHandler<HTMLCanvasElement> & TouchEventHandler<HTMLCanvasElement> = (event) => {
if (!isDrawing) {
return;
}
let offsetX;
let offsetY;
if ('touches' in event) {
// É um evento de toque
const touch = event.touches[0];
const rect = event.currentTarget.getBoundingClientRect();
offsetX = touch.clientX - rect.left;
offsetY = touch.clientY - rect.top;
} else {
// É um evento de mouse
const rect = event.currentTarget.getBoundingClientRect();
offsetX = event.clientX - rect.left;
offsetY = event.clientY - rect.top;
}
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.beginPath();
ctx.lineTo(offsetX, offsetY);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.stroke();
}
}
};
// Função auxiliar para adicionar pontos coloridos
const addPoint = (parent: HTMLElement, color: string, x: number, y: number) => {
const point = document.createElement('div');
point.classList.add(`${color}-point`);
point.classList.add('colored-point');
point.style.left = `${x}px`;
point.style.top = `${y}px`;
parent.appendChild(point);
};
useEffect(() => {
const floor = document.getElementById('floor');
if (floor) {
const pontos = document.getElementsByClassName('colored-point');
while (pontos.length > 0) {
const ponto = pontos[0];
if (ponto.parentNode) {
ponto.parentNode.removeChild(ponto);
}
}
const floorWidth = floor.offsetWidth;
const floorHeight = floor.offsetHeight;
addPoint(floor, 'blue', floorWidth * (0.1 + Math.random() * 0.1), floorHeight * (0.1 + Math.random() * 0.1));
addPoint(floor, 'yellow', floorWidth * (0.9 - Math.random() * 0.1), floorHeight * (0.1 + Math.random() * 0.1));
addPoint(floor, 'green', floorWidth * (0.1 + Math.random() * 0.1), floorHeight * (0.9 - Math.random() * 0.1));
const centralX = floorWidth / 2;
const centralY = floorHeight / 2;
const separationFactor = 100;
const greyPointsProv: { x: number; y: number }[] = [];
for (let i = 0; i < 3; i++) {
let randomX: number, randomY: number;
do {
randomX = centralX + (Math.random() * separationFactor * 2 - separationFactor);
randomY = centralY + (Math.random() * separationFactor * 2 - separationFactor);
} while (
(randomX < floorWidth * 0.2 && randomY < floorHeight * 0.2) ||
(randomX > floorWidth * 0.8 && randomY < floorHeight * 0.2) ||
(randomX < floorWidth * 0.2 && randomY > floorHeight * 0.8) ||
Math.sqrt((randomX - centralX) ** 2 + (randomY - centralY) ** 2) > separationFactor ||
greyPointsProv.some(point => Math.sqrt((randomX - point.x) ** 2 + (randomY - point.y) ** 2) < separationFactor)
);
addPoint(floor, 'grey', randomX, randomY);
greyPointsProv.push({ x: randomX, y: randomY });
setGreyPoints(greyPointsProv);
}
const greenPoint = document.querySelector('.green-point') as HTMLElement;
if (greenPoint) {
const greenX = parseFloat(greenPoint.style.left || '0');
const greenY = parseFloat(greenPoint.style.top || '0');
greyPointsProv.forEach(point => {
const distance = Math.sqrt((greenX - point.x) ** 2 + (greenY - point.y) ** 2);
if (!closestGreyPoint || distance < closestGreyPoint.distance) {
setClosestGreyPoint({ ...point, distance });
}
});
if (closestGreyPoint) {
const yellowPoint = document.querySelector('.yellow-point') as HTMLElement;
const bluePoint = document.querySelector('.blue-point') as HTMLElement;
const closestYellowDistance = yellowPoint ? Math.sqrt((closestGreyPoint.x - parseFloat(yellowPoint.style.left || '0')) ** 2 + (closestGreyPoint.y - parseFloat(yellowPoint.style.top || '0'))) : Infinity;
const closestBlueDistance = bluePoint ? Math.sqrt((closestGreyPoint.x - parseFloat(bluePoint.style.left || '0')) ** 2 + (closestGreyPoint.y - parseFloat(bluePoint.style.top || '0'))) : Infinity;
if (closestGreyPoint.distance > 1.5 * Math.min(closestYellowDistance, closestBlueDistance)) {
addPoint(floor, 'green', floorWidth * (0.9 - Math.random() * 0.1), floorHeight * (0.9 - Math.random() * 0.1));
}
}
}
}
const greyPointsProv: { x: number; y: number }[] = [];
const greenPointsProv: { x: number; y: number }[] = [];
const greyElements = document.querySelectorAll('.grey-point');
greyElements.forEach(element => {
const rect = element.getBoundingClientRect();
greyPointsProv.push({ x: rect.left + window.scrollX, y: rect.top + window.scrollY });
setGreyPoints(greyPointsProv);
});
const greenElements = document.querySelectorAll('.green-point');
greenElements.forEach(element => {
const rect = element.getBoundingClientRect();
greenPointsProv.push({ x: rect.left + window.scrollX, y: rect.top + window.scrollY });
setGreenPoints(greenPointsProv);
});
}, []);
useEffect(() => {
console.log(greyPoints)
console.log(greenPoints)
const floor = document.getElementById('floor');
if (floor) {
const canvas = canvasRef.current;
if (canvas) {
canvas.width = floor.offsetWidth;
canvas.height = floor.offsetHeight;
}
}
}, [greyPoints, greenPoints]);
<div className="container">
<div id="floor" className="floor"
// onClick={handleFloorClick}
>
<canvas
onMouseDown={() => setIsDrawing(true)}
onMouseUp={() => setIsDrawing(false)}
onMouseMove={handleMouseMove}
onTouchStart={() => setIsDrawing(true)}
onTouchEnd={() => setIsDrawing(false)}
onTouchMove={handleMouseMove}
ref={canvasRef}
></canvas>
</div>
</div>