确定给定点js的所有元素

Question

我正在使用一种使用形状（和不规则形状）的形状来构建网站的API。我的问题是，我可以在哪里提供可以作为不规则形状背景的div。

但是，我需要通过具有最大的高度和宽度来知道对象占用的最大面积。

我知道element.getBoundingClientRect是这样做的，但我的障碍是不考虑任何伪元素，这就是大多数这些形状的制作方式。

我知道在使用CSS变换属性（尤其是使用缩放比例）时，浏览器知道要调整整个形状的大小，包括构成该形状的伪元素。

它也使用边界框坐标系。

但是，浏览器不会提供此信息，因为它来自用户代理

我的主要问题是如何访问用户代理为任何给定元素计算的尺寸，或者如何找到考虑元素伪类的'getBoundingClientRect'的正确尺寸

我的形状可以在附件链接中找到。

httpsmichaelodumosu57.github.iosigma-xi-mu https://css-tricks.com/examples/ShapesOfCSS/

由于我在项目上的时间有限，因此我无法使用任何其他方法来创建形状，但是我确实知道浏览器可以为我提供所需的信息。

Answer 1

是的，我已经回答了我自己的问题。您想要做的是将图像缩放到很小的尺寸（因为transform scale()可以正常工作）并将其放置在网格框中（这也可以是一个小尺寸的div。您可以运行{{1 }} （请注意复数形式）在包含不规则形状的div的每个点上，然后可以通过其各自坐标值的最高范围之差来找到其边界框的高度和宽度。要居中，必须将具有不规则形状的不规则形状放置在具有重新缩放的尺寸的背景拖放的边界框中（记住，扭动不规则形状以找到它们）并将内部形状的边距设置为零。仅当您的真实（不是伪元素）位于屏幕的最左侧时，此方法才有效。问题是当不规则形状在背景内部未正确居中时如何定位背景？

Answer 2

您可以使用document.elementFromPoint(x, y)来获取存在于特定点的元素，但是我还没有针对任何形状进行过测试。