0

是否有任何优化的方法来选择矩形内的所有 DOM 元素？

为了使情况更清楚，我带来了一些插图。假设我们有一个这样的 HTML 页面：

页

现在我们要根据一个特定的矩形来选择元素。

const ourBox = {
    offsetTop: 1100,
    offsetLeft: 600,
    width: 400,
    height: 400
}

const elements = getAllElementsInsideBox(ourBox)

console.log(elements)
// Logs array of elements which have collisions with imagined box

页面+矩形

对于上面的框，选择的元素将是带有蓝色边框的元素，如图所示：

页面+矩形+选中

奖金挑战

如果不难找到矩形的优化代码，让我们通过选择圆圈内的元素使其更具挑战性。代码将如下所示：

const ourCircle = {
    centerTop: 1200,
    centerLeft: 500,
    radius: 150
}

const elements = getAllElementsInsideCircle(ourCircle)

console.log(elements)
// Logs array of elements which have collisions with the imagined circle

页+圈

这对我来说是一个挑战，我正在努力。如果我找到了最好的解决方案，我将在这里与您分享，如果您与我分享您的解决方案，我将不胜感激。

注意：逐个检查所有元素的偏移量是一种方法，但可能没有那么优化！让我们尝试不同的方式。

4

0 回答 0