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