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

Question

我正在尝试在单击按钮时创建可缩放图像，但是图像应该以可视区域为中心进行缩放，因为图像可能比容器大。

我在这里创建了一个小提琴来说明我想要什么，我显然通常会将图像隐藏在容器之外，我现在不关心那部分，还放置一个边框覆盖以显示边界容器。

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

基本上，红色容器内图像的中心点在缩放后必须保持不变，因此您实际上是在放大容器中间的任何内容。

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

why do you we need code to link to jsfiddle?

谢谢

编辑：

http://jsfiddle.net/FU55w/

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

Answer 1

所以我找到了解决办法，

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

我计算出容器内图像中心点的 x 和 y 值，方法是取 left 和 top 值，将其变为正数，然后将容器宽度和高度的一半相加。

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

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

然后将新的 x 和 y 的差值从当前的 le​​ft 和 top 中取出。

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

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

Answer 2

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

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