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

Convert Ratio to Percentage using JavaScript

本文关键字：百分比 转换 比率 JavaScript 使用      更新时间：2023-09-26

我正在编写脚本，以支持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%

简单地求解X/(((Y - 1) * Z) + 1) = N的Z是完全正确的，但没有多大帮助，因为你的结果，即N是四舍五入的。

让我们以最后一个为例:

3.29/(((3.29 - 1) * 100.00) + 1) = 0.01

这是不正确的，结果是329/23000或十进制:0.014 30434782608695652173913043478260869565217391(空间无限重复后的序列)，所以(X - N)/(N*(Y - 1)) N = 0.01给出32800/229或大约143.2314410的十进制，这是你期望的100.0的方式，近50%!

没有简单的解决办法。可能最简单的方法是在列表中使用更多的数字，并四舍五入到两位数的精度(例如:使用toFixed())，以便用户反感。

最复杂的将是使用所有的理性，也就是说，我坦率地承认，没有任何羞耻，我会这样做。

我用下面的公式计算了百分比的倒数，从而解决了这个问题。

((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%
相关文章：