JavaScript缩放图像和中心可视区域

JavaScript zoom image and center viewable area

本文关键字：可视 区域 缩放 图像 JavaScript      更新时间：2023-09-26

我试图在点击按钮时创建一个可缩放的图像，但是图像应该在可视区域的中心缩放，因为图像可能比容器大。

我在这里创建了一个fiddle来说明我想要的，我显然通常会隐藏在容器外面的图像，我现在不担心这部分，还放入一个边界覆盖来显示容器的边界。

我已经完成了基于图像比例的缩放部分，我只需要计算出新的顶部和左侧css值，并在缩放后将其应用于图像。此外，图像是可拖动的，所以一旦你移动图像，它必须考虑到图像的位置。

基本上，在红色容器内的图像的中心点在缩放后必须保持不变，所以你可以有效地放大容器中间的任何东西。

http://jsfiddle.net/wFaFg/1/

why do you we need code to link to jsfiddle?

感谢编辑:

http://jsfiddle.net/FU55w/

接近上面的提琴，但仍然没有完全缩放到中心点

我找到了解决方案，

这比仅仅找出图像的大小增加了多少要稍微复杂一些。

我算出x &在容器内的图像中心点的Y值，通过取左和顶值，将其变为正，然后添加一半的容器宽度和高度。

var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2

我通过将新宽度除以旧宽度来计算图像比例，然后我可以乘以x &Y值的比值

然后取新x和y与当前左和上的差值

image.position().left - (newX - x)
image.position().top - (newY - y)

完整的小提琴:http://jsfiddle.net/fbd2mk5q/

根据您的评论尝试新的小提琴:

http://jsfiddle.net/wFaFg/6/

$("#zoom").on("click", function(e)
{
    var container = $("#container");
    var image = $("#container img");
    var curLeft = image.position().left;
    var curTop = image.position().top;
    var ratio = image.height() / image.width();
    image.css({
        height: image.height() + (20 * ratio),
        width: image.width() + (20 * ratio),
        left: curLeft - ((20 * ratio)/2),
        top: curTop - ((20 * ratio)/2)
    });
});
相关文章：