javascript - 缩放和平移问题

Question

所以我正在尝试创建一个脚本来放大图像，以鼠标 x、y 为中心并进行平移。

而且它几乎可以工作，几乎......

当你缩放和平移图像时，它有点跳跃，所以我的数学一如既往地不对。

如果你能给我指出正确的方向，那就太棒了，我的头脑因尝试减去不同的偏移量而变得 NumPy ，这有点像一个大模糊的自动取款机!

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

Answer 1

计算偏移时需要补偿比例变化:

    .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();          
    });

哦，你必须在 getMatrix() 调用中使用 parseFloat 而不是 parseInt，否则随着时间的推移它会失去准确性!

    // 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])
        }
    }