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

Drag and zoom image within bounding box

本文关键字：缩放 图像 拖动 边界      更新时间：2023-09-26

我正在尝试在移动web浏览器中复制图像上的夹点和拖动。我可以用hammerjs做到这一点，但我不知道如何将图像保持在边界容器中。例如，如果您被放大得很远，您应该能够平移，但永远不能平移，以便在图像的左边缘和边界容器的左边缘之间有空白。

Imgur做得很好，但他们的代码不是开源的。你知道他们是如何做到这一点的吗？http://m.imgur.com/gallery/LlJr8FA（放大图像并四处平移，它始终保持不变）

试试这个：

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'});

来源：使用jQuery draggable？在div剪切掩码中拖动缩放的图像？这还有其他一些东西可能对你也有帮助。

我知道这个答案很晚了，但对于任何寻找无jquery ui解决方案的人来说，这个jquery插件应该可以解决您的问题。

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

报价形式及其描述：

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

相关文章：