Javascript Image Pan / Zoom

Question

Объединив некоторые CSS и Jquery UI / dragggable, я создал возможность панорамирования изображения, и с помощью небольшого дополнительного 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

Короче говоря, вам нужно сделать матрицу преобразования для масштабирования на ту же величину, что и изображение, а затем преобразовать положение изображения с использованием этой матрицы.Если это объяснение полностью для вас, посмотрите «преобразования изображений» и «математика матриц».

Начало этой страницы - довольно хороший ресурс, с которого можно начать, даже если это другой язык программирования: 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);

    ///1267405/poluchite-razmery-okna-prosmotra-brauzera-s-pomoschy-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 ()».Это одна из функций из этой ссылки ActionScript (плюс подсказки к http://wxs.ca/js3d/), которые я реализовал с помощью sylvester.js

Для полного набора функций, которые я написал:

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