Question

我有一个用dat.gui JavaScript库制作的小菜单。我使用不同的行显示一些初始值（这些初始值在代码执行期间被修改）。

我的问题是，例如，我不想显示值“15”，而是显示“15.0000”。我尝试使用toFixed(4)函数但没有成功。

这是原始（没有“toFixed(4)”函数）代码段：

var componentThetaInit = 15;
var componentPhiInit = 15;

var gui = new dat.GUI({
 autoplace: false, 
    width: 350, 
    height: 9 * 32 - 1
});

var params = {
StartingVector : '',
 ComponentVectorTheta : componentThetaInit,
 ComponentVectorPhi : componentPhiInit
};

gui.add(params, 'StartingVector').name('Starting Vector :');
controllerComponentVectorTheta = gui.add(params, 'ComponentVectorTheta', minComponentTheta, maxComponentTheta, 0.0001).name('Component &theta; ');
controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.0001).name('Component &phi; ');

现在我试过了：

 var params = {
    StartingVector : '',
     ComponentVectorTheta : componentThetaInit.toFixed(4),
     ComponentVectorPhi : componentPhiInit.toFixed(4)
    };

但这不起作用。这是在执行之前捕获的内容（“15”而不是“15.0000”）：

一旦代码运行，4个浮点就会很好地显示（因为值不再是整数）：这实际上是我希望显示的初始值（动画之前），如“15.0000”而不是“15”。

结果是相同的，声明：

var componentThetaInit = 15.0000;
var componentPhiInit = 15.0000;

我也尝试过：

 ComponentVectorTheta : parseFloat(componentThetaInit.toFixed(4)),
 ComponentVectorPhi : parseFloat(componentPhiInit.toFixed(4))

如果有人能看出什么是错的，那就太好了。

由于

Answer 1

首先，一些小错误。有一些缺失的变量声明。我补充说：

var minComponentTheta = -10.0;
var maxComponentTheta = 100.0;
var minComponentPhi = -100.0;
var maxComponentPhi = 100.0;

2）autoplace param（应该是autoPlace，大写P）与小数位无关......它似乎是一个自动将UI添加到DOM的选项。

这些都不能解决问题。这是一个以javascript开头的问题。如果您将此代码放在控制台中，您将看到同样的问题：

var a = 15.0000;
console.log(a);
// prints 15 and not 15.0000

当数字是整数时，它是一个整数。要解决此问题，您可以让您的默认值具有非整数值，如15.0001。

这可能不是你正在寻找的东西。因此，如果您要修改dat.gui.js的代码，可以强制它将输入值设置为数字值的字符串版本。找到看起来像这样的代码并复制并粘贴下面的代码替换它。我只是在函数的第一行末尾添加了一个toFixed。请注意，当您现在获得该值时，它将是一个字符串而不是数字，因此要使用它进行数学计算，您将在使用之前对其进行parseFloat（）。

NumberControllerBox.prototype.updateDisplay = function updateDisplay() {
  this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision).toFixed(this.__precision);
  return _NumberController.prototype.updateDisplay.call(this);
};

在未经宣传的JS版本中，^那是在2050行。我根据你的需要验证了这个功能

Answer 2

就这样离开：

ComponentVectorTheta : componentThetaInit.toFixed(4),
ComponentVectorPhi : componentPhiInit.toFixed(4)

考虑一下：

a = 15;            // a is an integer now
b = a.toFixed(4);  // b is the string "15.0000"
c = parseFloat(b); // c is a number (internally, probably an integer) 
d = c.toString(2); // d is the string "1111"
e = parseInt(d, 2);// e is an integer again
assert(a === e);   // true

在DAT.GUI中显示具有起始值的浮点

2 个答案: