前端开发利器插件dat.GUI最新 API中英文对照翻译

dat.GUI API

Details about the classes, methods, and properties provided by dat.GUI. For more hands-on examples, see the dat.GUI tutorial.
有关 dat.GUI 提供的类、方法和属性的详细信息。有关更多实践示例，请参阅 dat.GUI教程。

Classes 课程

• GUI

  A lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly. JavaScript 的轻量级控制器库。它允许您轻松地即时操作变量和触发函数。

• Controller 控制器

  An “abstract” class that represents a given property of an object. 表示对象的给定属性的“抽象”类。

• NumberController ⇐ dat.controllers.Controller

  Represents a given property of an object that is a number. 表示对象的给定属性，即数字。

GUI

A lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
JavaScript 的轻量级控制器库。它允许您轻松地即时操作变量和触发函数。

Kind: global class
种类：全球级

• GUI
  • [new GUI(params]) 新的图形用户界面（[参数]）
  • .domElement : DOMElement
  • .parent : dat.gui.GUI
  • .autoPlace : Boolean
  • .closeOnTop : Boolean
    .closeOnTop ： Boolean
  • .preset : String
  • .width : Number
    .width ： Number
  • .name : String
  • .closed : Boolean
    .close : Boolean
  • .load : Object
    .load ： Object
  • .useLocalStorage : Boolean
  • [.add(object, property, min], [max], [step]) ⇒ Controller
    [.add(对象, 属性, 最小值], [最大值], [步长]) ⇒ Controller
  • .addColor(object, property) ⇒ Controller
    .addColor(对象, 属性) ⇒ Controller
  • .remove(controller) .删除（控制器）
  • .destroy() 。破坏（）
  • .addFolder(name) ⇒ dat.gui.GUI
    .addFolder(名称) ⇒ dat.gui.GUI
  • .removeFolder(folder) .removeFolder(文件夹)
  • .open() 。打开（）
  • .close() 。关闭（）
  • .hide() 。隐藏（）
  • .show() 。展示（）
  • .getRoot() ⇒ dat.gui.GUI
  • .getSaveObject() ⇒ Object

new GUI([params]) 新的图形用户界面（[参数]）

Param 参数	Type 类型	Default 默认	Description 描述
[params] [参数]	Object
[params.name]	String		The name of this GUI. 该 GUI 的名称。
[params.load] [参数.负载]	Object		JSON object representing the saved state of this GUI. 表示此 GUI 的已保存状态的 JSON 对象。
[params.parent] [参数.父级]	dat.gui.GUI		The GUI I’m nested in. 我嵌套在其中的 GUI。
[params.autoPlace] [参数.autoPlace]	Boolean	true
[params.hideable] [参数.可隐藏]	Boolean	true	If true, GUI is shown/hidden by h keypress. 如果为 true，则 GUI 显示/隐藏 h 按键。
[params.closed] [参数.关闭]	Boolean	false	If true, starts closed 如果为 true，则开始关闭
[params.closeOnTop]	Boolean	false	If true, close/open button shows on top of the GUI 如果为 true，关闭/打开按钮将显示在 GUI 顶部

Example 例子

// Creating a GUI with options.
var gui = new dat.GUI({name: 'My GUI'});

Example 例子

// Creating a GUI and a subfolder.
var gui = new dat.GUI();
var folder1 = gui.addFolder('Flow Field');

gui.domElement : DOMElement

Outermost DOM Element 最外层 DOM 元素

Kind: instance property of GUI
Kind : GUI的实例属性

gui.parent : dat.gui.GUI

The parent GUI
父GUI

Kind: instance property of GUI
Kind : GUI的实例属性

gui.autoPlace : Boolean

Handles GUI’s element placement for you
为您处理GUI的元素放置

Kind: instance property of GUI
Kind : GUI的实例属性

gui.closeOnTop : Boolean

Handles GUI’s position of open/close button
处理GUI的打开/关闭按钮的位置

Kind: instance property of GUI
Kind : GUI的实例属性

gui.preset : String

The identifier for a set of saved values
一组保存值的标识符

Kind: instance property of GUI
Kind : GUI的实例属性

gui.width : Number

