失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > android 蒙版图片带拖动_使用jQuery draggable在div剪切蒙版中拖动缩放图像?

android 蒙版图片带拖动_使用jQuery draggable在div剪切蒙版中拖动缩放图像?

时间:2023-07-18 05:33:32

相关推荐

android 蒙版图片带拖动_使用jQuery draggable在div剪切蒙版中拖动缩放图像?

我正在创建一个界面,允许用户放大图像,并在缩放蒙版div内拖动缩放版本.

我有一个200px×200px的div,我设置overflow:hidden.然后,我将一个std img(< img src =“etc”>)加载到div,即1000px x 1000px.

然后我使用jQuery

$("#my-image").draggable({ containment: [-85,83,99,222] });

这些数字是硬编码的.到目前为止,我只能通过反复试验找到他们

问题是,每次我更改页面(即在容器div上方插入另一个元素)时,页面大小变化,我的硬编码[x1,y1,x2,y2]停止正常工作.

主要的问题是我不完全明白[x1,y1,x2,y2] …

这是关于jQuery的文档:

/UI/Draggable#option-containment

我认为x1是最左边的可拖动点,我是对的,x2是最可拖拉的点吗? (和y1&y2相同)?

如果是这样,动态计算它们的最佳策略是什么?

此外,任何其他快速和容易的解决方案的主要问题“拖动一个缩放的图像在div剪辑蒙版”将非常感谢.

$(this).draggable({

drag: function(event, ui) {

if (ui.position.top > 0) {

ui.position.top = 0;

}

var maxtop = ui.helper.parent().height() - ui.helper.height();

if ( ui.position.top < maxtop) {

ui.position.top = maxtop;

}

if ( ui.position.left > 0) {

ui.position.left = 0;

}

var maxleft = ui.helper.parent().width() - ui.helper.width();

if ( ui.position.left < maxleft) {

ui.position.left = maxleft;

}

}

});

如果觉得《android 蒙版图片带拖动_使用jQuery draggable在div剪切蒙版中拖动缩放图像?》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。