Html在图片上划一个矩形区域，并且获取区域坐标

最新推荐文章于 2024-10-04 06:11:34 发布

zxb11c

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量262

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/zxb11c/article/details/140684224

版权

1，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>划矩形示例</title>
    <style>
        /* 设置父容器的相对定位，以便子元素使用绝对定位 */
        .container {
            position: relative;
            display: inline-block;
        }
        /* 绘制选框的样式 */
        .selection-box {
            position: absolute;
            border: 2px solid red;
            background-color: rgba(255, 0, 0, 0.3); /* 半透明红色 */
            pointer-events: none; /* 禁止选框阻挡鼠标事件 */
        }
    </style>
</head>
<body>

    <div class="container">
        <img id="myImage" src="https://img-blog.csdnimg.cn/img_convert/7681ee31ef81fa87f986bf340bebf912.png" alt="Your Image" width="600">
        <div id="selectionBox" class="selection-box">
            <span id="positionId"></span>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var isMouseDown = false;
            var startX, startY, endX, endY;

            $('#myImage').mousedown(function (e) {
                e.preventDefault(); // 阻止默认的鼠标事件（如拖动图片）

                isMouseDown = true;
                startX = e.pageX - $(this).offset().left;
                startY = e.pageY - $(this).offset().top;
            });

            $(document).mousemove(function (e) {
                e.preventDefault(); // 阻止默认的鼠标事件（如选择文本或拖动元素）

                if (isMouseDown) {
                    endX = e.pageX - $('#myImage').offset().left;
                    endY = e.pageY - $('#myImage').offset().top;

                    var width = endX - startX;
                    var height = endY - startY;

                    $('#selectionBox').css({
                        left: startX,
                        top: startY,
                        width: width,
                        height: height
                    });
                }
            });

            $(document).mouseup(function () {
                isMouseDown = false;

                var imageOffset = $('#myImage').offset();
                var relativeX1 = startX;
                var relativeY1 = startY;
                var relativeX2 = endX;
                var relativeY2 = endY;

                // 根据绘制方向调整顶点坐标
                if (relativeX2 < relativeX1) {
                    var temp = relativeX1;
                    relativeX1 = relativeX2;
                    relativeX2 = temp;
                }
                if (relativeY2 < relativeY1) {
                    var temp = relativeY1;
                    relativeY1 = relativeY2;
                    relativeY2 = temp;
                }

                // 计算四个顶点的坐标
                var topLeftX = relativeX1;
                var topLeftY = relativeY1;
                var topRightX = relativeX2;
                var topRightY = relativeY1;
                var bottomLeftX = relativeX1;
                var bottomLeftY = relativeY2;
                var bottomRightX = relativeX2;
                var bottomRightY = relativeY2;

                console.log('选框四个顶点坐标：');
                console.log('左上角 (' + topLeftX + ', ' + topLeftY + ')');
                console.log('右上角 (' + topRightX + ', ' + topRightY + ')');
                console.log('左下角 (' + bottomLeftX + ', ' + bottomLeftY + ')');
                console.log('右下角 (' + bottomRightX + ', ' + bottomRightY + ')');

                $('#positionId').text('左上角 (' + topLeftX + ', ' + topLeftY + ')');

            });
        });

    </script>

</body>
</html>