javascript - 反向映射来自传感器的值

Question

嗨，我对此有很大的困难。

我有一个传感器，它从它的 z 变量输出值，我用事件侦听器捕获它 - event.z 从 20 增加到 100。

document.getElementById("size").style.width = event.z + "px";

当它与我的元素的 .width 属性绑定时，它会按比例增加元素的宽度。这很好用。但是我希望它做相反的事情，在传感器值增加的同时减小宽度。如何“反转”传感器的值以使宽度属性减小？

非常感谢

Answer 1

document.getElementById("size").style.width = 100 + (20 - event.z) + "px";

当你的 event.z 说 20 时，这将给出 100px 的宽度。当你的 event.z 说 100 时，这将给出 20px 的宽度。

这种计算的一般函数是

function progress(start, finish, current) {
    if (start == finish) { return start; }

    var operator = 1;
    var min = start;
    if (start > finish) {
        operator = -1;
        min = finish;
    }

    return start + (Math.abs(current - min) * operator);
 }

当您使用此逻辑时，progress(20, 100, 30)将给出 30 和progress(100, 20, 30)将给出 90。基本逻辑是：将您的较低值与当前值之间的差值添加（或减去）到您的初始值。

请注意，一旦您知道开始值和结束值，此函数始终可以压缩为一行。虽然您可以将其用作代码，但它更倾向于用作伪代码，以帮助您了解如何将其变为单行代码。使用这种一般形式，您的两种情况是：

20 + (current - 20) // == current，即你的原始代码行

和

100 - (current - 20) // == 100 - (-(20 - current) == 100 + (20 - current)，即我给出的答案。