Почему мой холст увеличивает масштаб/панораму.

Question

Я новый программист, просто пытающийся научиться делать веб-страницы. Я нашел код для увеличения и панорамирования элементов холста, но когда я внедрил его в окно extJS, он начал становиться вялым. Это не становится медлительным, если изображение, которое я визуализую, является только формой, только если это из образа файла. Сначала я думал, что я создавал экземпляры объектов снова и снова, но я попытался удалить объекты после использования и ничего не изменил. Почему мое масштабирование замедляется?

Ext.onReady(function(){ 
Ext.define("w",{ 
width: 1000, 
height: 750, 
extend: "Ext.Window", 
html: '<canvas id="myCanvas" width="1000" height="750">' 
+ 'alternate content' 
+ '</canvas>' 



,afterRender: function() { 
this.callParent(arguments); 

var canvas= document.getElementById("myCanvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
var stage = new createjs.Stage("myCanvas"); 

/*function addCircle(r,x,y){ 
var g=new createjs.Graphics().beginFill("#ff0000").drawCircle(0,0,r); 
var s=new createjs.Shape(g) 
s.x=x; 
s.y=y; 
stage.addChild(s); 
stage.update(); 
}*///// If I use this function instead of loading an img there's no slowdown. 


    function setBG(){ 
      var myImage = new Image(); 
      myImage.src = "dbz.jpg"; 
      myImage.onload = setBG; 
      var bgrd = new createjs.Bitmap(myImage); 
      stage.addChild(bgrd); 
      stage.update(); 
      delete myImage; 
      delete bgrd; 
      }; 
setBG(); 

//addCircle(40,200,100); 
//addCircle(50,400,400); 

canvas.addEventListener("mousewheel", MouseWheelHandler, false); 
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 

var zoom; 

function MouseWheelHandler(e) { 
if(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))>0) 
    zoom=1.1; 
else 
    zoom=1/1.1; 
stage.regX=stage.mouseX; 
stage.regY=stage.mouseY; 
stage.x=stage.mouseX; 
stage.y=stage.mouseY; 
stage.scaleX=stage.scaleY*=zoom; 

stage.update(); 
delete zoom; 
} 


stage.addEventListener("stagemousedown", function(e) { 
var offset={x:stage.x-e.stageX,y:stage.y-e.stageY}; 
stage.addEventListener("stagemousemove",function(ev) { 
    stage.x = ev.stageX+offset.x; 
    stage.y = ev.stageY+offset.y; 
    stage.update(); 
      delete offset; 
}); 
stage.addEventListener("stagemouseup", function(){ 
    stage.removeAllEventListeners("stagemousemove"); 
}); 
}); 

} //end aferrender 

}); //end define 



Ext.create("w", { 
autoShow: true }); 
}); //end onready 

Answer 1

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

function setBG() { 
    ... 
    myImage.onload = setBG; 
    ... 
} 

Я не уверен, что вы ожидаете от этого.

Answer 2

Вам действительно не нужно удалять изображение. В верхней части моей головы я обычно загружаю изображение для использования в холсте (в зависимости от того, как работает ваш ход мысли).

function setBG(){ 
     var myImage = new Image(); 
     myImage.src = "dbz.jpg"; 
     myImage.onload = function(){ 
      var bgrd = new createjs.Bitmap(this); 
      stage.addChild(bgrd); 
      stage.update(); 
     } 
}; 

setBG();