0

我是一个新程序员，只是想学习如何制作网页。我找到了缩放和平移画布元素的代码，但是当我将它实现到 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
4

2 回答 2

2

看起来您正在无限地重新加载 BG 图像。在您的 BG 图像完成加载后，您的 onload 函数回调只会让它再次调用 getBG，这将永远重复相同的过程。

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

我不确定您这样做的确切期望。

于 2013-07-24T18:01:59.160 回答
1

你真的不需要删除图像。在我的脑海中，这就是我通常会如何加载图像以在画布中使用（基于你的思路是如何工作的）。

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-24T18:17:22.153 回答