具有 8 个手柄和拖动功能的图像缩放器降低

发布于 2024-09-29 05:25:44 字数 1141 浏览 4 评论 0原文

我目前正在构建一个简单的应用程序，将一个图像重叠在另一个图像之上。最上面的一个需要可拖动且可调整大小。最初我认为 jQuery UI 是一个好主意，它有两个主要问题：

出于某种原因，Chrome 不喜欢这两种行为，即使它们被强加给不同的元素。
我需要 8 个手柄，就像任何图像处理软件的标准一样。

这是我的代码，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
<script>
$(document).ready(function(){
    $(".draggable").draggable();
    $(".resizable").resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });
});
</script>

<img src="https://i.sstatic.net/TWqnS.jpg" />
<span class="draggable">
<img src="https://i.sstatic.net/2fmzr.png" width="192" height="192" class="resizable" />
</span>

我无法将两种行为设置为同一元素，因为它会弄乱一些东西。

我需要的是类似 jCrop 的东西，唯一的区别是我没有裁剪图像，但将一个重叠在另一个之上。这些句柄正是我所需要的，但当前选项不允许我更改可调整大小的元素，因为它是一个 div 并且我需要一个图像。

谢谢。

原文

I'm currently building a simple app that overlaps one image on top of another. The top one needs to be draggable and resizable. Initially I thought jQuery UI would be a good idea, there are two main issues with it:

For some reason, Chrome doesn't like both behaviors even when they're imposed to different elements.
I need 8 handles, just like the standard for any image manipulation software.

Here's my code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
<script>
$(document).ready(function(){
    $(".draggable").draggable();
    $(".resizable").resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });
});
</script>

<img src="https://i.sstatic.net/TWqnS.jpg" />
<span class="draggable">
<img src="https://i.sstatic.net/2fmzr.png" width="192" height="192" class="resizable" />
</span>

I can't set both behaviors to the same element because it messes something up.

What I need is something like jCrop, the only difference is that I'm not cropping an image, but overlapping one on top of another. The handles are exactly what I need but the current options won't let me change the resizable element since it's a div and I need an image.

Thanks.

分享到QQ

分享到微博