Question

所以我试图使用自定义放置教程将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和现场网站上，“my-gui-container＆＃39;是＆＃39; canvas＆＃39;，但每当我这样做时，dat.GUI就会完全消失。也许我必须将画布包裹在div中？我将继续修补这个dat.GUI并让你发布。

感谢。

Answer 1

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

我只是使用了moveGui div并将dat.GUI附加到moveGui div并使用CSS来移动它。 codepen现在正在工作!! 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自定义展示位置未显示

1 个答案: