easeljs - easeljs - 模态对话框？

Question

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

Answer 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!");

希望有帮助:)

Answer 2

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

这应该适用于 EaselJS。你也可以做一些事情，比如让虚拟图像变成半透明的灰色，这样它就可以让模态对话框之外的所有东西变暗。

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

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