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

时间:2013-09-02 19:45:11

标签: javascript html css3 mobile-safari hammer.js

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

Imgur做得很好,但他们的代码不是开源的。他们是如何实现这一目标的? http://m.imgur.com/gallery/LlJr8FA(放大图像并平移,它始终保持包含)

2 个答案:

答案 0 :(得分: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?这还有其他一些可能对你有用的东西。

答案 1 :(得分:0)

我知道这个答案很晚,但是对于任何寻找no jquery-ui解决方案的人来说, 这个jquery插件可以解决你的问题。

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

引用其描述:

  

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