Praticar a Combinação de Múltiplos Eventos de Mouse
Nesta etapa, criaremos um aplicativo de desenho interativo que combina múltiplos eventos de mouse para demonstrar como diferentes eventos podem trabalhar juntos para criar uma experiência de usuário rica. Implementaremos uma tela de desenho simples onde os usuários podem desenhar clicando e arrastando o mouse.
Crie um novo arquivo mouse-drawing.html no diretório ~/project com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Interactive Drawing Canvas</title>
<style>
#drawingCanvas {
border: 2px solid #000;
background-color: #f0f0f0;
cursor: crosshair;
}
#colorPicker {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Interactive Drawing Canvas</h1>
<div>
<label for="colorPicker">Choose Color:</label>
<input type="color" id="colorPicker" value="#000000" />
<button id="clearCanvas">Clear Canvas</button>
</div>
<canvas id="drawingCanvas" width="600" height="400"></canvas>
<p id="drawingStatus">
Start drawing by clicking and dragging on the canvas
</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;
// Mouse down event - start drawing
canvas.addEventListener("mousedown", startDrawing);
// Mouse move event - draw while mouse is pressed
canvas.addEventListener("mousemove", draw);
// Mouse up and mouse out events - stop drawing
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
// Clear canvas button
clearButton.addEventListener("click", clearCanvas);
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
drawingStatus.textContent = "Drawing in progress...";
}
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 = "Drawing stopped. Start again!";
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawingStatus.textContent = "Canvas cleared. Start drawing!";
}
</script>
</body>
</html>
Principais características deste aplicativo de desenho interativo:
- Combina múltiplos eventos de mouse:
mousedown: Iniciar o desenhomousemove: Continuar o desenho enquanto o mouse estiver pressionadomouseup e mouseout: Parar o desenho
- Seletor de cores permite alterar a cor do desenho
- O botão "Clear Canvas" (Limpar Tela) redefine o desenho
- Mensagens de status fornecem feedback ao usuário
Exemplos de interações:
- Clique e arraste na tela para desenhar
- Mude a cor usando o seletor de cores
- Clique em "Clear Canvas" (Limpar Tela) para redefinir a área de desenho
