尺寸的Javascript/JQuery计算

我期望实现这样的事情。 HTML视图具有有限数量的图像（在下图中显示为红色框）。现在有没有可用的浏览器/ jQuery API（跨浏览器），它可以让我快速计算剩余空间的尺寸（以绿色框显示）？在下面显示的示例中，使用给定红色框的尺寸的简单几何图形很容易计算绿色区域的尺寸。但我正在谈论非常复杂的场景和复杂的图像组合。尺寸的Javascript/JQuery计算

Reference Image

得到任何帮助。谢谢。

来源

2013-12-19 Bonton255

您是否确实需要空白的尺寸，还是只需要空的像素总数？ – jcvandan

我需要每个绿色块的确切位置和尺寸。 – Bonton255

你是控制图像绘制位置的人吗？ – jcvandan

这个链接可以帮助你在你的问题，如果绿色块是保证金/填充/边境
Link

来源

2013-12-19 09:30:34 kevpoccs

如果每个图像具有绝对的属性，就可以计算出通过顶部和尺寸离开属性，如$('#elementID').offset().top和$('#elementID').offset().left

来源

2013-12-19 09:31:33 HICURIN

根据我使用DOM元素维度的经验，您不能依赖它们获取确切的值，当然也不能在跨浏览器的相同值上使用它们。你可以得到确定的结果，但是如果你有复杂的情况，那么你可能会在某个时候撤销。

过去我实现类似的一种方法是将图像绘制到HTML5 Canvas。使用canvas你可以有非常细致的控制。我甚至可以逐像素地重复画布，以获得画布上项目的像素完美测量。

查看this tutorial了解绘制图像的简要概述。

UPDATE

有没有简单的方法来做到这一点。使用这种方法是低级别的，并且需要您使用数学，以及可能来自画布的字节级图像数据。但是，如果你的问题像你所建议的那样复杂，那么你将不得不陷入困境。当我做了类似的事情时，我也在寻找一种简单的方法来实现我在浏览器中想要的东西，然后花了一个月的时间来掌握画布API，学习字节级的颜色数据等，但最终我得到了我需要的东西，最后得到了一些非常独特的东西，因为在浏览器中很难实现。

要开始，首先我要说的是通过将多个画布完全定位在彼此之上来实现分层画布，然后在每个画布上绘制单个图像。您已经知道图像的大小，您可以决定绘制图像的位置的坐标，所以这是一个开始。事实上，这可能是您所需要的全部，您可以通过存储坐标和尺寸来绘制每幅图像，并且您应该能够根据所有图像在2D空间中的位置数量来构建精确的图像。

使用这些数字，你应该能够计算出那里的空白空间。然而，这是一个超越我的问题，可能是Mathematics Stack Exchange的问题（目前实际上是下降的：D）。

来源

2013-12-19 09:32:21 jcvandan

给定图像以及每个图像的绝对位置和大小 - 如果根据每幅图像的位置和大小在画布上绘制每幅图像，是否可以获取画布中剩余空间的尺寸和位置（绿色块）？如果我走这条路，我怎么能得到绿色区块的尺寸和位置？ – Bonton255

我不明白 - 如果我最终必须求助于数学来计算空白空间，为什么我要花所有时间在画布上绘制所有图像？如果我必须涉及数学，我可以只使用数字（图像的尺寸/位置）并编写一个复杂的算法来计算出空间。那么在画布上画画是什么意思？ – Bonton255

尺寸的Javascript/JQuery计算

回答

相关问题