悬浮坐标解决方案：如何在图片获取xy鼠标位置和增加标注信息

2023-07-23 72

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 悬浮坐标解决方案：如何在图片获取xy鼠标位置和增加标注信息

悬浮坐标的定义，基于固定分辨率的图片，通过获取该图片x和y坐标确定位置后并添加标注，实现位置展示、对应图片内物品展示的一种标注开发方式。

技术要点

1.自动获取图片x和y坐标；
2.将多个坐标xy在图片上通过CSS定位的方式予以展示；
3.鼠标高亮提示事件；
4.鼠标点击事件；

css层叠样式表

由于不同电脑设备的分辨率不同，因此在使用图片悬浮坐标定位的时候，一般需要将图片设置成固定尺寸。基于19201080，16:9分辨率显示器，一般推荐1600900的弹窗展示。

为了避免弹出图片无法覆盖，建议设置对应的背景颜色；

实现原理：基于css层叠样式表各元素利用position: relative和position:absolute，相对定位和绝对定位，分层分级加载展示。

        .container {
            position: relative;
            width: 1600px;
            margin: 0 auto;
            padding: 0;
        }
        .lockImg {
            position: absolute;
            cursor: pointer;
        }

HTML图片容器展示

<div class="container">
     <!--图片-->
     <img src="images/main.jpg" id="hotImg">
      <!--悬浮坐标点位-->
    <img src="images/icon.png" style="left:calc(76px - 16px);top:calc(158px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(232px - 16px);top:calc(328px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(364px - 16px);top:calc(306px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(615px - 16px);top:calc(209px - 36px);" class="lockImg">
</div>

style="left:calc(76px - 16px);top:calc(158px - 36px)，因标注icon本身是图片，具有长宽属性，在进行absolute定位时，需要把已经确定的xy坐标进行相对应的offset偏离设置；

offset中的16px和36px，具体的值依据icon图片的尺寸大小手动调整，能准确标识对应的图片位置即可。

获取图片xy坐标

(1)JQ封装函数方式

图片事件

   <img id="imageId" src="images/main.jpg" onclick="handleClick(event)">

获取坐标封装函数

    //获取鼠标点击位置
    function lockClick(e) {
        var xPage = (navigator.appName == 'Netscape') ? e.pageX : event.x + document.body.scrollLeft;
        var yPage = (navigator.appName == 'Netscape') ? e.pageY : event.y + document.body.scrollTop;
        var imgEl = document.getElementById("imageId");
        var img_x = locationLeft(imgEl);
        var img_y = locationTop(imgEl);
        var xPos = xPage - img_x;
        var yPos = yPage - img_y;
        //当前点击位置
        var hotspot = {x: xPos, y: yPos};
        /*01.在当前为准展示图片*/
        addHotspot(hotspot);
        /*02.通过ajax接口将x、y坐标传入到数据库*/
    }

  //找到元素的屏幕位置
    function locationLeft(element) {
        offsetTotal = element.offsetLeft;
        scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationLeft(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }
    //find the screen location of an element
    function locationTop(element) {
        offsetTotal = element.offsetTop;
        scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationTop(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }

    // 添加自定义内容
    function addHotspot(hotspot) {
        var x = hotspot.x - 16;
        var y = hotspot.y - 36;
        var src = 'images/icon.png';
        var imgEle = '<img ' + ' src="' + src + '"  style="top: '
            + y + 'px; left: ' + x + 'px; position: absolute; cursor: pointer;"'
            + ')" />';
        $('.container').append(imgEle);
    }

(2)使用php中的POST传参

使用input image类型传参

    <form action="getCoords.php" method="post">
        <input type="image" src="images/main.jpg" id="hotImg">
    </form>

getCoords.php

$cord = $_POST;
echo "<pre>";
echo "x坐标:" . $cord["x"];
echo "<pre>";
echo "y坐标:" . $cord["y"];

@漏刻有时