easeljs - 模态对话框？答案

【问题标题】：easeljs - modal dialog box?easeljs - 模态对话框？
【发布时间】：2012-11-03 07:07:14
【问题描述】：

我该如何实现呢？有什么建议吗？

【问题讨论】：

【解决方案1】：

这就是我在easeljs中的做法：

var stage = new createjs.Stage('canvas');
stage.width = $('#canvas').width();
stage.height = $('#canvas').height();

// warning box / modal dialog for user infos
var warnbox = new createjs.Shape();
warnbox.graphics.beginFill('#000');
warnbox.alpha = 0.85;
warnbox.graphics.drawRect(0, 0, stage.width, stage.height);
warnbox.graphics.endFill();
stage.addChild(warnbox);
warnbox.visible = false;

// confirm button for modal dialog box
var buttonok = new createjs.Shape();
buttonok.graphics.beginFill('#428BCA');
buttonok.graphics.setStrokeStyle(2,'round').beginStroke('#357EBD');
buttonok.graphics.drawRoundRect(0, 0, 170, 50, 5);
buttonok.x = stage.width/2-85;
buttonok.y = stage.height/2+70;
buttonok.cursor = "pointer";
stage.addChild(buttonok);
buttonok.visible = false;

var label_info = new createjs.Text("Your message here", "30px Arial", "#F0F0F0");
label_info.x = stage.width/2;
label_info.y = stage.height/2-110;
label_info.textAlign = 'center';
label_info.lineWidth = 800;
label_info.lineHeight = 50;
stage.addChild(label_info);
label_info.visible = false;

var label_ok = new createjs.Text("Continue", "25px Arial", "#F0F0F0");
label_ok.x = buttonok.x+85;
label_ok.y = buttonok.y+13;
label_ok.textAlign = 'center';
label_ok.lineWidth = 100;
label_ok.lineHeight = 50;
label_ok.cursor = "pointer";
stage.addChild(label_ok);
label_ok.visible = false;

function dialogbox(msg) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = true;
    // bring warnbox to front
    stage.setChildIndex(warnbox, stage.getNumChildren()-1); 
    stage.setChildIndex(label_info, stage.getNumChildren()-1);  
    stage.setChildIndex(buttonok, stage.getNumChildren()-1);    
    stage.setChildIndex(label_ok, stage.getNumChildren()-1);    
    label_info.text = msg;
}

buttonok.on("click", function(evt) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = false;
    resetScene();
});
label_ok.on("click", function(evt) {
    warnbox.visible = label_info.visible = buttonok.visible = label_ok.visible = false;
    resetScene();
});


// trigger
dialogbox("Congratulations, this is your modal box!");

希望有帮助:)

【讨论】：

优秀的凯 - 正在寻找这个在游戏中成功使用它
很高兴听到一个 4 岁的答案仍然可以提供帮助。游戏？发布链接:)

【解决方案2】：

我在 Flash 中实现此功能的方法是将整个画布大小的透明图像放在所有内容上，然后在其上放置对话框。虚拟图像将捕获并忽略所有鼠标点击，不允许用户与对话框以外的任何内容进行交互。

这应该与 EaselJS 一起工作。您还可以执行一些操作，例如将虚拟图像设置为半透明灰色，从而使模态对话框之外的所有内容变暗。

如果您还需要停止框外的所有活动，我认为最简单的方法是使用 Ticker.setPause() 函数来停止发送 tick() 事件。

注意：这只是画布中的模式，不会影响浏览器或网页的其余部分。

【讨论】：