js实现鼠标定点缩放(类似地图软件的功能)

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

geek123520

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

阅读量1.3k

点赞数 3

文章标签： js html5 javascript css canvas

本文链接：https://blog.csdn.net/geek123520/article/details/119895255

版权

JavaScript 地图定点缩放鼠标滚轮图像处理

关键词由CSDN通过智能技术生成

js实现鼠标定点缩放(类似地图软件的功能)

code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #mapwrap {
            width: 1000px;
            height: 900px;
            border: green solid 1px;
            margin-top: 100px;
            margin-left: 200px;
            position: relative;
            overflow: hidden;
            transform: translate(0);
            cursor: pointer;
            z-index: 5;
            overflow: hidden;
        }


        #mapImg {
            width: 800px;
            height: 511px;
            border: 1px solid green;
            
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            zoom: 100%;
            cursor: pointer;
        }

        #mapImg img {
            width: 100%;
            height: 100%;
            z-index: 0;
            -webkit-user-drag: none;
        }
        #rect{
            width: 80px;
            height: 80px;
            z-index: 8;
            border: 1px solid red;
            position: absolute;
            top: 219px;
            left: 350px;
        }
    </style>
</head>

<body>
    <div id="mapwrap">
        <div id="mapImg">
            <img src="img/mayi.jpeg" />
            <div id="rect"></div>
        </div>
        
        </div>
</body>
<script>
    var mapwrap = document.getElementById('mapwrap')
    var mapImage = document.getElementById('mapImg')
    var rect = document.getElementById('rect')
    var down = false
    var pressX, pressY,
        mapX = 0, mapY = 0, imgW = 800, imgH = 511,  //图片参数
        k = 1.0,//比例系数
        preWidth = 800, preHeight = 511,  //上一次宽高
        rectX=350,rectY=219,rectW=80,rectH=80  //小矩形参数
    mapwrap.onmousedown = function (e) {
        down = true
        pressX = e.layerX
        pressY = e.layerY
        // 移动
    }
    mapwrap.onmousemove = function (e) {
        if (down) {
            let offsetX = e.layerX - pressX
            let offsetY = e.layerY - pressY
            mapX = mapX + offsetX
            mapY = mapY + offsetY
            mapImage.style.left = mapX + 'px'
            mapImage.style.top = mapY + 'px'

        }

    }
    mapwrap.onmouseup = function (e) {
        down = false
    }

    //进行相同的变换
    mapwrap.onmousewheel = function (e) {

        //获取zoom 属性值
        let width = parseInt(mapImage.style.width, 10) || imgW;
       
        let height = 0
        var delta = Math.round(e.wheelDelta);
        width += delta;
        // console.log(width)
        // 放大了
        if (width >imgW) {
            let k = width / preWidth     //缩放倍数
            let k1=width/imgW           //相对最初的放大倍数
            // console.log('k',k,'k1',k1)

            mapImage.style.width = width + 'px'
            preWidth = width  //保存上一次宽度

            height = Math.round(preHeight * k)
            //本次

            mapImage.style.height = height + 'px'
            preHeight = height

            // let deltaX=Math.round(width * (k - 1) / 2)
            // let deltaY=Math.round(height * (k - 1) / 2)

            let deltaX=Math.round(e.layerX-e.layerX*k)
            let deltaY=Math.round(e.layerY-e.layerY*k)

            // let deltaX=Math.round((e.clientX-200)*(1-k))
            // let deltaY=Math.round((e.clientY-100)*(1-k))

            // console.log(deltaX);
            mapX = mapX +deltaX
            mapY = mapY +deltaY

            // rectX=Math.round(rectX*k1)
            // rectY=Math.round(rectY*k1)

            rectW=Math.round(80*k1)
            rectH=Math.round(80*k1)

            rectX=Math.round(350 *k1)
            rectY=Math.round(219 *k1)


            rect.style.left=rectX+'px'
            rect.style.top=rectY+'px'
            rect.style.width=rectW+'px'
            rect.style.height=rectH+'px'

            mapImage.style.left = mapX + 'px'
            mapImage.style.top = mapY + 'px'
            //减少到800 还原
        }else{
            mapImage.style.width=imgW+'px'
            mapImage.style.height=imgH+'px'
            mapImage.style.top=0
            mapImage.style.left=0
            // console.log(mapX)
            mapX=0
            mapY=0

            rectX=350
            rectY=219
            rectW=80
            rectH=80

            rect.style.left=rectX+'px'
            rect.style.top=rectY+'px'
            rect.style.width=rectW+'px'
            rect.style.height=rectH+'px'
        
        }
    }
</script>

</html>