1

因此，我尝试使用自定义放置教程将 dat.GUI 放置在画布的右上角：

这是一个显示不工作的自定义放置的代码笔：http: //codepen.io/eternalminerals/pen/avZBOr

我正在尝试使用自定义放置属性，因为此页面http://eternalminerals.com/testa/上的自动放置的 dai.GUI是不可点击的。我想如果我将它自定义放置到画布而不是页面上，它应该可以工作。

我试过：

var gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);

在 codepen 和 live 站点上，“my-gui-container”是“canvas”，但每当我这样做时，dat.GUI 就会完全消失。也许我必须将画布包装在一个 div 中？我将继续修补此 dat.GUI 并随时通知您。

谢谢。

4

1 回答 1

1

所以这是一个重复的问题：如何更改 dat.gui 下拉菜单的位置？

我只是使用 moveGui div 并将 dat.GUI 附加到 moveGui div 并使用 CSS 来移动它。密码笔现在正在工作！http://codepen.io/eternalminerals/pen/avZBOr

html:

<canvas id="canvas"></canvas>
<div  class = 'moveGUI'>
</div>

CSS：

.moveGUI{ 
    position: absolute;
    top: 13.1em;
    right: -1em;
}

js：

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { console.log('test'); };
  // Define render logic ...
};

$(document).ready(function( $ ) {
  var text = new FizzyText();
  var gui = new dat.GUI({ autoPlace: false });
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
  gui.domElement.id = 'canvas';
  var customContainer = $('.moveGUI').append($(gui.domElement));
});
于 2015-09-21T01:58:22.703 回答