KineticJS不會在初始onResize調用時更新對象的位置

這是KineticJS的一個實驗，其目標是在窗口被調整大小時簡單地在屏幕中居中對象。KineticJS不會在初始onResize調用時更新對象的位置

它工作正常，但它不會在初始調整大小事件處理程序調用中居中對象（圓形）。當我開始調整大小 - 並繼續這樣做 - 圓圈被集中。但最初圓圈從屏幕的左上角開始（0,0）。

$(document).ready(function(){  
    $(window).resize(onResize); 

    var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: $(container).width(), 
      height: $(container).height() 
    }); 

    var layer = new Kinetic.Layer(); 
    var circle = new Kinetic.Circle({ radius: 70, fill: 'red' }); 

    layer.add(circle); 
    stage.add(layer); 

    function onResize(){ 
     $(container).css('height', window.innerHeight - 20); 

     stage.setWidth($(container).width()); 
     stage.setHeight($(container).height()); 
     updatePosition(); 
    } 

    function updatePosition(){ 
     circle.setPosition(stage.getWidth()/2, stage.getHeight()/2); 
    } 

    // initial call 
    onResize(); 
});

任何線索爲什麼發生這種情況？由於

來源

2013-04-23 zok

http://jsfiddle.net/ME2cX/2

呀，你缺少一個電話繪製階段，在onResize函數被調用後。
您的事件順序是將事物添加到舞臺上，然後將該圓放置在中央，但需要再次繪製舞臺（或圖層）以說明該圓的新位置。

在的jsfiddle，我把3個戰平功能，我建議你選擇的

layer.draw()

功能之一，而不是

stage.draw();

來源

2013-04-23 14:28:00 SoluableNonagon

感謝，這解決了我的問題。但是爲什麼當調用onResize（）時圓形居中，即使沒有layer.draw（）方法（除了在初始調用時）？我可以在onResize（）函數內部使用layer.draw（），或者在onResize（）初始調用之後使用layer.draw（），並且我得到相同的結果（圓圈將開始居中並以調整大小爲中心）。我不明白。 – zok 2013-04-23 14:43:44

KineticJS不會在初始onResize調用時更新對象的位置

回答

相關問題