キャンバスオーバーレイがページ上で2回拡大表示された後に消えて表示される

Question

解決方法がわからない奇妙なバグが発生しています。私のウェブサイト上の "Enlarge"と呼ばれるボタンをクリックすると、オーバーレイが始まり、内部にはタンパク質構造を読み込むキャンバスがあります。しかし、閉じるボタンをクリックして再度拡大しようとすると、何もロードされず、なぜその理由が分かりません。

例HTML

<!-- Expanded Canvas--> 
        <div id= "myNav" class ="overlay"> 
          <a href="javascript:void[0]" class = "closebtn" onClick="closeNav()">X</a> 
          <div class = "overlay-content"> 
           <div class = "fixed"> 
           </div> 
           <div id = "viewer2"> 
             <canvas id = "expandedCanvas"></canvas>  
           </div> 
        </div> 
       </div> 
      </div> 
<a id = "expandImage" style = "cursor:pointer">[Enlarge]</a> 
<script> 

    function closeNav() { 
     document.getElementById("myNav").style.width = "0%";  
     document.getElementById("sequence-label").style.display = "none"; 
     document.getElementById("picked-atom-name").style.display = "none"; 
     document.getElementById("proteinAlbum").style.display = "none"; 
    } 

</script> 

JS

function expandImage() { 

expandImageButton = true; 

    //Start off as default for both the buttons not showing 
show("antibodyOn", false); 
show("antibodyOff", false); 

//Reset the width 
document.getElementById("myNav").style.width = "100%"; 
viewer.requestRedraw(); 

viewer = pv.Viewer(document.getElementById('viewer2'), { 
    antialias : true, fog : true, 
    outline : true, quality : 'high', style : 'phong', 
    selectionColor : 'white', transparency : 'screendoor', 
    background : '#111215', animateTime: 500, doubleClick : null, 

}); 

//Fit to the nav bar 
viewer.fitParent(); 

this.value = ""; 
this.blur(); 

// Same principle as the loadFromPdb 
var XHR = new XMLHttpRequest(); 
XHR.open("GET", urlPdb, true); 
XHR.send(); 
XHR.onreadystatechange = function() { 
    if (XHR.readyState === 4) { 
     if (XHR.status === 200 || XHR.status === 0) { 
     staticProteinLabel = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(62, 4).trim(); 
     var canvasStaticLabel = document.getElementById('static-label'); 
     canvasStaticLabel.textContent = staticProteinLabel; 
     typeOfProtein = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(10, 26).trim(); 
     var result = XHR.responseText; 
     var allLines = result.split("\n"); 
     var lineTwo = String(allLines[1]); 
     alert(lineTwo); 
     var antibodyText = "ANTIBODY"; 
      if (typeOfProtein === "COMPLEX (ANTIBODY-ANTIGEN)") { 
       isAntibody = true; 
       anitbodyOn(); 
       } 
      else if (lineTwo.indexOf(antibodyText)) { 
       isAntibody = true; 
       antibodyOn(); 
      } 
      } 
     } 
    } 

io.fetchPdb(urlPdb, function(s) { 
    structure = s; 
    mol.assignHelixSheet(structure); 
    cartoon(); 
    viewer.autoZoom(); 
    }); 

} 

それは幅の変化とちょうど問題であり、それがアップロードできないのであれば、私は思っていましたもう一度やり直してください。

Answer 1

私はそれを把握することができました。キャンバス内部のデータを破壊する必要があるので、データを消去しキャンバスをクリアして再度読み込むことができるように少し機能を書きました。