Pratique de la combinaison de plusieurs événements de souris
Dans cette étape, nous allons créer une application de dessin interactive qui combine plusieurs événements de souris pour démontrer comment différents événements peuvent travailler ensemble pour créer une riche expérience utilisateur. Nous allons implémenter un canevas de dessin simple où les utilisateurs peuvent dessiner en cliquant et en traînant la souris.
Créez un nouveau fichier mouse-drawing.html dans le répertoire ~/projet avec le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Canevas de dessin interactif</title>
<style>
#drawingCanvas {
border: 2px solid #000;
background-color: #f0f0f0;
cursor: crosshair;
}
#colorPicker {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Canevas de dessin interactif</h1>
<div>
<label for="colorPicker">Choisissez une couleur :</label>
<input type="color" id="colorPicker" value="#000000" />
<button id="clearCanvas">Effacer le canevas</button>
</div>
<canvas id="drawingCanvas" width="600" height="400"></canvas>
<p id="drawingStatus">
Commencez à dessiner en cliquant et en traînant sur le canevas
</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;
// Événement mouse down - commencer à dessiner
canvas.addEventListener("mousedown", startDrawing);
// Événement mouse move - dessiner tant que la souris est enfoncée
canvas.addEventListener("mousemove", draw);
// Événements mouse up et mouse out - arrêter de dessiner
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
// Bouton effacer le canevas
clearButton.addEventListener("click", clearCanvas);
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
drawingStatus.textContent = "Dessin en cours...";
}
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 = "Dessin arrêté. Commencez à nouveau!";
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawingStatus.textContent = "Canevas effacé. Commencez à dessiner!";
}
</script>
</body>
</html>
Caractéristiques clés de cette application de dessin interactive :
- Combine plusieurs événements de souris :
mousedown : Commencer à dessinermousemove : Continuer à dessiner tant que la souris est enfoncéemouseup et mouseout : Arrêter de dessiner
- Sélecteur de couleur permet de changer la couleur de dessin
- Bouton effacer le canevas réinitialise le dessin
- Messages d'état fournissent une rétroaction à l'utilisateur
Interactions exemple :
- Cliquez et traînez sur le canevas pour dessiner
- Changez de couleur à l'aide du sélecteur de couleur
- Cliquez sur "Effacer le canevas" pour réinitialiser la zone de dessin
