使用JavaScript将比率转换为百分比

Question

我正在编写脚本以支持Web应用程序显示图像，并允许用户缩放/平移以查看更多细节。 使用JavaScript编写的脚本支持默认的缩放级别，介于0％和100％之间，其中0％表示缩小后的图像大小以适合浏览器窗口，而100％表示全分辨率的图像。 以下公式用于获取给定的百分比，并使用正确的默认缩放级别显示图像。 在公式下方是一些用于确保其正常运行的计算。 注意，比率代表图像之间的大小差异。

X / (((Y - 1) * Z) + 1)

X = Ratio 1
Y = Ratio 2
Z = Percentage as Decimal

3.29 / (((3.29 - 1) * 000.00) + 1) = 3.29
3.29 / (((3.29 - 1) * 000.01) + 1) = 3.22
3.29 / (((3.29 - 1) * 000.10) + 1) = 2.67
3.29 / (((3.29 - 1) * 000.90) + 1) = 1.07
3.29 / (((3.29 - 1) * 001.00) + 1) = 1.00
3.29 / (((3.29 - 1) * 001.50) + 1) = 0.74
3.29 / (((3.29 - 1) * 002.00) + 1) = 0.58
3.29 / (((3.29 - 1) * 003.00) + 1) = 0.42
3.29 / (((3.29 - 1) * 004.00) + 1) = 0.32
3.29 / (((3.29 - 1) * 005.00) + 1) = 0.26
3.29 / (((3.29 - 1) * 010.00) + 1) = 0.13
3.29 / (((3.29 - 1) * 025.00) + 1) = 0.05
3.29 / (((3.29 - 1) * 050.00) + 1) = 0.03
3.29 / (((3.29 - 1) * 075.00) + 1) = 0.02
3.29 / (((3.29 - 1) * 100.00) + 1) = 0.01

我的问题是，如果用户更改缩放级别，我想简短地显示缩放级别，但是需要将比率转换为百分比。 棘手的部分是，所有内容都是相反的，其中1（固定）始终代表完整尺寸的图像，因为它的尺寸比为1：1。 较大的数字表示两个图像之间的大小差异，表示为转换为小数的比率（变量）。

Case 1:
3.290 = 0% (no zoom)
2.145 = 50%
1.000 = 100% (max zoom)
------------
1.183 = ?

Case 2:
5.470 = 0%
3.235 = 50%
1.000 = 100%
------------
4.680 = ?

Case 3:
7.630 = 0%
4.317 = 50%
1.000 = 100%
------------
3.745 = ?

最后，我已经广泛搜索了答案，但无济于事。 谁能帮我找到解决方案？

更新：我的答案很接近，除了结果是相反的。 在此应用中，由于在计算中使用了比率，所以越来越少。 另外，在我的第一个示例中还不清楚，但是Y和Z是变量，而X是固定的。 由于Y表示可变的图像比率，因此在初始化期间它始终与X相同，因为用户尚未更改图像大小。

在以下示例中，X = 3.290，Y在1和3.290之间变化，其中3.290应该代表0％，而1应该代表100％

(Y - 1) / (X - 1) = Z

(3.290 - 1) / (3.290 - 1) * 100 = 100.0%
(3.235 - 1) / (3.290 - 1) * 100 = 097.5%
(2.280 - 1) / (3.290 - 1) * 100 = 055.8%
(2.230 - 1) / (3.290 - 1) * 100 = 053.7%
(2.145 - 1) / (3.290 - 1) * 100 = 050.0%
(1.830 - 1) / (3.290 - 1) * 100 = 036.2%
(1.660 - 1) / (3.290 - 1) * 100 = 028.8%
(1.100 - 1) / (3.290 - 1) * 100 = 004.3%
(1.010 - 1) / (3.290 - 1) * 100 = 000.4%
(1.000 - 1) / (3.290 - 1) * 100 = 000.0%

Answer 1

对于Z而言，简单地求解X /（（（Y-1）* Z）+ 1）= N是完全正确的，但没有太大帮助，因为您的结果（即N）是四舍五入的。

让我们以最后一个为例：

3.29 /（（（（3.29-1）* 100.00）+ 1）= 0.01

这是不正确的，结果为329/23000或十进制：0.014 30434782608695652173913043478260869565217391（空格后的序列无限重复），因此N = 0.01的（X-N）/（N *（Y-1））得出32800 /十进制229或大约143.2314410，这与预期的100.0相差50％！

没有简单的解决方案。 可能最简单的方法是对列表使用更多的数字，并舍入到两位数字的精度（例如，使用toFixed() ），以使用户感到厌恶。

最复杂的是到处使用理性，也就是说，我自由地接受它，而我却毫不羞愧地承认了我的实现方式。

Answer 2

我通过使用以下公式计算百分比的倒数来解决我的问题。

((X - 1) - (Y - 1)) / (X - 1) * 100 = Z

((3.290 - 1) - (3.290 - 1)) / (3.290 - 1) * 100 = 000.0%
((3.290 - 1) - (3.235 - 1)) / (3.290 - 1) * 100 = 002.4%
((3.290 - 1) - (2.280 - 1)) / (3.290 - 1) * 100 = 044.1%
((3.290 - 1) - (2.230 - 1)) / (3.290 - 1) * 100 = 046.3%
((3.290 - 1) - (2.145 - 1)) / (3.290 - 1) * 100 = 050.0%
((3.290 - 1) - (1.830 - 1)) / (3.290 - 1) * 100 = 063.8%
((3.290 - 1) - (1.660 - 1)) / (3.290 - 1) * 100 = 071.2%
((3.290 - 1) - (1.100 - 1)) / (3.290 - 1) * 100 = 095.6%
((3.290 - 1) - (1.010 - 1)) / (3.290 - 1) * 100 = 099.6%
((3.290 - 1) - (1.000 - 1)) / (3.290 - 1) * 100 = 100.0%