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图片旋转/缩放

回答

相关问题