显示起始值在 DAT.GUI 中的浮点数
Display floating point with starting values in DAT.GUI
我有一个用 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 θ ');
controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.0001).name('Component φ ');
现在我试过了:
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))
如果有人能看出问题所在,那就太好了。
谢谢
就这样吧:
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
首先,一些小错误。缺少一些变量声明。我补充说:
var minComponentTheta = -10.0;
var maxComponentTheta = 100.0;
var minComponentPhi = -100.0;
var maxComponentPhi = 100.0;
2) autoplace 参数(应该是 autoPlace,大写 P)与小数位无关...它似乎是一个选项,可以自动将 UI 添加到 DOM.
None 实际上解决了这个问题。这是一个以 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 行。
我验证了你想要的效果
我有一个用 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 θ ');
controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.0001).name('Component φ ');
现在我试过了:
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))
如果有人能看出问题所在,那就太好了。
谢谢
就这样吧:
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
首先,一些小错误。缺少一些变量声明。我补充说:
var minComponentTheta = -10.0;
var maxComponentTheta = 100.0;
var minComponentPhi = -100.0;
var maxComponentPhi = 100.0;
2) autoplace 参数(应该是 autoPlace,大写 P)与小数位无关...它似乎是一个选项,可以自动将 UI 添加到 DOM.
None 实际上解决了这个问题。这是一个以 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 行。
我验证了你想要的效果