0

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

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

在此处输入图像描述

我首先计算可以容纳多少项目，然后重新采样原始数组以准确获得适合屏幕的值的数量。这与每列 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;
}

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

我想在最后渲染没有空格的条，那么我如何计算有多少条适合空格但最后没有空格？

4

2 回答 2

2

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

然后，宽度的其余部分将除以 bar-space 对，每对的总长度为 barWidth + spaceWidth。也就是说，你有 98/7 = 14 对。总共有 15 个酒吧。

所以，你的公式应该是

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

最后一个+1是最后一个小节。

希望能为您解决。

于 2018-03-24T23:55:09.613 回答
1

您的总宽度将是：

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

扩展为：

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

在两侧添加 spaceWidth：

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

左侧系数：

NumberBars(barWidth + spaceWidth) = TotalWidth + spaceWidth

并划分：

NumberBars = (TotalWidth + spaceWidth) / (barWidth + spaceWidth)
于 2018-03-25T00:01:47.907 回答