webPDF展示缩放旋转

src/components/PDFView/index.vue

@@ -105,13 +105,9 @@ const rendered = () => {
     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`;
-      }
+      distance = currentHeight - currentWidth;
       rotationAngle = (rotationAngle + 90) % 360;
       if (rotationAngle == 0) {
         if (distance > 0) {
@@ -128,7 +124,7 @@ const rendered = () => {
           element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
         } else {
           element.style.transform = `rotate(${rotationAngle}deg)`;
-          element.firstElementChild.style.transform = `translateY(0px) `;
+          element.firstElementChild.style.transform = `translateX(${-distance / 2}px)`;
         }
       }
       if (rotationAngle === 180) {
@@ -146,8 +142,49 @@ const rendered = () => {
           element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
         } else {
           element.style.transform = `rotate(${rotationAngle}deg) `;
-          element.firstElementChild.style.transform = `translateY(0px) `;
+          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();
+
+        // 获取当前的transform值并解析
+        const transform = getComputedStyle(element).transform;
+        let scale = 1,
+          rotate = 0;
+
+        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`;
       }
     });
   });

src/components/PDFViewFull/index.vue

@@ -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>