Javascript 当涉及到空间时，计算图像上可以容纳多少元素

我需要渲染

N

项目，这些项目是

x

像素宽，它们之间有

N-1

空格

y

像素宽

我需要计算屏幕上将显示多少项。我正在做的是将振幅数组渲染为列。这是我的测试产品，没有空格：

我首先计算适合的项目数，然后对原始数组重新采样，以获得适合屏幕的值的确切数量。这与每列5个像素的情况相同，您可以看到原始阵列已重新采样：

我现在使用的公式是

no_items=Math.floor（canvasWidth/（barWidth+spaceWidth））

：

但这显然是假设数据末尾有一个额外的空间——它只是计算项目宽度为条形宽度+空间宽度

---

我想渲染结尾没有空格的条形图，那么如何计算有多少条可以容纳空格，但结尾没有空格？

为了简化，让我们举一个小例子。假设你有103个像素，你想要5个像素宽的条，它们之间有2个像素的间隔。 正如您所说，有一个酒吧比空间多。您希望最后一个条位于屏幕的末尾，所以将宽度减少这个数量，即98px

然后，剩余的宽度将被成对的条间距分割，每个条间距的总长度为barWidth+spaceWidth。也就是说，这些对中有98/7=14对。总共有15个小节

所以，你的公式应该是

(canvasWidth - barWidth) / (barWidth + spaceWidth) + 1

其中，最后一个+1表示最后一条

---

希望能为您解决这个问题。

为了简化，让我们举个小例子。假设你有103个像素，你想要5个像素宽的条，它们之间有2个像素的间隔。 正如您所说，有一个酒吧比空间多。您希望最后一个条位于屏幕的末尾，所以将宽度减少这个数量，即98px

然后，剩余的宽度将被成对的条间距分割，每个条间距的总长度为barWidth+spaceWidth。也就是说，这些对中有98/7=14对。总共有15个小节

所以，你的公式应该是

(canvasWidth - barWidth) / (barWidth + spaceWidth) + 1

其中，最后一个+1表示最后一条

---

希望能为您解决此问题。

您的总宽度为：

barWidth(NumberBars) + spaceWidth(NumberBars - 1) = TotalWidth

扩展至：

barWidth(NumberBars) + (spaceWidth)(NumberBars) - spaceWidth = TotalWidth

将空格宽度添加到两侧：

barWidth(NumberBars) + spaceWidth(NumberBars) = TotalWidth + spaceWidth

左侧系数：

NumberBars(barWidth + spaceWidth) = TotalWidth + spaceWidth

并划分：

NumberBars = (TotalWidth + spaceWidth) / (barWidth + spaceWidth)

---

您的总宽度为：

barWidth(NumberBars) + spaceWidth(NumberBars - 1) = TotalWidth

扩展至：

barWidth(NumberBars) + (spaceWidth)(NumberBars) - spaceWidth = TotalWidth

将空格宽度添加到两侧：

barWidth(NumberBars) + spaceWidth(NumberBars) = TotalWidth + spaceWidth

左侧系数：

NumberBars(barWidth + spaceWidth) = TotalWidth + spaceWidth

并划分：

NumberBars = (TotalWidth + spaceWidth) / (barWidth + spaceWidth)

---

啊，高中数学，我不懂。谢谢。啊，高中数学，我不懂。谢谢