我是一名新程序员，我正在尝试使用 extJS 和 Easel 创建一些交互式元素...我有一个按钮，当您单击它时，它会覆盖一个图像...但我希望能够打开图像然后关闭...我尝试使用 toggleHandler 并启用切换，但东西不起作用。
这是我的代码：
Ext.define('EaselWindow', {
width: 1000,
height: 750,
extend: 'Ext.Window',
html: '<canvas id="demoCanvas" width="1000" height="750">'
+ 'alternate content'
+ '</canvas>'
,afterRender: function() {
this.callParent(arguments);
stage = new createjs.Stage("demoCanvas");
//var myImage = new createjs.Bitmap("dbz.jpg");
//stage.addChild(myImage);
//stage.update();
var myImage = new Image();
myImage.src = "dbz.jpg";
myImage.onload = setBG;
function setBG(){
var bgrd = new createjs.Bitmap(myImage);
stage.addChild(bgrd);
stage.update();
bgrd.addEventListener("click", function(){
var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = stage.mouseX-10 ;
seed.y = stage.mouseY-10 ;
stage.addChild(seed);
stage.update();
}); //end addeventlistener
}
}, // end after render func
items:[{
itemId: 'button1',
xtype: 'button',
text: 'click the button',
visible: true,
enableToggle: true,
listeners: {'click':
function(){
var overlay = new createjs.Bitmap("stuff.jpg");
overlay.alpha = 0.5;
stage.addChild(overlay);
stage.update();
}// end func
}
},{
itemId: 'button2',
xtype: 'button',
text: 'button2'
}]
}); // end define
Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true
}); //end easelwindow
});
我在想我可以以某种方式用 removeChild 做一个 if 语句......但我无法让它工作，我尝试了类似的东西
function(button1, state){
if(this.state=true){
var overlay = new createjs.Bitmap("stuff.jpg");
overlay.alpha = 0.5;
stage.addChild(overlay);
stage.update();
}
else
{stage.removeChild(overlay);
stage.update();
}
}// end func