|
@@ -185,108 +185,105 @@ const showELStatus = ref(false);
|
|
|
const rendered = () => {
|
|
|
loading.value = false;
|
|
|
|
|
|
- // const clickableElementsA = document.querySelectorAll(".vue-pdf-embed div");
|
|
|
- // const clickableElements = document.querySelectorAll(
|
|
|
- // ".vue-pdf-embed .vue-pdf-embed__page"
|
|
|
- // );
|
|
|
- // clickableElementsA.forEach((element) => {
|
|
|
- // element.style.display = "flex";
|
|
|
- // element.style.alignItems = "center";
|
|
|
- // element.style.justifyContent = "center";
|
|
|
- // });
|
|
|
- // clickableElements.forEach((element, index) => {
|
|
|
- // let rotationAngle = 0;
|
|
|
- // element.addEventListener("click", () => {
|
|
|
- // const currentWidth = element.offsetWidth;
|
|
|
- // const currentHeight = element.offsetHeight;
|
|
|
- // const parent = element.parentNode;
|
|
|
- // let distance = 0;
|
|
|
- // if (currentHeight > currentWidth) {
|
|
|
- // distance = currentHeight - currentWidth;
|
|
|
- // } else {
|
|
|
- // element.style.width = `${currentHeight}px`;
|
|
|
- // element.style.height = `${currentWidth}px`;
|
|
|
- // }
|
|
|
- // rotationAngle = (rotationAngle + 90) % 360;
|
|
|
- // if (rotationAngle == 0) {
|
|
|
- // if (distance > 0) {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // } else {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // if (rotationAngle == 90) {
|
|
|
- // if (distance > 0) {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
- // element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
|
|
|
- // } else {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // if (rotationAngle === 180) {
|
|
|
- // if (distance > 0) {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // } else {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // if (rotationAngle === 270) {
|
|
|
- // if (distance > 0) {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
|
|
|
- // } else {
|
|
|
- // element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
- // element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // parent.style.width = `${currentWidth}px`;
|
|
|
- // parent.style.height = `${currentHeight}px`;
|
|
|
- // });
|
|
|
- // element.addEventListener("wheel", function (event) {
|
|
|
- // const currentWidth = element.offsetWidth;
|
|
|
- // const currentHeight = element.offsetHeight;
|
|
|
- // const parent = element.parentNode;
|
|
|
- // if (event.ctrlKey) {
|
|
|
- // event.preventDefault();
|
|
|
+ const clickableElementsA = document.querySelectorAll(".vue-pdf-embed div");
|
|
|
+ const clickableElements = document.querySelectorAll(
|
|
|
+ ".vue-pdf-embed .vue-pdf-embed__page"
|
|
|
+ );
|
|
|
+ clickableElementsA.forEach((element) => {
|
|
|
+ element.style.display = "flex";
|
|
|
+ element.style.alignItems = "center";
|
|
|
+ element.style.justifyContent = "center";
|
|
|
+ });
|
|
|
+ clickableElements.forEach((element, index) => {
|
|
|
+ let rotationAngle = 0;
|
|
|
+ element.addEventListener("click", () => {
|
|
|
+ const currentWidth = element.offsetWidth;
|
|
|
+ const currentHeight = element.offsetHeight;
|
|
|
+ const parent = element.parentNode;
|
|
|
+ let distance = 0;
|
|
|
|
|
|
- // // 获取当前的transform值并解析
|
|
|
- // const transform = getComputedStyle(element).transform;
|
|
|
- // let scale = 1,
|
|
|
- // rotate = 0;
|
|
|
+ distance = currentHeight - currentWidth;
|
|
|
|
|
|
- // if (transform && transform !== "none") {
|
|
|
- // const transformMatrix = new WebKitCSSMatrix(transform);
|
|
|
- // scale = Math.sqrt(
|
|
|
- // Math.pow(transformMatrix.a, 2) + Math.pow(transformMatrix.b, 2)
|
|
|
- // );
|
|
|
- // rotate =
|
|
|
- // Math.atan2(transformMatrix.b, transformMatrix.a) * (180 / Math.PI);
|
|
|
- // }
|
|
|
+ rotationAngle = (rotationAngle + 90) % 360;
|
|
|
+ if (rotationAngle == 0) {
|
|
|
+ if (distance > 0) {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ } else {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (rotationAngle == 90) {
|
|
|
+ if (distance > 0) {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
+ element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
|
|
|
+ } else {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg)`;
|
|
|
+ element.firstElementChild.style.transform = `translateX(${-distance / 2}px)`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (rotationAngle === 180) {
|
|
|
+ if (distance > 0) {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ } else {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateY(0px) `;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (rotationAngle === 270) {
|
|
|
+ if (distance > 0) {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
|
|
|
+ } else {
|
|
|
+ element.style.transform = `rotate(${rotationAngle}deg) `;
|
|
|
+ element.firstElementChild.style.transform = `translateX(${distance / 2}px)`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ parent.style.width = `${currentWidth}px`;
|
|
|
+ parent.style.height = `${currentHeight}px`;
|
|
|
+ });
|
|
|
+ element.addEventListener("wheel", function (event) {
|
|
|
+ const currentWidth = element.offsetWidth;
|
|
|
+ const currentHeight = element.offsetHeight;
|
|
|
+ const parent = element.parentNode;
|
|
|
+ if (event.ctrlKey) {
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- // // 根据滚轮方向调整缩放级别
|
|
|
- // if (event.deltaY < 0) {
|
|
|
- // // 向上滚动,放大
|
|
|
- // scale += 0.1;
|
|
|
- // } else {
|
|
|
- // // 向下滚动,缩小
|
|
|
- // scale -= 0.1;
|
|
|
- // }
|
|
|
- // // 确保缩放级别不会变成负数或过小
|
|
|
- // scale = Math.max(0.1, Math.min(scale, 5));
|
|
|
+ // 获取当前的transform值并解析
|
|
|
+ const transform = getComputedStyle(element).transform;
|
|
|
+ let scale = 1,
|
|
|
+ rotate = 0;
|
|
|
|
|
|
- // // 应用新的缩放级别和原有的旋转角度
|
|
|
- // element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
|
|
|
- // //同步放大展示盒子
|
|
|
- // parent.style.width = `${currentWidth * scale}px`;
|
|
|
- // parent.style.height = `${currentHeight * scale}px`;
|
|
|
- // }
|
|
|
- // });
|
|
|
- // });
|
|
|
+ if (transform && transform !== "none") {
|
|
|
+ const transformMatrix = new WebKitCSSMatrix(transform);
|
|
|
+ scale = Math.sqrt(
|
|
|
+ Math.pow(transformMatrix.a, 2) + Math.pow(transformMatrix.b, 2)
|
|
|
+ );
|
|
|
+ rotate =
|
|
|
+ Math.atan2(transformMatrix.b, transformMatrix.a) * (180 / Math.PI);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据滚轮方向调整缩放级别
|
|
|
+ if (event.deltaY < 0) {
|
|
|
+ // 向上滚动,放大
|
|
|
+ scale += 0.1;
|
|
|
+ } else {
|
|
|
+ // 向下滚动,缩小
|
|
|
+ scale -= 0.1;
|
|
|
+ }
|
|
|
+ // 确保缩放级别不会变成负数或过小
|
|
|
+ scale = Math.max(0.1, Math.min(scale, 5));
|
|
|
+
|
|
|
+ // 应用新的缩放级别和原有的旋转角度
|
|
|
+ element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
|
|
|
+ //同步放大展示盒子
|
|
|
+ parent.style.width = `${currentWidth * scale}px`;
|
|
|
+ parent.style.height = `${currentHeight * scale}px`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
</script>
|
|
|
|