Question

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

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

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

顺便说一下，所有元素都是通过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();
}

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

1 个答案: