CODEWITHSUNDEEP
javascriptjquery
winthers
winthers

Reputation: 223

Zoom and pan problems

So i'm attempting to create a script that Zooms in a image, centered at mouse x, y, and with panning.

And it almost works, almost...

When you zoom and pan in the image, it kinda jumps a little, so my math is off, as always.

If u could point me in the right direction it would be awesome, my mind is going numb from trying to subtract different offsets, and it's kinda like a big blur atm !

JSBin Example

    /**
      MouseDown:   Pan image
      ScrollWheel: Zoom In image
    */

    var $doc = $(".document");
    var scale = 1; 
    var panning = false;
    var start = {x:0, y:0}
    var offset = {left:0, top: 0}

    $(window).bind("mousedown", (e) => {
        e.preventDefault();
        start = {x: e.clientX, y: e.clientY};
        updateOffset();
        panning = true;
    })
    .bind("mouseup", (e) => {
        updateOffset();
        panning = false;
    })
    .bind("mousemove", (e)=> {

        e.preventDefault();         
        if(!panning) return;
        var x = (e.clientX - start.x) + offset.left;
        var y = (e.clientY - start.y) + offset.top;
        $doc.css({
            "transform": "translate("+ (x) +"px, "+ (y) +"px) scale(" +scale +")"              
        });
    })
    .bind("mousewheel", (e)=>{ 

        e.preventDefault();

        // get scroll direction & set zoom level
        (e.originalEvent.wheelDelta /120 > 0) ?  (scale *= 1.2) : (scale /= 1.2)

        var x = e.clientX - offset.left;
        var y = e.clientY - offset.top;

        var originX = x
        var originY = y

        var translateX = offset.left;
        var translateY =  offset.top;

        $doc.css({
            "transform-origin": originX+ "px " + originY + "px",
            "transform": "translate("+ translateX  +"px, "+ translateY +"px) scale("+scale+")"
        })

        updateOffset();
    });


  // Helpers --------------------------------------------------------


  // graps the transform styles from the element
    function getMatrix($el) {
        if(!$el.css("transform")) {
            return  false;
        }
        var arr = $el.css("transform").match(/\((.*)\)/)[1].split(",");
        return {
            scale: parseInt(arr[0]),
            tx: parseInt(arr[4]),
            ty: parseInt(arr[5])
        }
    }

    function updateOffset () {
        var m = getMatrix($doc)
            offset = {
                top:  m.ty,
                left: m.tx
            };
    }

Upvotes: 0

Views: 171

Answers (1)

fmacdee
fmacdee

Reputation: 2436

You need to compensate for the change in scale when calculating the offset:

    .bind("mousewheel", (e)=>{ 
        //
        // Zoom
        //
        e.preventDefault();

        // take the scale into account with the offset
        var xs = (e.clientX - offset.left) / scale;
        var ys = (e.clientY - offset.top) / scale;

        // get scroll direction & set zoom level
        (e.originalEvent.wheelDelta /120 > 0) ?  (scale *= 1.2) : (scale /= 1.2)

        // reverse the offset amount with the new scale
        var x = e.clientX - xs * scale;
        var y = e.clientY - ys * scale;
        $doc.css({
            "transform": "translate("+ x  +"px, "+ y +"px) scale("+scale+")"
        })
        updateOffset();          
    });

Oh, and you have to use parseFloat instead of parseInt in your getMatrix() call or it just loses accuracy over time!

    // graps the transform styles from the element
    function getMatrix($el) {
        if(!$el.css("transform")) {
            return  false;
        }
        var arr = $el.css("transform").match(/\((.*)\)/)[1].split(",");
        return {
            scale: parseFloat(arr[0]),
            tx: parseFloat(arr[4]),
            ty: parseFloat(arr[5])
        }
    }

Upvotes: 1

Related Questions