Question

这是KineticJS的一个实验，它的目标是在窗口调整大小时简单地将对象置于屏幕中心。

它工作正常，只是它不会在初始调整大小事件处理程序调用中将对象（圆圈）居中。当我开始调整大小 - 并继续这样做 - 圆圈居中。但最初圆圈从屏幕的左上角开始（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();
});

有关为何会发生这种情况的任何线索？感谢

Answer 1

http://jsfiddle.net/ME2cX/2

是的，在调用onResize函数后，你错过了调用阶段的调用您的活动顺序是向舞台添加内容，然后将圆圈放在中心，但需要再次绘制舞台（或图层）以考虑圆圈的新位置。

在jsfiddle中，我放置了3个绘图功能，我建议你选择其中一个

layer.draw()

功能而不是

stage.draw();

KineticJS在初始onResize调用时不更新对象的位置

1 个答案: