Javascript 图片平移/缩放

Question

通过结合一些 CSS 和 Jquery UI / draggable，我已经创建了一种可以平移图像并且使用一些额外的 JS 可以缩放图像的功能。

我遇到的问题是，如果你放大图像，图像的左上角会固定，这是你所期望的。但我希望图像基于当前平移保持中心位置，这样图像的中间部分就会在容器的中央保持不变而变得更大。

我已经为此编写了一些代码，但它没有起作用，我想我的数学可能有误。有人能帮忙吗？

我希望它能像 this 一样工作。当你滚动到一个图像时，它会基于当前平移使图像保持居中，而不是从角落缩小。

HTML:

<div id="creator_container" style="position: relative; width: 300px; height: 400px; overflow: hidden;">
    <img src="/images/test.gif" class="user_image" width="300" style="cursor: move; position: absolute; left: 0; top: 0;">
</div>

Javascript：

$("#_popup_creator .user_image").bind('mousewheel', function(event, delta) {
    zoomPercentage += delta;
    $(this).css('width',zoomPercentage+'%');
    $(this).css('height',zoomPercentage+'%');

    var widthOffset = (($(this).width() - $(this).parent().width()) / 2);
    $(this).css('left', $(this).position().left - widthOffset);
});

- Chris

---

请分享您的HTML。 - Niklas

这个链接http://jsfiddle.net/niklasvh/SxLSY/没有任何反应？ - Niklas

你能分享一下你是如何进行平移的吗？它可以在所有方向上进行平移吗？ - Rami Sarieddine

Answer 1

长话短说，您需要制作一个变换矩阵来按与图像相同的比例进行缩放，然后使用该矩阵转换图像的位置。如果这个解释对您来说完全是希腊语，请查找“图像变换”和“矩阵数学”。

虽然这是一种不同的编程语言，但本页的开头是一个很好的资源起点： http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html

---

无论如何，我已经在自己的一些项目中实现了这些方法。以下是我编写的缩放功能，它可以按照您所需的方式运行：

function zoomIn(event) {
    var prevS = scale;
    scale += .1;
    $(map).css({width: (baseSizeHor * scale) + "px", height: (baseSizeVer * scale) + "px"});

    //scale from middle of screen
    var point = new Vector.create([posX - $(viewer).width() / 2, posY - $(viewer).height() / 2, 1]);
    var mat = Matrix.I(3);
    mat = scaleMatrix(mat, scale / prevS, scale / prevS);
    point = transformPoint(mat, point);

    //https://dev59.com/W3M_5IYBdhLWcg3wvV5w
    posX = point.e(1) + $(viewer).width() / 2;
    posY = point.e(2) + $(viewer).height() / 2;
    $(map).css({left: posX, top: posY});

    return false;//prevent drag image out of browser
}

请注意命令“new Vector.create()”和“Matrix.I(3)”。它们来自JavaScript向量/矩阵数学库http://sylvester.jcoglan.com/ 然后请注意“transformPoint()”。那是我使用sylvester.js实现的ActionScript链接中的函数之一（加上http://wxs.ca/js3d/的提示）。

对于我编写的完整功能集：

function translateMatrix(mat, dx, dy) {
    var m = Matrix.create([
        [1,0,dx],
        [0,1,dy],
        [0,0,1]
    ]);
    return m.multiply(mat);
}
function rotateMatrix(mat, rad) {
    var c = Math.cos(rad);
    var s = Math.sin(rad);
    var m = Matrix.create([
        [c,-s,0],
        [s,c,0],
        [0,0,1]
    ]);
    return m.multiply(mat);
}
function scaleMatrix(mat, sx, sy) {
    var m = Matrix.create([
        [sx,0,0],
        [0,sy,0],
        [0,0,1]
    ]);
    return m.multiply(mat);
}
function transformPoint(mat, vec) {
    return mat.multiply(vec);
}

- jhocking