Javascript x轴图像缩放锁定

我有一个项目，其中有一个画布，上面有一个图像。图像可以缩放，但只能使用鼠标滚轮，但我有一个问题，图像似乎被拖来拖去，可以在y轴和x轴上移动，但拖动时只能在x轴上移动

我需要图像在放大或缩小时只在y轴上上下移动，而不是左右移动。这是我的代码

 <div id="canvasContainer" style="width: 800px; height: 940px; border: 1px solid; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; "></div>
        <script type="text/javascript">
            $(document).ready(function () {
                $(document).mousewheel(function (event, delta) {
                    setYPos(delta);
                });
            });

            var yposition = 50;
            var xposition = 20;
            var width = 200;
            var height = 137;

            function setYPos(v) {
                yposition += v;
                width += v;
                height += v;
                console.debug('Y: ', yposition);
                drawImage(imageObj);
            }

            function drawImage(imageObj) {
                var stage = new Kinetic.Stage({
                    container: "canvasContainer",
                    width: $('#canvasContainer').width(),
                    height: $('#canvasContainer').height()
                });

                var layer = new Kinetic.Layer();
                // image                    
                var image1 = new Kinetic.Image({
                    image: imageObj,
                    x: xposition,
                    y: yposition,
                    width: width,
                    height: height,
                    draggable: true,
                    dragBoundFunc: function (pos) {
                        if (pos.x < this.minX)
                            this.minX = pos.x;
                        return {
                            x: pos.x,
                            y: this.getAbsolutePosition().y
                        }
                    }
                });

                stage.getContent().addEventListener('mousemove', function () {
                    xposition = stage.getPointerPosition().x;
                });

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

                layer.add(image1);
                stage.add(layer);

                var zoomHelper = {
                    stage: stage,
                    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;
                            }
                        }
                    }
                };


                $(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
            }
            var imageObj = new Image();
            imageObj.onload = function () {
                drawImage(this);
            };

            imageObj.src = 'image1.png';

            </script>
        </div>

        <script src="js/bootstrap.min.js"></script>
        <script>
            $("#menu-toggle").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        </script>
    </body>
</html>

$（文档）.ready（函数（）{
$（文档）.鼠标滚轮（函数（事件，增量）{
塞提波斯（三角洲）；
});
});
var yposition=50；
var xposition=20；
var宽度=200；
var高度=137；
函数setYPos（v）{
位置+=v；
宽度+=v；
高度+=v；
console.debug（'Y:'，yposition）；
drawImage（imageObj）；
}
函数drawImage（imageObj）{
var阶段=新的动力学阶段({
容器：“画布容器”，
宽度：$（“#画布容器”）.width（），
高度：$（“#画布容器”）。高度（）
});
var layer=新的动能层（）；
//形象
var image1=新的动力学图像({
图片：imageObj，
x:xposition，
y:位置，
宽度：宽度，
高度:高度,，
真的，
dragBoundFunc:函数（位置）{
如果（位置x-1）{
如果（event.originalEvent.detail>0）{
//向下滚动
δ=0.2；
}否则{
//向上滚动
δ=0；
}
}否则{
if（event.originalEvent.WheelDelta<0）{
//向下滚动
δ=0.2；
}否则{
//向上滚动
δ=0；
}
}
}
};
$（stage.content）.on（'mouseweel-DOMMouseScroll'，zoomHelper.zoom）；
}
var imageObj=新图像（）；
imageObj.onload=函数（）{
绘图图像（本）；
};
imageObj.src='image1.png'；
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});

你会拉小提琴吗？@chiliNUT做不来