x轴图像变焦锁定

Question

我有一个项目，其中有一个带有图像的画布，图像可以缩放，但只能使用鼠标滚轮，但我有一个问题，图像似乎被拖动并可在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>