javascript - 如何计算 VU 表刻度的对数标签？

Question

我使用 Canvas 编写了一个仪表小部件，需要计算刻度的标签值。没问题，除非我试图为 VU 表重新创建刻度。我知道它是对数的，但在那种类型的仪表上，值不是 10 的幂。

参见:https://en.wikipedia.org/wiki/VU_meter

我的函数被赋予了比例的最小值和最大值。对于正常比例，它也被赋予值之间的步长。例如，给定步长为 10 的 -20 和 30，它将生成标签:

-20 -10 0 10 20 30

对于给定 -20 和 6 的 VU 表，我需要制作标签:

-20 -10 -5 -3 0 3 6

而且，这些值之间的间距在比例上不相同。

我不是要实际的代码示例，而是要提供有关如何最好地实现它的想法。

我是否应该编写函数，使其中一个参数是标签列表，然后以对数标度绘制它们？这似乎无法正常工作，因为数字没有出现在正确的位置，如上图正确的 VU 表所示。

是否有一些特殊的公式不是简单的对数函数？

再次声明，我不是要代码示例，只是为了帮助理解最佳使用方法。

谢谢!

Answer 1

我想你有一个值到像素的函数。您需要编写的是它的逆函数。

当你有反函数时，你只需将屏幕区域分成 N 等份(在图片中你有 6 个区域)。一个区域的宽度为 X 像素。现在您可以使用反函数来获取该像素位置的值。

这不会是一个整数，它会像 3.434 或 11.34 - 你需要一个更漂亮的函数来生成最接近的“漂亮”数字(假设只是砍掉小数点后的部分)。

现在您获取 pretty 值并使用您的原始函数计算它的像素位置。

部分代码:

function value2px(value, valueMin, valueMax, pxMin, pxMax) {
    var valueWidth = sigLog(valueMax) - sigLog(valueMin);
    var pixelWidth = pxMax - pxMin;
    var ratio = pixelWidth / valueWidth;

    return ratio * (sigLog(value) - sigLog(valueMin)) + pxMin;
}

function px2value(px, valueMin, valueMax, pxMin, pxMax) {
    var valueWidth = sigLog(valueMax) - sigLog(valueMin);
    var pixelWidth = pxMax - pxMin;
    var ratio = pixelWidth / valueWidth;

    return sigExp((px - pxMin) / ratio + sigLog(valueMin));
}

和演示: http://jsfiddle.net/ambcwoLg/1/