The width of GUI element
GUI元素的宽度

Kind: instance property of GUI
Kind : GUI的实例属性

gui.name : String

The name of GUI. Used for folders. i.e a folder’s name
GUI的名称。用于文件夹。即文件夹的名称

Kind: instance property of GUI
Kind : GUI的实例属性

gui.closed : Boolean gui.close : Boolean

Whether the GUI is collapsed or not
GUI是否折叠

Kind: instance property of GUI
Kind : GUI的实例属性

gui.load : Object

Contains all presets 包含所有预设

Kind: instance property of GUI
Kind : GUI的实例属性

gui.useLocalStorage : Boolean

Determines whether or not to use localStorage as the means for remembering
确定是否使用localStorage作为remember方式

Kind: instance property of GUI
Kind : GUI的实例属性

gui.add(object, property, [min], [max], [step]) ⇒ Controller gui.add(对象, 属性, [最小值], [最大值], [步长]) ⇒ Controller

Adds a new Controller to the GUI. The type of controller created is inferred from the initial value of object[property]. For color properties, see addColor.
将新控制器添加到 GUI。创建的控制器的类型是从object[property]的初始值推断出来的。有关颜色属性，请参阅addColor 。

Kind: instance method of GUI
种类： GUI的实例方法
Returns: Controller - The controller that was added to the GUI.
返回： Controller - 添加到 GUI 的控制器。

Param 参数	Type 类型	Description 描述
object 目的	Object	The object to be manipulated 被操纵的对象
property 财产	String	The name of the property to be manipulated 要操作的属性的名称
[min] [分钟]	Number	Minimum allowed value 最小允许值
[max] [最大限度]	Number	Maximum allowed value 最大允许值
[step] [步]	Number	Increment by which to change value 改变值的增量

Example 例子

// Add a string controller.
var person = {name: 'Sam'};
gui.add(person, 'name');

Example 例子

// Add a number controller slider.
var person = {age: 45};
gui.add(person, 'age', 0, 100);

gui.addColor(object, property) ⇒ Controller gui.addColor(对象, 属性) ⇒ Controller

Adds a new color controller to the GUI.
向 GUI 添加新的颜色控制器。

Kind: instance method of GUI
种类： GUI的实例方法
Returns: Controller - The controller that was added to the GUI.
返回： Controller - 添加到 GUI 的控制器。

Param 参数
object 目的
property 财产

Example 例子

