kineticjs - 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