dat.GUI 自定义展示位置未显示

Question

所以我尝试使用自定义放置教程将 dat.GUI 放置在 canvas 的右上角：

这是一个显示无效自定义展示位置的代码笔： http://codepen.io/eternalminerals/pen/avZBOr

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

我试过了：

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

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

在代码笔和实时站点上，'my-gui-container' 是 'canvas'，但每当我这样做时，dat.GUI 就会完全消失。也许我必须将 canvas 包裹在 div 中？我会继续改进这个 dat.GUI 并及时通知您。

谢谢。

Answer 1

所以这是一个重复的问题：How do I change the location of the dat.gui dropdown?

我只是使用 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));
});

dat.GUI 自定义展示位置未显示

dat.GUI custom placement not showing

javascript

jquery

wordpress

canvas

dat.gui