kineticjs根据舞台宽度调整图层大小

Question

我有一个阶段，可以根据浏览器宽度调整容器宽度（试图让我的项目响应但挣扎）。我只有一个图层，并希望图层根据舞台的大小调整大小。截至目前，舞台宽度随浏览器宽度而变化，但图层宽度没有变化，只是被切断

我已经在 window.onresize 函数中尝试了 layer.setScale(x,y) ，但没有足够的数学意义来使用它来随着舞台宽度的变化来缩放图层。 我也尝试过 layer.setWidth(x) 并在同一个函数中使用舞台宽度作为 x 的变量，但没有运气。

图层不应该随舞台自动缩放吗？如果我在萤火虫中调整画布大小，图层会自动缩放，但这是我唯一得到正确响应的时间......

顺便说一句，所有元素都是多边形，其坐标/点/等是通过 svg/illustrator 导入的。不知道这是否与问题有关...

完全卡住了……

这是我的项目：http://cityunite.org/new

Answer 1

有很多方法可以解决这个问题。我只是提出我的建议。

当浏览器窗口大小发生变化时，您不应该设置舞台的宽度，而是应该缩放。首次加载页面时，您的比例设置为 1，即 (100%)。当您的窗口大小发生变化时，您应该监听该变化并相应地设置比例。

类似这样的：

//save initial scale
var initialScale = stage.scale(); //returns {x: 1, y: 1} 
var initialWidth = $("#container").innerWidth(); // initial width
var initialHeight = $("#container").innerHeight(); // initial height

window.onresize = function(event) { // listen for change
    var width = $("#container").innerWidth(); // new width of page
    var height = $("#container").innerHeight(); // new height of page
    console.log(width);
    console.log(height);
    var xScale =  (width  / initialWidth) * initialScale.x;  // percent change in width (Ex: 1000 - 400/1000 means the page scaled down 60%, you should play with this to get wanted results)
    var yScale = (height / initialHeight) * initialScale.y;
    var newScale = {x: xScale, y: yScale};
        console.log(newScale);
    stage.setAttr('width', width);
    stage.setAttr('height', height);    
    stage.setAttr('scale', newScale ); 
    stage.draw();
}