var palette = {
  color1: '#FF0000', // CSS string
  color2: [ 0, 128, 255 ], // RGB array
  color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
gui.addColor(palette, 'color1');
gui.addColor(palette, 'color2');
gui.addColor(palette, 'color3');
gui.addColor(palette, 'color4');

gui.remove(controller) gui.remove(控制器)

Removes the given controller from the GUI.
从 GUI 中删除给定的控制器。

Kind: instance method of GUI
种类： GUI的实例方法

Param 参数	Type 类型
controller 控制器	Controller

gui.destroy()

Removes the root GUI from the document and unbinds all event listeners. For subfolders, use gui.removeFolder(folder) instead.
从文档中删除根 GUI 并取消绑定所有事件侦听器。对于子文件夹，请使用gui.removeFolder(folder)代替。

Kind: instance method of GUI
种类： GUI的实例方法

gui.addFolder(name) ⇒ dat.gui.GUI

Creates a new subfolder GUI instance.
创建一个新的子文件夹 GUI 实例。

Kind: instance method of GUI
种类： GUI的实例方法
Returns: dat.gui.GUI - The new folder.
返回： dat.gui.GUI - 新文件夹。
Throws:
抛出：

• Error if this GUI already has a folder by the specified name
  如果此 GUI 已具有指定名称的文件夹， Error

Param 参数
name 姓名

gui.removeFolder(folder) gui.removeFolder(文件夹)

Removes a subfolder GUI instance.
删除子文件夹 GUI 实例。

Kind: instance method of GUI
种类： GUI的实例方法

Param 参数	Type 类型	Description 描述
folder 文件夹	dat.gui.GUI	The folder to remove. 要删除的文件夹。

gui.open()

Opens the GUI. 打开 GUI。

Kind: instance method of GUI
种类： GUI的实例方法

gui.close()

Closes the GUI. 关闭 GUI。

Kind: instance method of GUI
种类： GUI的实例方法

gui.hide()

Hides the GUI. 隐藏 GUI。

Kind: instance method of GUI
种类： GUI的实例方法

gui.show()

Shows the GUI. 显示 GUI。

Kind: instance method of GUI
种类： GUI的实例方法

gui.getRoot() ⇒ dat.gui.GUI

Kind: instance method of GUI
种类： GUI的实例方法
Returns: dat.gui.GUI - the topmost parent GUI of a nested GUI.
返回： dat.gui.GUI - 嵌套 GUI 的最顶层父 GUI。

gui.getSaveObject() ⇒ Object

Kind: instance method of GUI
种类： GUI的实例方法
Returns: Object - a JSON object representing the current state of this GUI as well as its remembered properties.
返回： Object - 表示当前状态的 JSON 对象 该 GUI 及其记住的属性。

Controller 控制器

An “abstract” class that represents a given property of an object.
表示对象的给定属性的“抽象”类。

Kind: global class
种类：全球级

• Controller 控制器
  • new Controller(object, property)
    新控制器（对象，属性）
  • .domElement : DOMElement
  • .object : Object
  • .property : String
  • .options(options) ⇒ Controller
    .options(选项) ⇒ Controller
  • .name(name) ⇒ Controller
    .name(名称) ⇒ Controller
  • .listen() ⇒ Controller
  • .remove() ⇒ Controller
  • .onChange(fnc) ⇒ Controller
  • .onFinishChange(fnc) ⇒ Controller
  • .setValue(newValue)
  • .getValue() ⇒ Object
  • .updateDisplay() ⇒ Controller
  • .isModified() ⇒ Boolean

new Controller(object, property) 新控制器（对象，属性）

Param 参数	Type 类型	Description 描述
object 目的	Object	The object to be manipulated 被操纵的对象
property 财产	string	The name of the property to be manipulated 要操作的属性的名称

controller.domElement : DOMElement 控制器.domElement : DOMElement

Those who extend this class will put their DOM elements in here.
那些扩展这个类的人会将他们的 DOM 元素放在这里。

Kind: instance property of Controller
Kind ： Controller的实例属性

controller.object : Object 控制器.对象： Object

The object to manipulate 要操纵的对象

Kind: instance property of Controller
Kind ： Controller的实例属性

controller.property : String 控制器.属性： String

The name of the property to manipulate
要操作的属性的名称

Kind: instance property of Controller
Kind ： Controller的实例属性

controller.options(options) ⇒ Controller 控制器.选项（选项）⇒ Controller

Kind: instance method of Controller
Kind : Controller的实例方法

Param 参数	Type 类型
options 选项	Array

controller.name(name) ⇒ Controller 控制器.name(名称) ⇒ Controller

Sets the name of the controller.
设置控制器的名称。

Kind: instance method of Controller
Kind : Controller的实例方法

Param 参数	Type 类型
name 姓名	string

controller.listen() ⇒ Controller 控制器.listen() ⇒ Controller

Sets controller to listen for changes on its underlying object.
将控制器设置为侦听其底层对象的更改。

Kind: instance method of Controller
Kind : Controller的实例方法

controller.remove() ⇒ Controller 控制器.remove() ⇒ Controller

Removes the controller from its parent GUI.
从其父 GUI 中删除控制器。

Kind: instance method of Controller
Kind : Controller的实例方法

controller.onChange(fnc) ⇒ Controller

Specify that a function fire every time someone changes the value with this Controller.
指定每次有人使用此控制器更改值时都会触发一个函数。

Kind: instance method of Controller
Kind : Controller的实例方法
Returns: Controller - this
返回： Controller - this

Param 参数	Type 类型	Description 描述
fnc 芬尼卡	function	This function will be called whenever the value is modified via this Controller. 每当通过此控制器修改值时都会调用此函数。

controller.onFinishChange(fnc) ⇒ Controller

Specify that a function fire every time someone “finishes” changing the value wih this Controller. Useful for values that change incrementally like numbers or strings.
指定每次有人“完成”使用此控制器更改值时都会触发一个函数。对于数字或字符串等增量变化的值很有用。

Kind: instance method of Controller
Kind : Controller的实例方法
Returns: Controller - this
返回： Controller - this

Param 参数	Type 类型	Description 描述
fnc 芬尼卡	function	This function will be called whenever someone “finishes” changing the value via this Controller. 每当有人通过此控制器“完成”更改值时，就会调用此函数。

controller.setValue(newValue) 控制器.setValue(newValue)

Change the value of object[property]
更改object[property]的值

Kind: instance method of Controller
Kind : Controller的实例方法

Param 参数	Type 类型	Description 描述
newValue 新价值	Object	The new value of object[property] object[property]的新值

controller.getValue() ⇒ Object

Gets the value of object[property]
获取object[property]的值

Kind: instance method of Controller
Kind : Controller的实例方法
Returns: Object - The current value of object[property]
返回： Object - object[property]的当前值

controller.updateDisplay() ⇒ Controller 控制器.updateDisplay() ⇒ Controller

Refreshes the visual display of a Controller in order to keep sync with the object’s current value.
刷新控制器的视觉显示，以便与对象的当前值保持同步。

Kind: instance method of Controller
Kind : Controller的实例方法
Returns: Controller - this
返回： Controller - this

controller.isModified() ⇒ Boolean 控制器.isModified() ⇒ Boolean

Kind: instance method of Controller
Kind : Controller的实例方法
Returns: Boolean - true if the value has deviated from initialValue
返回： Boolean - 如果值偏离了初始值，则为 true

NumberController ⇐ dat.controllers.Controller

Represents a given property of an object that is a number.
表示对象的给定属性，即数字。

Kind: global class
种类：全球级
Extends: dat.controllers.Controller
扩展： dat.controllers.Controller

• NumberController

  ⇐

  dat.controllers.Controller
  

  • [new NumberController(object, property, params])
    新的 NumberController(对象, 属性, [参数])
  • .min(minValue) ⇒ dat.controllers.NumberController
  • .max(maxValue) ⇒ dat.controllers.NumberController
  • .step(stepValue) ⇒ dat.controllers.NumberController

new NumberController(object, property, [params]) 新的 NumberController(对象, 属性, [参数])

Param 参数	Type 类型	Description 描述
object 目的	Object	The object to be manipulated 被操纵的对象
property 财产	string	The name of the property to be manipulated 要操作的属性的名称
[params] [参数]	Object	Optional parameters 可选参数
[params.min] [最小参数]	Number	Minimum allowed value 最小允许值
[params.max] [最大参数]	Number	Maximum allowed value 最大允许值
[params.step] [参数步骤]	Number	Increment by which to change value 改变值的增量

numberController.min(minValue) ⇒ dat.controllers.NumberController

Specify a minimum value for object[property].
指定object[property]的最小值。

Kind: instance method of NumberController
Kind : NumberController的实例方法
Returns: dat.controllers.NumberController - this
返回： dat.controllers.NumberController - 这个

Param 参数	Type 类型	Description 描述
minValue 最小值	Number	The minimum value for object[property] object[property]的最小值

numberController.max(maxValue) ⇒ dat.controllers.NumberController

Specify a maximum value for object[property].
指定object[property]的最大值。

Kind: instance method of NumberController
Kind : NumberController的实例方法
Returns: dat.controllers.NumberController - this
返回： dat.controllers.NumberController - 这个

Param 参数	Type 类型	Description 描述
maxValue 最大值	Number	The maximum value for object[property] object[property]的最大值

numberController.step(stepValue) ⇒ dat.controllers.NumberController

Specify a step value that dat.controllers.NumberController increments by.
指定 dat.controllers.NumberController 递增的步长值。

Kind: instance method of NumberController
Kind : NumberController的实例方法
Default: if minimum and maximum specified increment is 1% of the difference otherwise stepValue is 1
默认值： if minimum and maximum specified increment is 1% of the 差值，否则步值为 1
Returns: dat.controllers.NumberController - this
返回： dat.controllers.NumberController - 这个

Param 参数	Type 类型	Description 描述
stepValue 步长值	Number	The step value for dat.controllers.NumberController dat.controllers.NumberController 的步长值