使用canvas实现鼠标滚轮缩放

在前端开发中，使用HTML5的<canvas>元素结合JavaScript，可以实现鼠标滚轮缩放的功能。以下是一个简单的示例，展示了如何使用鼠标滚轮来缩放<canvas>上的图形。

首先，你需要在HTML中创建一个<canvas>元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Zoom Example</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

然后，在script.js文件中，你可以编写以下JavaScript代码来实现鼠标滚轮缩放的功能：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let scale = 1;
let translateX = 0;
let translateY = 0;
let previousMousePosition = { x: 0, y: 0 };

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(translateX, translateY);
    ctx.scale(scale, scale);
    // 在这里绘制你的图形，例如一个简单的矩形：
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore();
}

canvas.addEventListener('wheel', function (event) {
    event.preventDefault();
    const delta = Math.sign(event.deltaY); // 判断滚轮滚动的方向
    if (delta < 0) {
        // 放大
        scale *= 1.1;
    } else {
        // 缩小
        scale /= 1.1;
    }
    draw();
}, { passive: false });

canvas.addEventListener('mousemove', function (event) {
    previousMousePosition = { x: event.clientX, y: event.clientY };
});

// 初始化绘制
draw();

这个示例中，我们创建了一个<canvas>元素，并在JavaScript中监听了wheel事件来处理鼠标滚轮的缩放操作。当滚轮向上滚动时，我们增大缩放比例；当滚轮向下滚动时，我们减小缩放比例。然后，我们重新绘制<canvas>上的图形，根据当前的缩放比例和位移来调整图形的大小和位置。

请注意，这个示例只是一个基本的框架，你可以根据自己的需求进行修改和扩展。例如，你可以添加更多的图形绘制逻辑，或者实现图形的平移和旋转等功能。

posted @ 2025-01-06 09:06  王铁柱6  阅读(189)  评论(0)    收藏  举报