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

KineticJS：根据百分比设置宽度

1 个答案: