0

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

关于为什么会发生这种情况的任何线索？谢谢

4

1 回答 1

0

http://jsfiddle.net/ME2cX/2

是的，在调用 onResize 函数后，您错过了绘制舞台的调用。
您的事件顺序是在舞台上添加东西，然后将圆圈放在中心，但需要再次绘制舞台（或图层）以说明圆圈的新位置。

在 jsfiddle 中，我放置了 3 个绘制函数，我推荐你选择其中一个

layer.draw()

功能而不是

stage.draw();
于 2013-04-23T14:28:00.747 回答