JavaScript缩放图像并居中可视区域

Question

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

我创建了一个演示此功能的fiddle，通常我会隐藏容器外的图像，但现在我不关心这部分，还添加了边框覆盖以显示容器的范围。

我已经根据图像比例完成了缩放部分，我只需要计算出新的top和left css值，并在缩放后将其应用于图像。另外，该图像是可拖动的，因此一旦移动图像，它必须考虑到图像的位置。

基本上，在红色容器内图像的中心点在缩放后必须保持不变，因此您实际上是在缩放容器中间的任何内容。 http://jsfiddle.net/wFaFg/1/

why do you we need code to link to jsfiddle?

谢谢

编辑：

http://jsfiddle.net/FU55w/

使用上述示例已经接近目标，但仍然无法完全将焦点缩放至中心点。

- Ant

Answer 1

我找到了解决方案，

它比仅仅查找图像增加的尺寸略微复杂。

我通过将左侧和顶部值取正然后添加容器宽度和高度的一半来计算图像在容器中心点的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)

完整的fiddle： http://jsfiddle.net/fbd2mk5q/

- Ant

---

我们如何在边界内拖动图像？ - Burak

Answer 2

尝试根据您的评论使用新的“fiddle”：

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

- Yeronimo

---

嗨，感谢回复。我忘了说图片是可拖动的，并且它必须始终从当前位置的中心缩放。在原始的 fiddle 中，如果您从容器外部拖动，则可以拖动图像（边框 div 阻止您从内部拖动，现在不是问题）。 - Ant

好的，让我来解释一下。小提琴图像从图像的左上角开始。如果我现在将它拖动到红色区域中的右下角，然后单击缩放，您希望在位置保持在右下角的情况下缩放图像？ - Yeronimo

不，我希望图像的中心点在容器内保持相同的位置，这样你就可以有效地放大容器中间的任何内容（红色框）。 - Ant

嗯，对我来说似乎仍然无法从中心缩放。 - Ant

http://jsfiddle.net/FU55w/ 应该展示它不是在中心缩放。在“十字线”上放置一个点，看到它不是在中心点缩放。 - Ant