init
viyiviyi
commit
dcc838188c
|
|
@ -0,0 +1,166 @@
|
|||
onUiLoaded(function () {
|
||||
let imageContainer = document.getElementById("lightboxModal");
|
||||
imageContainer.style.width = "100%";
|
||||
imageContainer.style.height = "100%";
|
||||
imageContainer.style.overflow = "hidden";
|
||||
let modalControls = imageContainer.getElementsByClassName("modalControls")[0];
|
||||
if (modalControls) {
|
||||
modalControls.style.position = "relative";
|
||||
modalControls.style.zIndex = 1;
|
||||
}
|
||||
let img = imageContainer.querySelector("img");
|
||||
img.style.width = "auto";
|
||||
let scale = 1;
|
||||
let lastX = 0;
|
||||
let lastY = 0;
|
||||
let offsetx = 0;
|
||||
let offsety = 0;
|
||||
let isDragging = false;
|
||||
let touchStore = {};
|
||||
let event = {
|
||||
wheel: function (event) {
|
||||
img.style.transition = "transform 0.3s ease";
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
|
||||
let zoomStep = 0.1;
|
||||
let zoom = 1 + delta * zoomStep;
|
||||
scale *= zoom;
|
||||
lastX *= zoom;
|
||||
lastY *= zoom;
|
||||
img.style.transform =
|
||||
"translate(" + offsetx + "px, " + offsety + "px) scale(" + scale + ")";
|
||||
},
|
||||
mousedown: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
isDragging = true;
|
||||
lastX = event.clientX - offsetx;
|
||||
lastY = event.clientY - offsety;
|
||||
img.style.cursor = "grabbing";
|
||||
},
|
||||
mousemove: function (event) {
|
||||
img.style.transition = "";
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
if (isDragging) {
|
||||
let deltaX = event.clientX - lastX;
|
||||
let deltaY = event.clientY - lastY;
|
||||
offsetx = deltaX;
|
||||
offsety = deltaY;
|
||||
img.style.transform =
|
||||
"translate(" + deltaX + "px, " + deltaY + "px) scale(" + scale + ")";
|
||||
}
|
||||
},
|
||||
mouseup: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
isDragging = false;
|
||||
img.style.cursor = "grab";
|
||||
},
|
||||
mouseleave: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
isDragging = false;
|
||||
img.style.cursor = "grab";
|
||||
},
|
||||
reset() {
|
||||
scale = 1;
|
||||
lastX = 0;
|
||||
lastY = 0;
|
||||
last2X = 0;
|
||||
last2Y = 0;
|
||||
offsetx = 0;
|
||||
offsety = 0;
|
||||
touchStore = {};
|
||||
img.style.transform = "none";
|
||||
},
|
||||
touchcancel: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
img.style.transition = "";
|
||||
// 获取手势缩放比例
|
||||
let newScale = scale * event.scale;
|
||||
// 设置img标签的样式，实现缩放效果
|
||||
img.style.transform =
|
||||
"translate(" + offsetx + "px, " + offsety + "px) scale(" + scale + ")";
|
||||
},
|
||||
touchend: function (event) {
|
||||
// 更新缩放比例
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
scale = scale * event.scale;
|
||||
},
|
||||
touchstart: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
lastX = event.targetTouches[0].pageX - offsetx;
|
||||
lastY = event.targetTouches[0].pageY - offsety;
|
||||
if (event.targetTouches[1]) {
|
||||
touchStore.last1X = event.targetTouches[0].pageX;
|
||||
touchStore.last1Y = event.targetTouches[0].pageY;
|
||||
touchStore.last2X = event.targetTouches[1].pageX;
|
||||
touchStore.last2Y = event.targetTouches[1].pageY;
|
||||
touchStore.scale = scale;
|
||||
}
|
||||
},
|
||||
touchmove: function (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
img.style.transition = "";
|
||||
let deltaX = event.targetTouches[0].pageX - lastX;
|
||||
let deltaY = event.targetTouches[0].pageY - lastY;
|
||||
if (event.targetTouches[1]) {
|
||||
img.style.transition = "transform 0.3s ease";
|
||||
touchStore.delta1X = event.targetTouches[0].pageX;
|
||||
touchStore.delta1Y = event.targetTouches[0].pageY;
|
||||
touchStore.delta2X = event.targetTouches[1].pageX;
|
||||
touchStore.delta2Y = event.targetTouches[1].pageY;
|
||||
let lastLen = Math.sqrt(
|
||||
Math.pow(touchStore.last2X - touchStore.last1X, 2) +
|
||||
Math.pow(touchStore.last2Y - touchStore.last1Y, 2)
|
||||
);
|
||||
let deltaLen = Math.sqrt(
|
||||
Math.pow(touchStore.delta2X - touchStore.delta1X, 2) +
|
||||
Math.pow(touchStore.delta2Y - touchStore.delta1Y, 2)
|
||||
);
|
||||
let zoom = deltaLen / lastLen;
|
||||
scale = touchStore.scale * zoom;
|
||||
deltaX *= zoom;
|
||||
deltaY *= zoom;
|
||||
}
|
||||
offsetx = deltaX;
|
||||
offsety = deltaY;
|
||||
img.style.transform =
|
||||
"translate(" + deltaX + "px, " + deltaY + "px) scale(" + scale + ")";
|
||||
},
|
||||
};
|
||||
|
||||
function reloadZoomEvent(new_event) {
|
||||
if (!new_event) return;
|
||||
img.onclick = function (e) {
|
||||
e.stopPropagation();
|
||||
};
|
||||
imageContainer.removeEventListener("click", event.reset);
|
||||
imageContainer.removeEventListener("wheel", event.wheel);
|
||||
img.removeEventListener("mousedown", event.mousedown);
|
||||
img.removeEventListener("mousemove", event.mousemove);
|
||||
img.removeEventListener("mouseup", event.mouseup);
|
||||
img.removeEventListener("mouseleave", event.mouseleave);
|
||||
// 移动端
|
||||
img.removeEventListener("touchstart", event.touchstart);
|
||||
img.removeEventListener("touchmove", event.touchmove);
|
||||
event = new_event;
|
||||
|
||||
imageContainer.addEventListener("click", event.reset);
|
||||
imageContainer.addEventListener("wheel", event.wheel);
|
||||
img.addEventListener("mousedown", event.mousedown);
|
||||
img.addEventListener("mousemove", event.mousemove);
|
||||
img.addEventListener("mouseup", event.mouseup);
|
||||
img.addEventListener("mouseleave", event.mouseleave);
|
||||
// 移动端
|
||||
img.addEventListener("touchstart", event.touchstart);
|
||||
img.addEventListener("touchmove", event.touchmove);
|
||||
}
|
||||
reloadZoomEvent(event);
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
# [stable-diffusion-webui-zoomimage](https://github.com/viyiviyi/stable-diffusion-webui-zoomimage.git)
|
||||
|
||||
---
|
||||
[中文](readme.md) | english
|
||||
|
||||
An extension of [stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui)
|
||||
|
||||
Added mouse zoom drag and gesture zoom drag functions to the pop-up layer of image viewing.
|
||||
|
||||
The side effect is that you can't click the image to close the floating layer, you need to click the mask (outside the image) or close the floating layer button to close.
|
||||
Loading…
Reference in New Issue