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

Question

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

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

图层不能自动与舞台一起缩放吗？如果我调整萤火虫的画布大小，图层自动缩放，但这是唯一一次我得到正确的回应...

顺便说一句，所有的元素都是多边形的坐标/点/ etc通过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(); 
}