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