javascript - 图像调整大小和裁剪。调整大小时框移动的问题

Question

我正在尝试制作一个图像编辑器工具来配合我的图像上传系统。我得到了大部分工作，但我认为带有图像的框和用于裁剪的框在调整大小时移动有点奇怪。特别是当试图从左下角和两个上 Angular 调整大小时。

我真的不知道这是 CSS 问题还是 jQuery 逻辑问题。如果有人能看一看，我将不胜感激。

我知道 jQuery UI 具有可拖动、可调整大小 等功能，但我想把它变成我自己。

jsfiddle demo

编辑: 当从 resize.width() 和 resize.hight() 更改为我的变量 width 和 height 但是从左到右调整大小时，移动仍然有点奇怪。 (jsfiddle 更新)

$(document).ready(function () {

    var dragging = null;
    var resize = null;
    var pos;
    var height;
    var width;

    $(".image-resize__box").on("mousemove", function (e) {
        if (dragging) {
            dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });

    $(".image-resize__box__crop__box").on("mousedown", null, function () {
        dragging = $(".image-resize__box__crop");
    });

    $(".image-resize__box__handle").on("mousedown", null, function () {
        resize = $(".image-resize__box");
        pos = $(this).attr("data-pos");
        height = resize.height();
        width = resize.width();
    }); 

    $(document.body).on("mousemove", null, function (e) {

        if (resize) {

            var relX = e.pageX - resize.offset().left;
            var relY = e.pageY - resize.offset().top;

            if(pos === "top-left") {
                resize.css({ 
                    "width" : resize.width() - relX,
                    "height" : resize.height() - relY, 
                });
            }
            if(pos === "top-mid") {
                resize.css({ 
                    "width" : width,
                    "height" : height - relY, 
                });
            }
            if(pos === "top-right") {
                resize.css({ 
                    "width" : resize.width() + (relX - resize.width()),
                    "height" : resize.height() - relY, 
                });
            }
            if(pos === "mid-right") {
                resize.css({ 
                    "width" : resize.width() + (relX - resize.width()),
                    "height" : height, 
                });
            }
            if(pos === "mid-left") {
                resize.css({ 
                    "width" : resize.width() - relX,
                    "height" : height, 
                });
            }
            if(pos === "bottom-left") {
                resize.css({ 
                    "width" : resize.width() - relX,
                    "height" : resize.height() + (relY - resize.height()), 
                });
            }
            if(pos === "bottom-mid") {
                resize.css({ 
                    "width" : width,
                    "height" : resize.height() - (resize.height() - relY), 
                });
            }
            if(pos === "bottom-right") {
                resize.css({ 
                    "width" : resize.width() + (relX - resize.width()),
                    "height" : resize.height() + (relY - resize.height()), 
                });
            }
        }
    });

    $(document.body).on("mouseup", function () {
        resize = null;
        dragging = null;
    });

});

Answer 1

我认为问题在于您可以单击 handle 内部 的某处，但随后在鼠标移动时，您会跳转到 handle 的0,0 位置。这会导致图像尺寸“跳跃”。

您可以解决此问题，方法是考虑鼠标单击与 handle 原点的偏移量，并将其添加到 onmousemove 事件的 x 和 y 轴。