javascript - 我如何拉出一个选择并显示该区域的大小

Question

要使鼠标拉出一个选择范围，选择后松开鼠标，显示X轴的width和height的值 和 Y 轴 这四个字段中的选定区域。

这是我的问题。我希望你可以帮助我。谢谢。

Answer 1

我为其中一种可能的解决方案创建了小型代码笔，您需要根据自己的情况对其进行调整。

Coepen Select Area

let isDragging = false;
const startArr=[];
document.getElementById('target_element').addEventListener('mousedown', function(e){
  startArr[0] = e.offsetX;
  startArr[1] = e.offsetY;
  isDragging=true
})

const currentArr=[]
document.getElementById('target_element').addEventListener('mousemove', function(e){
  if (isDragging){
    currentArr[0] = e.offsetX;
    currentArr[1] = e.offsetY;

    const dimensions = getDimensions(startArr, currentArr);
    const parentElement = document.getElementById('target_element');
    parentElement.innerHTML = '';
    const selectWindow = document.createElement('div');
    selectWindow.style.position = 'absolute';
    selectWindow.style.height = dimensions.h+'px';
    selectWindow.style.width = dimensions.w+'px';
    selectWindow.style.top = dimensions.y+'px';
    selectWindow.style.left = dimensions.x+'px';
    selectWindow.style.backgroundColor = 'blue';
    parentElement.appendChild(selectWindow);
    currentArr.length = 0;
  }
})
const finishArr=[];
document.getElementById('target_element').addEventListener('mouseup', function(e){
  if (isDragging){
    finishArr[0] = e.offsetX;
    finishArr[1] = e.offsetY;

    const dimensions = getDimensions(startArr, finishArr);
    document.getElementById('x').innerText = dimensions.x;
    document.getElementById('y').innerText = dimensions.y;
    document.getElementById('w').innerText = dimensions.w;
    document.getElementById('h').innerText = dimensions.h;
    isDragging=false;
  }
})
function getDimensions(startingPoint, finishPoint){
  const top = Math.min(startingPoint[1], finishPoint[1]);
  const bottom = Math.max(startingPoint[1], finishPoint[1]);
  const left = Math.min(startingPoint[0], finishPoint[0]);
  const right = Math.max(startingPoint[0], finishPoint[0]);
  return {
    x: left,
    y: top,
    w: right-left,
    h: bottom-top
  }
}