在边界框内拖动和缩放图像答案

【问题标题】：Drag and zoom image within bounding box在边界框内拖动和缩放图像
【发布时间】：2013-09-02 19:45:10
【问题描述】：

我正在尝试在移动网络浏览器中复制捏合和拖动图像。我可以用hammerjs做到这一点，但我无法弄清楚如何将图像保存在边界容器中。例如，如果您放大得很远，您应该能够平移但绝不平移，以便在图像的左边缘和边界容器的左边缘之间有空白空间。

Imgur 做得很好，但他们的代码不是开源的。任何想法他们如何做到这一点？ http://m.imgur.com/gallery/LlJr8FA（放大图像并平移，它总是被控制住）

【问题讨论】：

标签： javascript html css mobile-safari hammer.js

【解决方案1】：

试试这个：

HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;">
   <img id="my-image" src="big-image.jpg" width="1000" height="1000"/>
</div>

jQuery/JavaScript

// Make sure it always starts @ zero position for below calcs to work
$("#my-image").css({top: 0, left: 0});

var maskWidth  = $("#my-mask").width();
var maskHeight = $("#my-mask").height();
var imgPos     = $("#my-image").offset();
var imgWidth   = $("#my-image").width();
var imgHeight  = $("#my-image").height();

var x1 = (imgPos.left + maskWidth) - imgWidth;
var y1 = (imgPos.top + maskHeight) - imgHeight;
var x2 = imgPos.left;
var y2 = imgPos.top;

$("#my-image").draggable({ containment: [x1,y1,x2,y2] });
$("#my-image").css({cursor: 'move'});

来源：Drag a zoomed image within a div clipping mask using jQuery draggable? 这还有一些其他的东西也可能对你有帮助。

【讨论】：

谢谢，但这使用了我想避免使用的 jquery ui。

【解决方案2】：

我知道这个答案已经晚了，但是对于任何寻找没有 jquery-ui 解决方案的人来说，这个 jquery 插件应该可以解决你的问题。

http://plugins.jquery.com/cropbox/

引用它的描述：

用于就地图像裁剪（缩放和平移，而不是选择和拖动）的 jQuery 插件。这个插件只依赖于 jQuery。如果加载了Hammer.js 或jquery.hammer.js，则cropbox 插件将支持平移和缩放cropbox 的手势。

【讨论】：