easeljs - 模態對話框？

Question

我該如何執行此操作？ 有何建議？

Answer 1

我在Flash中實現它的方式是將透明圖像放在整個畫布的大小上，然後放在上面的對話框中。虛擬圖像將捕獲並忽略所有鼠標點擊，而不會讓用戶與對話框以外的任何其他對象交互。

應該與EaselJS一起使用。你也可以做一些東西，比如讓啞圖像變成半透明的灰色，這樣可以讓模式對話框外的所有東西變暗。

如果你還需要在盒子外停止所有活動，我認爲最簡單的方法是使用Ticker.setPause（）函數停止發送tick（）事件。

注意：這僅在畫布內是模態的，並不影響瀏覽器或網頁的其餘部分。

Answer 2

這是我如何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!"); 

希望幫助:)