js 以鼠标滚轮位置为中心缩放、放大以及边界判断

最新推荐文章于 2024-08-14 15:52:52 发布

peng_fishing

最新推荐文章于 2024-08-14 15:52:52 发布

阅读量3.5k

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44001572/article/details/129199616

版权

本文记录了一个前端项目需求，即在页面上实现拖拽节点，并以鼠标滚轮位置为中心进行缩放，同时包含边界判断。通过原生JavaScript实现这一功能，有助于加深对js的理解，适用于React、Vue等框架。文章提供了拖拽和滚轮缩放的代码实现，以及总结和边界处理的思路。

摘要由CSDN通过智能技术生成

前言

项目需求为页面上实现拖拽节点和可以在页面中通过滑动滚轮来缩放节点显示（以鼠标位置为缩放中心点）从而放大到可以看到详细的信息，节点有10000个。特此记录下实现细节

效果图

js

初始化变量

    const container = document.querySelector('.container');
    const ul = document.querySelector('.ul');
    // 变量
    let result,
        x = 0,
        y = 0,
        scale = 1,
        ulWidth = 1500,
        ulHeight = 1200,
        minScale = 1,
        maxScale = 4,
        isDown = false, // 按下标识
        diff = { x: 0, y: 0 }, // 相对于上一次lastPointermove移动差值
        lastPointermove = { x: 0, y: 0 }; // 用于计算diff
    ul.style.width = ulWidth + 'px';
    ul.style.height = ulHeight + 'px';
    ul.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';

为节点绑定拖拽事件，拖拽事件的边界使用Math进行判断，比起if判断更加清晰快捷。

鼠标抬起采用document全局判断，避免鼠标移动到节点外未触发鼠标抬起事件

 // 绑定鼠标点击
    ul.addEventListener('mousedown', function (e) {
        e.preventDefault();
        e.stopPropagation();
        isDown = true;
        lastPointermove = { x: e.clientX, y: e.clientY };

    });
    // 绑定鼠标移动
    ul.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (isDown) {
            const current1 = { x: e.clientX, y: e.clientY };
            diff.x = current1.x - lastPointermove.x;
            diff.y = current1.y - lastPointermove.y;
            lastPointermove = { x: current1.x, y: current1.y };
            x += diff.x;
            y += diff.y;
            //边界判断
            let offsetX = Math.min(Math.max(x, ulWidth - ulWidth * (scale + 1) / 2), + ulWidth * (scale - 1) / 2);
            let offsetY = Math.min(Math.max(y, ulHeight - ulHeight * (scale + 1) / 2), + ulHeight * (scale - 1) / 2);
            ul.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
        }

    });
    // 绑定鼠标抬起
    document.addEventListener('mouseup', () => {
        isDown = false;
    })