javascript - 调整大小和移动图像时更改原点

Question

我正在尝试制作图像大小调整器和裁剪器，但在从所需点调整大小时遇到​​了麻烦。

目前，您可以调整大小（只需更改<img>元素的 with+height）并在图像周围移动（偏移元素的顶部和左侧边距<img>）。问题是一旦你移动它并再次调整它的大小，它就会从图像的中心开始。我希望它相对于裁剪窗口的中心调整大小。

这是我目前拥有的（顶部）和应该是什么样的（底部）的图像：http: //i.imgur.com/eAE4IEF.jpg

我一直无法弄清楚如何调整它的大小然后移动它，所以原点不在图像的中心，而是在红色窗口的中心。

我将不胜感激。

Answer 1

这实际上是通过给定的比例因子缩放图像内的单个点（裁剪框的中心），这涉及将点的每个坐标乘以该因子。

new_center_x = old_center_x * new_image_width/old_image_width
new_center_y = old_center_y * new_image_height/old_image_height

http://jsfiddle.net/jDXHz/5/

然后，您可以将图像和框都移回新位置和旧位置之间的差异，以在图像围绕其缩放时保持框静止。