我正在尝试使用图像编辑工具来配合我的图像上传系统。我得到了大部分工作，但我认为带有图像的盒子和用于裁剪的盒子在调整大小时会有点奇怪。特别是当尝试从左下角和两个顶角调整大小时。
我真的不知道这是CSS问题还是jQuery逻辑的一些问题。如果有人可以看看，我真的很感激。
我知道jQuery UI有draggable, resizable等，但是，我想让这成为我自己。
编辑：从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;
});
});
答案 0 :(得分：1)
我认为问题是你可以点击里面手柄，但是在鼠标移动时，你会跳到手柄的0,0位置。这导致图像＆＃34;跳跃＆＃34;大小。
您可以通过计算鼠标单击手柄原点的偏移量并将其添加到onmousemove事件的x和y来解决此问题。
答案 1 :(得分：0)
我想我现在已经完成了大部分工作。还有一些小问题要解决，裁剪框目前能够移出图像框。如果有人感兴趣，可以找到更新的jsfiddle here
(function () {
//-------------------------------------------------
// Image details
//-------------------------------------------------
var imageDetails = function() {
var details = function () {
$("#imageWidth").html($(".image-resize__box").width());
$("#imageHeight").html($(".image-resize__box").height());
$("#cropWidth").html($(".image-resize__box__crop").width());
$("#cropHeight").html($(".image-resize__box__crop").height());
$("#cropOffsetTop").html($(".image-resize__box__crop").position().top);
$("#cropOffsetLeft").html($(".image-resize__box__crop").position().left);
};
return {
getDetails: details
};
}();
//-------------------------------------------------
// Image resizer
//-------------------------------------------------
var imageResize = function() {
$(document).ready(function () {
//-------------------------------------------------
// Global variables
//-------------------------------------------------
var dragging = null;
var resize = null;
var pos;
var height;
var width;
var crop = $(".image-resize__box__crop");
var resizeBox = $(".image-resize__box");
//-------------------------------------------------
// Event handlers
//-------------------------------------------------
// Set dragging active on mouse down
$(".image-resize__box__crop__box").on("mousedown", null, function () {
dragging = crop;
});
// Set resize active on mouse down
$(".image-resize__box__handle").on("mousedown", null, function () {
// Resize crop box
if($(this).parent().hasClass("image-resize__box__crop")) {
resize = crop;
} else { // Resize image
resize = resizeBox;
}
pos = $(this).attr("data-pos"); // Resize handler used
height = resize.height(); // Height of element resize
width = resize.width(); // Width of element to resize
});
// Deactivate resize/dragging
$(document.body).on("mouseup", function () {
resize = null;
dragging = null;
});
//-------------------------------------------------
// Drag (crop box)
//-------------------------------------------------
resizeBox.on("mousemove", function (e) {
if (dragging) {
dragging.offset({
top: e.pageY - (crop.height()/ 2),
left: e.pageX - (crop.width()/ 2),
});
imageDetails.getDetails(); // Update image details
}
});
//-------------------------------------------------
// Resize image
//-------------------------------------------------
$(document.body).on("mousemove", null, function (e) {
if (resize) {
var relX = e.pageX - resize.offset().left; // Mouse position in element left
var relY = e.pageY - resize.offset().top; // Mouse position in element top
//-------------------------------------------------
// Resize handlers
//-------------------------------------------------
if(pos === "top-left") {
resize.css({
"width" : width - relX,
"height" : height - relY,
});
}
if(pos === "top-mid") {
resize.css({
"width" : width,
"height" : height - relY,
});
}
if(pos === "top-right") {
resize.css({
"width" : width + (relX - width),
"height" : height - relY,
});
}
if(pos === "mid-right") {
resize.css({
"width" : width + (relX - width),
"height" : height,
});
}
if(pos === "mid-left") {
resize.css({
"width" : width - relX,
"height" : height,
});
}
if(pos === "bottom-left") {
resize.css({
"width" : width - relX,
"height" : height + (relY - height),
});
}
if(pos === "bottom-mid") {
resize.css({
"width" : width,
"height" : height - (height - relY),
});
}
if(pos === "bottom-right") {
resize.css({
"width" : width + (relX - width),
"height" : height + (relY - height),
});
}
imageDetails.getDetails(); // Update image details
}
});
});
}(imageDetails.getDetails());
}());
答案 2 :(得分：0)
我已经修正了裁剪框跳动以及大小调整的怪异问题。我添加了drag变量来跟踪先前的x和y的位置
您可以在此处Updated Cropbox
进行检查