爲什麼我的畫布變焦/平移減慢。

我是一個剛剛嘗試學習如何製作網頁的新程序員。我發現了一個縮放和平移畫布元素的代碼，但是當我將它實現到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

來源

2013-07-24 Ryan Williams

它看起來像你無限地重新加載BG圖像。在您的BG鏡像加載完成後，您的onload函數回調只會使其再次調用getBG，這將永遠重複相同的過程。

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

我不確定您期望做到這一點。

來源

2013-07-24 18:01:59 Lochemage

你真的不應該需要刪除圖像。關於我的頭頂，這是我通常會加載一幅用於畫布的圖像，（根據您的思路是如何工作的）。

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();

來源

2013-07-24 18:17:22 ericjbasti

ohhh yeahh我現在看到它，謝謝......但我真的不需要myImage.onload = function（）{是嗎？我剛剛評論了整個myimage.onload行，它工作得很好。有沒有理由等待.onload？ –

唯一的原因將是在你需要做一些事情後，只有在圖像完成加載並準備好之後。 – Lochemage

是的我通常會等待圖像加載之前，我嘗試將其渲染到屏幕上，以便我可以做一個效果（淡入）或使用它作爲精靈表並將其切片。你使用createjs，所以我確定他們可以爲你處理很多這些情況。另外，使用負載信息可以很好地確保事情在您準備好開始之前不會開始，例如在遊戲中。 – ericjbasti

爲什麼我的畫布變焦/平移減慢。

回答

相關問題