Mouse Wheel Zooming

Question

so i'm working on a canvas that you can only drag a image from side to side and use the mouse wheel to re size the image by zooming in and out on it here is the code i have so far please feel free to ask any more details. I'm trying to find a way that's compact to do this and require minimum code.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/javascript">
      function drawImage(imageObj) {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 1800,
          height: 800
        });
        var layer = new Kinetic.Layer();

        // image
        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 imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'image1.png';

    </script>
  </body>
</html>

@galath how do I get a picture to zoom in and out with the mouse wheel when selected — user5071855, Jul 02 '15 at 02:27

score 1 · Answer 1 · answered Jul 02 '15 at 08:12

One way would be to use a zoom helper. For example:

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;
    }
};

Here is a demo with code you provided in as an example slightly changed.

score 0 · Answer 2 · answered Mar 31 '17 at 08:18

0

Try using this full javascript library.

answered Mar 31 '17 at 08:18

Luca Perico

1,335
15
29

Mouse Wheel Zooming

2 Answers2