目标效果
思路
底层图片的显示使用background/<img>都可以实现. 内部的选中区域使用div, 区域以外的部分使用outline实现, 给内部div一个非常大的outline, 父级再加上overflow: hidden即可实现目标效果.配合JavaScript再实现拖拽/调整大小的功能.
HTML
<div class="f">
<div class="box" id="box"></div>
</div>
CSS
.f {
width: 600px;
height: 400px;
background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2907562806,2526223574&fm=26&gp=0.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.box {
border: 1px solid white;
width: 100px;
position: absolute;
height: 100px;
outline: 1000px solid rgba(0, 0, 0, 0.4);
box-sizing: border-box;
}
JavaScript
JavaScript部分为演示只实现了拖拽效果, 未添加调整尺寸的功能.
const box = document.getElementById('box')
let offsetX, offsetY;
let isDragging = false;
box.addEventListener('mousedown', e => {
const { x, y } = box.getBoundingClientRect()
offsetX = e.clientX - x
offsetY = e.clientY - y
isDragging = true
})
document.body.addEventListener('mousemove', e => {
if (!isDragging) return
box.style.left = e.clientX - offsetX + 'px';
box.style.top = e.clientY - offsetY + 'px';
})
document.body.addEventListener('mouseup', e => {
isDragging = false
})
