在jQuery中裁剪\缩放工具的几何计算

问题描述:

我在jQuery中编写了一个新的裁剪\缩放工具,我用简单的几何体打了一面墙。请看看:在jQuery中裁剪缩放工具的几何计算

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

它的工作方式是这样的:图像进行裁剪\放大搁置在“dragcontainer”(黄色背景),即视口(黑色边框的矩形)内坐镇内线。该视口将具有“溢出:隐藏”,因此将只显示图像的一部分。

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

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

我想要什么: 放大时,图像应该用视作为注册点的中心改变的规模,而不是“滑”向两侧。

更多信息:

出现这种情况是由于通过浏览器进行缩放使用图像的左上角的注册点的事实。黄色dragcontainer正确缩放,但它的大小并没有线性变化的事实真的让我困惑,当试图解决这个问题。我*依靠一个非常丑陋的黑客来检查图像是否离开了dragcontainer,如果是这样,将它返回到适当位置,而不是正确计算它。

我会喜欢它,如果有人可以砸他的两分钱,并详细说明什么应该正确的方式来计算图像的顶部\左侧的位置,同时缩放,使其“看起来是正确的”。

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

对于高度和顶部/底部也可以做同样的事情。

希望这可以帮助 - 这可能是一个更简单的方法,这是我的第一个想法。如果别的跳到介意生病回来

+1

也有所帮助,谢谢! 我结束了你的建议+做一个抵消蛮力检查的图像是否已经离开了拖曳容器的界限,如果是的话,把它推回去。不是最优雅的解决方案 - 但它的工作原理 – OpherV 2012-07-30 07:12:49

可能是这个插件会帮你,好像你在找什么:http://www.tmatthew.net/jwindowcrop