Javascript 圖像平移/縮放

Question

通過結合一些 CSS 和 Jquery UI / 可拖動我已經創建了平移圖像的能力，並且使用一點額外的 JS，您現在可以縮放圖像。

我遇到的問題是，如果您放大圖像的左上角是固定的，正如您所期望的那樣。 我想要的是圖像保持在中心（基於當前的平移），以便圖像的中間保持在容器的中間，同時變大。

我為此編寫了一些代碼但不起作用，我希望我的數學是錯誤的。 有人可以幫忙嗎？

我希望它像這樣工作。 當您滾動到圖像時，它會根據當前平移保持圖像居中，而不是從角落縮小。

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

Answer 1

長話短說，您需要制作一個變換矩陣以與圖像相同的比例縮放，然后使用該矩陣變換圖像的 position。 如果該解釋對您來說完全是希臘語，請查找“圖像轉換”和“矩陣數學”。

本頁的開頭是一個很好的資源，盡管它是一種不同的編程語言： http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html

---

無論如何，我已經在我自己的一些項目中實現了這些方法。 這是我寫的 function 的放大圖，它可以按照您想要的方式運行：

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

    //http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
    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);
}