首先大家需要了解下获取到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中,形成闭合矩形框效果
<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>
以上两种方法均可以完成记录相对于图片的坐标位置,同时支持回退操作