计算涉及空格时有多少元素适合图像

Question

我需要渲染 N 个 x 像素宽的项目，它们之间有 N-1 spaces y 像素宽。

我需要计算屏幕上将显示多少项目。我正在做的是将一系列振幅渲染为列。这是我没有 spaces:

的测试产品

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

我现在使用的公式是no_items = Math.floor(canvasWidth/(barWidth+spaceWidth)):

/**
 * Recalculates waveform data for given width of canvas
 * @param {number} canvasWidth Image width in pixels
 * @param {number} barWidth Width of waveform bars
 * @param {number} spaceWidth Width of spaces between bars
 * @returns {Uint8Array} recalculated bytes
 */
recalculateForWidth(canvasWidth, barWidth, spaceWidth) {
    const no_items = Math.floor(canvasWidth/(barWidth+spaceWidth))
    const result = new Uint8Array(no_items);
    // Resampling code follows
    ...
    return result;
}

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

我想渲染最后没有 space 的条形图，那么我如何计算有多少条适合 spaces 但最后没有 space？

Answer 1

为了简单起见，我们举个小例子。假设您有 103 个像素，并且您希望条形宽度为 5 像素，条形之间的间距为 2 像素。正如您所说，比空格多 1 个小节。您希望最后一个栏位于屏幕的末尾，因此将宽度减小这个数量，即 98px。

然后，将剩余的宽度分成两对bar-space，每对的总长度为barWidth + spaceWidth。也就是说，您有 98/7 = 14 个这样的对。您总共有 15 个小节。

所以，你的公式应该是

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

最后的 +1 表示最后一个小节。

希望能为您解决问题。

Answer 2

您的总宽度为：

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)

计算涉及空格时有多少元素适合图像

Calculate how many elements will fit on image when spaces are involved

javascript

algorithm

math

dynamic-image-generation

html5-canvas