Practica combinando múltiples eventos de mouse
En este paso, crearemos una aplicación de dibujo interactiva que combine múltiples eventos del mouse para demostrar cómo diferentes eventos pueden trabajar juntos para crear una rica experiencia de usuario. Implementaremos un lienzo de dibujo simple donde los usuarios pueden dibujar haciendo clic y arrastrando el mouse.
Cree un nuevo archivo mouse-drawing.html en el directorio ~/proyecto con el siguiente código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lienzo de dibujo interactivo</title>
<style>
#drawingCanvas {
border: 2px solid #000;
background-color: #f0f0f0;
cursor: crosshair;
}
#colorPicker {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Lienzo de dibujo interactivo</h1>
<div>
<label for="colorPicker">Elija un color:</label>
<input type="color" id="colorPicker" value="#000000" />
<button id="clearCanvas">Limpiar lienzo</button>
</div>
<canvas id="drawingCanvas" width="600" height="400"></canvas>
<p id="drawingStatus">
Comience a dibujar haciendo clic y arrastrando en el lienzo
</p>
<script>
const canvas = document.getElementById("drawingCanvas");
const ctx = canvas.getContext("2d");
const colorPicker = document.getElementById("colorPicker");
const clearButton = document.getElementById("clearCanvas");
const drawingStatus = document.getElementById("drawingStatus");
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// Evento de mouse down - comenzar a dibujar
canvas.addEventListener("mousedown", startDrawing);
// Evento de mouse move - dibujar mientras el mouse está presionado
canvas.addEventListener("mousemove", draw);
// Eventos de mouse up y mouse out - detener el dibujo
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
// Botón para limpiar el lienzo
clearButton.addEventListener("click", clearCanvas);
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
drawingStatus.textContent = "Dibujando en progreso...";
}
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function stopDrawing() {
isDrawing = false;
drawingStatus.textContent = "Dibujo detenido. Comience de nuevo!";
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawingStatus.textContent = "Lienzo limpio. Comience a dibujar!";
}
</script>
</body>
</html>
Características principales de esta aplicación de dibujo interactiva:
- Combina múltiples eventos del mouse:
mousedown: Comienza a dibujarmousemove: Continúa dibujando mientras el mouse está presionadomouseup y mouseout: Detiene el dibujo
- El selector de color permite cambiar el color del dibujo
- El botón para limpiar el lienzo restablece el dibujo
- Los mensajes de estado proporcionan retroalimentación al usuario
Interacciones de ejemplo:
- Haga clic y arrastre en el lienzo para dibujar
- Cambie el color usando el selector de color
- Haga clic en "Limpiar lienzo" para restablecer el área de dibujo
