设置偏移时，阶段会发生变化

Question

我在我的项目中使用KineticJs。我正在使用鼠标滚轮和按钮实现缩放。对于车轮缩放，缩放应该从鼠标指针发生，该指针工作正常。但是对于按钮缩放，它应该从stage的中心发生。我这样做：

var width = $(document).width() - 2,
    height = $(document).height() - 5;
//... a helper object for zooming
var zoomHelper = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function (event) {
        event.preventDefault();
        var delta;
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }
        var evt = event.originalEvent,
            mx = evt.clientX - zoomHelper.stage.getX(),
            my = evt.clientY - zoomHelper.stage.getY(),
            zoom = (zoomHelper.zoomFactor - delta),
            newscale = zoomHelper.scale * zoom;
        zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin.x - mx / newscale;
        zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin.y - my / newscale;
        zoomHelper.stage.setOffset({
            x: zoomHelper.origin.x,
            y: zoomHelper.origin.y
        });
        zoomHelper.stage.setScale({
            x: newscale,
            y: newscale
        });
        zoomHelper.stage.draw();
        zoomHelper.scale *= zoom;
    }
};

var zoomIn = function (e) {
    zoomHelper.scale += .10;
    zoomHelper.stage.setScale({
        x: zoomHelper.scale,
        y: zoomHelper.scale
    });
    zoomHelper.stage.draw();
};

var zoomOut = function (e) {
    zoomHelper.scale -= .10;
    zoomHelper.stage.setScale({
        x: zoomHelper.scale,
        y: zoomHelper.scale
    });
    zoomHelper.stage.draw();
};

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


    //it shifts the stage
    zoomHelper.stage.setOffset({
        x: width / 2,
        y: height / 2
    });
    //setting the position back....
    zoomHelper.stage.setPosition({
        x: width / 2,
        y: height / 2
    });

    var layer = new Kinetic.Layer();

    var background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: width,
        height: height,
        fill: '#E4E4E4'
    });

    var box1 = new Kinetic.Circle({
        x: 50,
        y: 50,
        radius: 50,
        fill: '#00D200',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

    var center = new Kinetic.Circle({
        x: width / 2,
        y: height / 2,
        radius: 5,
        fill: '#00D200',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

    var box2 = new Kinetic.Circle({
        x: 150,
        y: 150,
        radius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

    // add cursor styling
    box1.on('mouseover', function () {
        document.body.style.cursor = 'pointer';
    });
    box1.on('mouseout', function () {
        document.body.style.cursor = 'default';
    });

    // add cursor styling
    box2.on('mouseover', function () {
        document.body.style.cursor = 'pointer';
    });
    box2.on('mouseout', function () {
        document.body.style.cursor = 'default';
    });

    layer.add(background);
    layer.add(box1);
    layer.add(box2);
    layer.add(center);
    stage.add(layer);




    $(stage.content).on('wheel DOMMouseScroll', zoomHelper.zoom);
    $('#in').on('click', zoomIn);
    $('#out').on('click', zoomOut);
}); 

当我使用stage.setOffset方法时，舞台会发生变化。我不知道为什么会这样。为了解决这个问题，作为一种解决方法，我设置了它的位置。但是在我第一次做鼠标变焦之后做了这一切，舞台从它的实际位置转移。之后一切正常。我不知道自己错过了什么。我创建了fiddle for this。请帮忙。谢谢