4

我有一个带有 dat.gui 界面的 webapp，我希望人们能够相互分享他们的设置。我知道您可以将预设保存到 localStorage 文件，或者将它们作为 JSON 对象直接保存在源中。( http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values )

我在旧版本的 dat.gui 中看到有一个saveURL()函数，我认为它在查询字符串中传递了设置。（https://dat-gui.googlecode.com/git-history/v0.3.2/index.html）

在当前版本中是否可以在页面加载时将任意 JSON 传递给 gui，或者通过查询字符串指定指向 JSON 文件的链接？

4

1 回答 1

3

我创建了一个示例（使用 dat.gui 0.5 版），它演示了在初始化 dat.GUI 对象时从 JSON 文件加载预设值：

http://codepen.io/BenSmith/pen/lxiqb

“重新水合” dat.GUI 对象的代码的关键部分是：

var json = '{ \
  "preset": "Default",\
  "closed": false,\
  "remembered": {\
    "Default": {\
      "0": {\
        "message": "Value from JSON",\
        "speed": 5,\
        "displayOutline": true,\
        "color1": [\
          128,\
          128,\
          128\
        ]\
      }\
    }\
  },\
  "folders": {}\
}';
  
  var text = new datGUI();
  var gui = new dat.GUI({ load: JSON.parse(json) });

请注意“消息”值（例如）如何具有来自 JSON 的值（即“来自 JSON 的值”），而不是默认 dat.GUI 对象中的值（即“dat.gui”）。

实际上，您将从文件中获取 JSON，而不是对其进行硬编码。另请注意使用JSON.parse()将 JSON 字符串转换为 JSON 对象。

于 2014-10-25T21:29:12.477 回答