(EaselJS, HTML Canvas, Stage) Uncaught InvalidStateError: Была сделана попытка использовать объект, который не используется или больше не используется

Question

У меня возникла проблема с использованием EaselJS для динамического создания холста.

Я разрабатываю что-то вроде этого:

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

иллюстрационная состоит из двух различных изображений. Пользователь сможет изменять размер и перемещать фоновое изображение. Оверлейное изображение изменяется, когда пользователь нажимает на другую вкладку.

Вот 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 или 0.

Вызов метода кеша делает EaselJS созданием временного холста, рисует содержимое, а затем сохраняет его в памяти в виде растрового изображения, которое будет использоваться позже. Если вы пройдете 0 или NULL, как ширину или высоту, браузер попытается создать экранный холст размером 0.

Firefox будет рассматривать его как фатальную ошибку, в то время как Chrome будет игнорировать ее молча.