3

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

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

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

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

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

why do you we need code to link to jsfiddle?

谢谢

编辑：

http://jsfiddle.net/FU55w/

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

4

2 回答 2

4

所以我找到了解决方案，

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

我计算出容器内图像中心点的 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/

于 2013-05-30T12:01:27.270 回答
1

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

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)
    });
});
于 2013-05-15T15:32:38.363 回答