Практика комбинирования нескольких событий мыши
В этом шаге мы создадим интерактивное приложение для рисования, которое комбинирует несколько событий мыши, чтобы показать, как различные события могут работать вместе для создания богатого пользовательского опыта. Мы реализуем простую канву для рисования, на которой пользователи могут рисовать, нажимая и перетаскивая мышью.
Создайте новый файл mouse-drawing.html в директории ~/project с таким кодом:
<!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>
Основные особенности этого интерактивного приложения для рисования:
- Комбинирует несколько событий мыши:
mousedown: Начать рисованиеmousemove: Продолжать рисование, пока кнопка мыши нажатаmouseup и mouseout: Остановить рисование
- Палитра цветов позволяет изменить цвет рисования
- Кнопка "Очистить канву" сбрасывает рисунок
- Сообщения статуса предоставляют обратную связь пользователю
Примеры взаимодействий:
- Нажмите и перетащите мышью по канве для рисования
- Измените цвет с помощью палитры цветов
- Нажмите "Очистить канву", чтобы сбросить область рисования
