Javascript 缩放和平移问题

因此，我试图创建一个脚本，它可以缩放图像，以鼠标x、y为中心，并进行平移

它几乎起作用了，几乎

当你在图像中缩放和平移时，它有点跳跃，所以我的数学像往常一样关闭了

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

---

计算偏移时，需要补偿比例的变化：

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

---

如果使用鼠标轮和鼠标位置在文档区域的空白部分之外，您希望它如何表现？谢谢，我昨晚梦见了这个代码，在一个狂热的递归噩梦中，你是一个巫师：

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