KineticJS：設置寬度基於百分比

Question

我想KineticJS，看看這個例子：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 500, 
    height: 200 
}); 

我的問題是如何根據百分比來設置寬度。我想要這樣的東西：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 100%, 
    height: 200 
}); 

任何機會？謝謝！

Answer 1

百分比值不起作用（我試過了）。當你在JavaScript的工作，你可以很容易地獲取窗口的寬度和計算佔用的空間要求的比例所需要的像素數：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: (window.innerWidth/100) * 80, // 80% width of the window. 
    height: 200 
}); 

如果要調整階段，當窗口調整大小後，您可以使用window.onresize事件。

window.onresize = function(event) { 
    stage.setWidth((window.innerWidth/100) * 80); // 80% width again 
} 

JSFiddle of resize code