Pertanyaan Pan / Zoom Gambar Javascript


Dengan menggabungkan beberapa CSS dan Jquery UI / draggable, saya telah menciptakan kemampuan untuk menggeser gambar dan dengan JS ekstra kecil Anda sekarang dapat memperbesar gambar.

Masalah yang saya hadapi adalah bahwa, jika Anda memperbesar sudut kiri atas gambar tetap, seperti yang Anda harapkan. Yang saya inginkan adalah agar gambar tetap berada di tengah (berdasarkan wajan saat ini) sehingga bagian tengah gambar tetap berada di tengah-tengah wadah sementara semakin besar.

Saya telah menulis beberapa kode untuk ini tetapi tidak berhasil, saya berharap matematika saya salah. Adakah yang bisa membantu?

Saya ingin bekerja seperti itu ini tidak. Saat Anda menggulir ke dalam gambar, gambar akan tetap berada di tengah-tengah berdasarkan panci saat ini, bukan zoom keluar dari sudut.

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

8
2018-06-07 18:18


asal


Jawaban:


Singkat cerita, Anda perlu membuat matriks transformasi untuk skala dengan jumlah yang sama seperti gambar dan kemudian mengubah posisi gambar menggunakan matriks itu. Jika penjelasan itu lengkap untuk Anda, lihat "transformasi gambar" dan "matriks matematika".

Awal halaman ini adalah sumber yang cukup bagus untuk memulai dengan meskipun itu adalah bahasa pemrograman yang berbeda: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html


Bagaimanapun, saya telah menerapkan metode tersebut dalam beberapa proyek saya sendiri. Inilah fungsi zoom dari sesuatu yang saya tulis yang berfungsi sesuai keinginan Anda:

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
}

Perhatikan perintah "Vector.create ()" baru dan "Matrix.I (3)". Mereka berasal dari perpustakaan matematika vektor / matriks JavaScript http://sylvester.jcoglan.com/

Kemudian perhatikan "transformPoint ()". Itu salah satu fungsi dari tautan ActionScript itu (ditambah petunjuk http://wxs.ca/js3d/) yang saya implementasikan menggunakan sylvester.js

Untuk set fungsi lengkap yang saya tulis:

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

7
2018-06-08 19:03