当前位置：网站首页>svg+元素js实现在图片上描点成框，并获取相对图片的坐标位置

svg+元素js实现在图片上描点成框，并获取相对图片的坐标位置

2022-08-10 20:19:00 【SunFlower914】

首先大家需要了解下获取到x轴与y轴坐标有哪些方法：

e.offsetX：鼠标相对于事件源的X方向的距离( firfox 不支持）
e.offsetY：鼠标相对于事件源的Y方向的距离( firfox 不支持）

e.clientX：距离浏览器可视区域X方向的距离
e.clientY：距离浏览器可视区域Y方向的距离

e.pageX：鼠标相对于文档X方向的距离( ie678 不支持)
e.pageY：鼠标相对于文档X方向的距离( ie678 不支持)

e.screenX：鼠标距离屏幕X方向的距离
e.screenY：鼠标距离屏幕Y方向的距离(包含浏览器的地址栏)

svg实现效果：

svg代码：

1.结构上，可以将svg与img保持同样大小，通过absolute定位到img上面

    <div class="box">
        <img src="./plant-1.png" style="width:100%">
        <svg id="svg" width="100%" height="100%">
            <polyline id="polygon" points="" marker style="fill:transparent; stroke: #e07cc2; stroke-width:3px;">
            </polyline>
        </svg>
    </div>
    <button id="back">回退</button>
    <button id="clear">清除</button>

2.侦听svg的click事件，通过createSVGPoint方法创建svg坐标对象，计算鼠标点击在svg图片的相对位置，当鼠标点击到第四个点时，通过appendItem将第一个点坐标添加到points中，形成闭合矩形框效果

svg方法：SVGPointList.appendItem() - Web APIs | MDN

<script>
    const clear = document.getElementById('clear')
    const back = document.getElementById('back')
    const polygon = document.getElementById('polygon')
   
    let firstPoint = null, index = 0
    svg.addEventListener('click', (e) => {
        if (index > 4) return;
        var point = svg.createSVGPoint();
        point.x = e.offsetX;
        point.y = e.offsetY;
        if (!firstPoint) {
            firstPoint = point
        }
        polygon.points.appendItem(point)
        console.log(polygon.points,'polygon.points');
        index++
        if (index === 4) {
            polygon.points.appendItem(firstPoint) && index++
        }
        console.log(polygon.points, point, 'point');
    })
    clogging.addEventListener('click', (e) => {
        firstPoint && polygon.points.appendItem(firstPoint) && index++
        clogging.disabled = true
    })
    back.addEventListener('click', (e) => {
        index-- && polygon.points.removeItem(index)
        clogging.disabled = false
    })
    clear.addEventListener('click', (e) => {
        polygon.points.clear()
        index = 0
        clogging.disabled = false
    })
</script>

原生js实现效果：

原生代码：

1.以浏览器文档作为对象确认点的定位位置，计算图片到浏览器可视窗口的位置

相对图片位置 = 到浏览器可视窗口位置 - 图片到浏览器可视窗口位置
x = e.clientX - img.getBoundingClientRect().left + 'px'

    <style>
        * {
            margin: 0;
            top: 0;
        }
        #div {
            margin-top: 50px;
        }
        img {
            border: 1px dashed red;
            margin-top: 50px;
            margin-left: 100px;
        }
        .dot {
            width: 5px;
            height: 5px;
            position: absolute;
            border-radius: 5px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="div"><img src="./plant-1.png" alt="" id="avater"></div>
    <script>
        var img = document.getElementById('avater')
        var div = document.getElementById('div')
        let num = 0
        img.addEventListener('click', (e) => {
            //这里考虑到用户会竖向滚动页面，所以要实时获取图片到可视窗口位置
            let x = e.clientX - img.getBoundingClientRect().left + 'px' //相对于图片的X
            let y = e.clientY - img.getBoundingClientRect().top + 'px' //相对于图片的Y
            console.log(x,y);
            // 页面不超过4个点
            num++
            if(num>4) {
                return;
            }
            // 鼠标到body距离
            let dot = document.createElement('div')
            dot.className = 'dot'
            // 圆点定位到相对于body的位置
            dot.style.left = e.pageX +'px'
            dot.style.top = e.pageY+'px'
            document.body.append(dot)
            
        })
    </script>
</body>

以上两种方法均可以完成记录相对于图片的坐标位置，同时支持回退操作

原网站

版权声明
本文为[SunFlower914]所创，转载请带上原文链接，感谢
https://blog.csdn.net/SunFlower914/article/details/126155779