JavaScript圖片旋轉/縮放

通過結合一些CSS和jQuery UI /拖動我創建平移圖像的能力，並與一點點額外的JS，你現在可以放大圖像。JavaScript圖片旋轉/縮放

我遇到的問題是，如果您在圖片的左上角放大是固定的，如你所願。我希望圖像保持中心位置（基於當前的平移），以便圖像的中間位於容器的中間，同時變大。

我已經寫了一些代碼，這可是不行的，我希望我的數學是錯誤的。誰能幫忙？

我希望它的工作就像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); 
});

來源

2011-06-07 Chris

請分享你的HTML和HTTP – Niklas 2011-06-07 18:26:22

： //jsfiddle.net/niklasvh/SxLSY/它沒有做任何事情？ – Niklas 2011-06-07 18:37:36

你能分享你是如何做平移的嗎？它是否向四面八方泛平？ – 2013-01-23 20:40:51

長話短說，你需要變換矩陣由相同數量的圖像縮放，然後轉換圖像的位置使用該矩陣。如果這個解釋對您完成希臘語，請查看「圖像轉換」和「矩陣數學」。

此頁面的開始是一個不錯的資源入手，即使它是一個不同的編程語言： 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); 

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

注命令「新Vector.create（）」和「Matrix.I（3）」。那些來自於JavaScript的向量/矩陣數學庫http://sylvester.jcoglan.com/

然後記「transformPoint（）」。這是（上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); 
}

來源

2011-06-08 19:03:20 jhocking

JavaScript圖片旋轉/縮放

回答

相關問題