2

我正在用 jQuery 编写一个新的crop\zoom 工具,但我已经用简单的几何图形碰了壁。请看一下:

http://jsfiddle.net/opherv/74Jep/33/

它的工作方式是这样的:要裁剪\缩放的图像位于“dragcontainer”(黄色背景)内,该“dragcontainer”(黄色背景)位于视口(黑色边框矩形)内。视口将具有“溢出:隐藏”,因此只会显示图像的一部分。

用户有两个控件 - 一个用于拖动图像以将其放置在视口内,另一个用于缩小原始图像。

它工作正常,但我在缩放时调整图像位置时遇到问题,因此放大\缩小看起来是正确的。

我想要什么: 缩放时,图像应该使用视口的中心作为注册点来改变比例,而不是“滑动”到两侧。

更多信息:

这是因为浏览器进行的缩放使用图像的左上角作为注册点。黄色的拖动容器已正确缩放,但它的大小不会线性变化的事实让我在尝试解决这个问题时感到困惑。我被迫依靠一个非常丑陋的黑客来检查图像是否离开了拖动容器,如果是,则将其返回到正确的位置,而不是正确地计算它。

如果有人可以在他的两美分中筹码,我会很高兴,并详细说明在缩放时计算拖动容器内图像的顶部\左侧位置的正确方法应该是什么,以便它“看起来正确”。

4

2 回答 2

0

可能这个插件会帮助你,它似乎可以满足你的需求:http ://www.tmatthew.net/jwindowcrop

于 2014-04-05T11:31:40.047 回答
0

您可以在每次缩放之前和之后找到图像宽度的差异,然后根据放大或缩小将图像向左或向右移动一半的差异。

对于高度和顶部/底部也可以这样做。

希望这会有所帮助-可能有一种更简单的方法,这是我的第一个想法。如果还有什么突然想到我会回来的

于 2012-07-29T10:22:50.527 回答