（EaselJS，HTML Canvas，Stage）Uncaught InvalidStateError：試圖使用不可用或不再可用的對象

Question

我嘗試使用EaselJS動態生成畫布時出現問題。

我正在開發類似的東西：

[1] http://acuradoria.com/ilustration1.jpg

的ilustration是由兩個不同的圖像組成。用戶將能夠調整大小並移動背景圖像。當用戶點擊不同的選項卡時，疊加圖像會發生變化。

這裏是JavaScript：

<script type="text/javascript"> 
    var tamanho; 
    var offsetX; 
    var offsetY; 
    var rotation; 
    var slideInterval = -1; 

    function init() {      
     console.log('iniating'); 

     console.log('Settings sliders'); 
    $(".tamanhoSlider").slider({ 
      value: 50, 
      min: 1, 
      max: 100, 
      disabled:false, 
      change:handleChange, 
      slide: handleSlide 
     }); 

     $(".offsetHorizontalSlider").slider({ 
      value: 0, 
      min: -300, 
      max: 300, 
      disabled:false, 
      change:handleChange, 
      slide: handleSlide 
     }); 

     $(".offsetVerticalSlider").slider({ 
      value: 0, 
      min: -300, 
      max: 300, 
      disabled:false, 
      change:handleChange, 
      slide: handleSlide 
     }); 

     $(".rotationSlider").slider({ 
      value: 0, 
      min: -180, 
      max: 180, 
      disabled:false, 
      change:handleChange, 
      slide: handleSlide 
     }); 

     $("#resetBtn").click(resetButtons); 

     canvas = document.getElementById("testCanvas"); 
     stage = new createjs.Stage(canvas); 
     img = new Image(); 
     img.onload = displayImage(); 
     img.src = "<? echo $thumb->path; ?>"; 

     midiaImage = new Image();    
     midiaImage.src = "<? echo $midiaPath; ?>"; 
     midiaImage.onload = displayMidia(); 



    }      

    function handleSlide() { 
    if (slideInterval == -1) { 
      slideInterval = setInterval(applyEffect, 250); 
     } 
    } 

    function handleChange() { 
     clearInterval(slideInterval); 
     slideInterval = -1; 
     updateImage(); 
    } 

    function updateImage(stage) { 

     stage.getChildByName('bmp').x = ($(".offsetHorizontalSlider").slider("option", "value")) + 200; 
     stage.getChildByName('bmp').y = ($(".offsetVerticalSlider").slider("option", "value")) + 200; 
     stage.getChildByName('bmp').scaleX = $(".tamanhoSlider").slider("option", "value")/100; 
     stage.getChildByName('bmp').scaleY = $(".tamanhoSlider").slider("option", "value")/ 100; 
     stage.getChildByName('bmp').rotation = $(".rotationSlider").slider("option", "value");  
     stage.getChildByName('bmp').regX = bmp.image.naturalWidth/2; 
     stage.getChildByName('bmp').regY = bmp.image.naturalHeight /2;  
     stage.update(); 
     console.log('Image updated', stage); 
    } 

    function resetButtons(){ 
     $(".offsetHorizontalSlider").slider("option", "value", 0); 
     $(".offsetVerticalSlider").slider("option", "value", 0); 
     $(".tamanhoSlider").slider("option", "value", 50); 
     $(".rotationSlider").slider("option", "value", 0);    
     updateImage(); 
    } 

    exportAndSaveCanvas = function() { 

     // Get the canvas screenshot as PNG 
     var screenshot = Canvas2Image.saveAsPNG(canvas, true); 

     // This is a little trick to get the SRC attribute from the generated <img> screenshot 
     canvas.parentNode.appendChild(screenshot); 
     screenshot.id = "canvasimage";  
     data = $('#canvasimage').attr('src'); 
     canvas.parentNode.removeChild(screenshot); 


     // Send the screenshot to PHP to save it on the server 
     var url = '/includes/procedural/saveThumb.php'; 
     $.ajax({ 
      type: "POST", 
      url: url, 
      dataType: 'text', 
      data: { 
      base64data : data 
      } 
     }); 
    } 

    displayImage = function() { 
     console.log('Handling image load');     

     bmp = new createjs.Bitmap(img); 
     bmp.name = 'bmp'; 
     bmp.scaleX = bmp.scaleY = 0.4; 
     bmp.cache(0,0,img.width,img.height); 
     stage.addChild(bmp); 
     stage.update(); 
    } 

    displayMidia = function(){ 

     midia = new createjs.Bitmap(midiaImage);    
     var MAX_WIDTH = 400; 
     var MAX_HEIGHT = 400; 
     var scale = 1; 
     var width = $(midiaImage).get(0).width; 
     var height = $(midiaImage).get(0).height; 
     if (width > height) { 
      if (width > MAX_WIDTH) 
      { 
       scale = MAX_WIDTH/width; 
       height *= MAX_WIDTH/width; 
       width = MAX_WIDTH; 

      } 
     } 
     else 
     { 
      if (height > MAX_HEIGHT) 
      { 
       scale = MAX_HEIGHT/height; 
       width *= MAX_HEIGHT/height; 
       height = MAX_HEIGHT; 

      } 
     } 

     midia.scaleX = scale; 
     midia.scaleY = scale; 


     stage.addChild(midia); 
     stage.update(); 



    } 

</script> 

，我發現了以下錯誤： [2] http://acuradoria.com/ilustration2.jpg

看起來，我想要使用的東西是不存在了。 儘管如此，我無法確定它是什麼。 = {

請幫忙。

Answer 1

如果調用參數爲0或null的緩存方法，則會引發此錯誤。

調用緩存方法使EaselJS創建一個臨時畫布，繪製內容，然後將其作爲位圖存儲在內存中以供稍後使用。如果您傳遞0或null作爲寬度或高度，則瀏覽器將嘗試創建0大小的離屏畫布。

Firefox會將其視爲致命錯誤，而Chrome會默默忽略它。