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(); 
}