Как изменить размер Stats.js? - PullRequest
Новая
       27

Как изменить размер Stats.js?

0 голосов
/ 23 марта 2019

Я пытаюсь изменить размер холста Stats.js.Я пытался использовать CSS, но не могу присвоить идентификатор этому конкретному элементу canvas, поэтому попробовал это:

HTML: 

<div class="modal_container" id="modal_graph">        
   <img id="moveModalImage" src="images/moveIcon.png" alt="Move modal window."/>
   <span onclick='document.getElementById( "modal_graph" ).style.display= "none";' class="close-button">×</span>
   <p>Performance over Time Graph</p>
   <hr>

   <div id="modal_4-content">
     <!-- Add Stats.GUI here -->

   </div>

</div>

CSS: 

#modal_4-content canvas{
    width: 240px; //Doesn't work
    height: 150px; //Doesn't work
    float: left; //Works fine
    padding-right: 60px; //Works fine
}

JS: 

function createStatsGUI(){

    var thisParent = document.getElementById("modal_4-content");

    //Create new Graph (FPS, MS, MB)
    stats1 = new Stats();

    //Display different panel
    stats1.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
    stats1.domElement.style.width = '200px';
    stats1.domElement.style.height = '200px';

    //Add Stats to Document - modal 4
    thisParent.appendChild( stats1.domElement );  
}

Если вы знаете, как это изменить, пожалуйста, дайте мне знать.Спасибо за ваше время.

enter image description here

Ответы [ 3 ]

0 голосов
/ 23 марта 2019

Я думаю, что вы можете получить все дочерние узлы, используя .childnodes

0 голосов
/ 24 марта 2019

Это решило проблему: 

function createStatsGUI(){

    //Create new Graphs (FPS, MS, MB)
    statsGUI = new Stats();
    statsGUI.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom

    var thisParent = document.getElementById("modal_4-content");
    thisParent.appendChild( statsGUI.domElement );

    var statsALL = document.getElementById("modal_4-content").querySelectorAll("canvas");

    for(var i=0; i<statsALL.length; i++){
        statsALL[i].style.width = "100%";
        statsALL[i].style.height = "160px";
        //...
    }
}

enter image description here

0 голосов
/ 23 марта 2019

Попробуйте это 

 thisParent.firstChild.width =100;
 thisParent.firstChild.height=100;

Вместо 

thisParent.child.style.height=100

В моем случае ожидается html 

 <div id="modal_4-content"><canvas></canvas>
 </div>

Нет пробела между родителем и ребенком 

  <div id="modal_4-content"><canvas></canvas> 
           //canvas is the first element  here try Ur update 1,2,3
          //If not go with queryselector
   </div>

Queryselector 

  var canvas = thisParent.querySelector('canvas');
  canvas.width = 500;
  canvas.height = 500;

Рисование холста по-другому не повлияет на изменение размера холста. Для изменения ширины и высоты при изменении размера необходим прямой встроенный атрибут.

...