缩小但不是?

时间:2015-07-02 22:38:54

标签: javascript jquery html

所以我一直在画布上工作,我的图像只能左右移动,并使用滚轮放大和缩小图像。我设法让它放大,但鼠标滚轮上下放大图像更多请帮我提出建议!



      function drawImage(imageObj) {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 1800,
          height: 800
        });
        var layer = new Kinetic.Layer();

          // image
        var e = window.event || e; // old IE support
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        var image1 = new Kinetic.Image({
            image: imageObj,
            x: stage.getWidth() / 2 - 896 / 1,
            y: stage.getHeight() / 2 - 255 / 2,
            width: 200,
            height: 157,
            draggable: true,
            dragBoundFunc: function (pos) {
                if (pos.x < this.minX)                                  
                this.minX = pos.x;
                return {
                    x: pos.x,
                    y: this.getAbsolutePosition().y
                }
            }
        });


        // 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.Wheeldeta < 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;
            }
        };


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

        /*
        var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

      if (document.attachEvent) //if IE (and Opera depending on user setting)
          document.attachEvent("on" + mousewheelevt, function (e) { alert('Mouse wheel movement detected!') })
      else if (document.addEventListener) //WC3 browsers
          document.addEventListener(mousewheelevt, function (e) { alert('Mouse wheel movement detected!') }, false)
          */
&#13;
      body {
        margin: 0px;
        padding: 0px;
      }
&#13;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
 
<div id="container"></div>     
&#13;
&#13;
&#13;

0 个答案:

没有答案