变焦和pan问题

Question

因此，我试图创建一个脚本，在图像中放大，以鼠标x，y为中心，并进行摇摄。

几乎成功了，几乎.

当你放大和平移图像，它有点跳跃，所以我的数学是关闭的，像往常一样。

如果你能指出正确的方向，这将是太棒了，我的思想是麻木的尝试减去不同的抵消，它有点像一个大模糊自动取款机！

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

哦，您必须在您的parseFloat ()调用中使用parseInt而不是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])
        }
    }