1

src/modules/admin/ocr/OcrTest.vue

@@ -141,7 +141,7 @@ export default {
       maxWidth: 0,
       maxHeight: 0,
       initImgStyle: {},
-      initTransform: "translate(-50%, -50%)",
+      baseSize: {},
     };
   },
   computed: {
@@ -164,39 +164,58 @@ export default {
         //高度撑满
         if (this.maxHeight < naturalHeight) {
           this.initImgStyle = {
-            maxWidth: this.maxWidth + "px",
+            width: this.maxWidth + "px",
           };
-          this.$refs.centerBox.style.transform = `translate(-50%, 0%) scale(1)`;
-          this.$refs.centerBox.style.top = `0`;
-          this.$refs.centerBox.style.left = `50%`;
-          this.initTransform = `translate(-50%, 0%)`;
+          this.baseSize = { w: this.maxWidth, h: this.maxWidth / imgRatio };
+          this.$refs.centerBox.style.left = 0;
+          this.$refs.centerBox.style.top = 0;
         } else {
-          this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(1)`;
-          this.$refs.centerBox.style.top = `50%`;
-          this.$refs.centerBox.style.left = `50%`;
-          this.initTransform = `translate(-50%, -50%)`;
+          this.$refs.centerBox.style.left =
+            (this.maxWidth - naturalWidth) / 2 + "px";
+          this.$refs.centerBox.style.top =
+            (this.maxHeight - naturalHeight) / 2 + "px";
+
+          this.initImgStyle = {
+            width: naturalWidth + "px",
+          };
+          this.baseSize = { w: naturalWidth, h: naturalHeight };
         }
       } else {
         //宽度撑满
         if (this.maxWidth < naturalWidth) {
           this.initImgStyle = {
-            maxHeight: this.maxHeight + "px",
+            height: this.maxHeight + "px",
           };
-          this.$refs.centerBox.style.transform = `translate(0, -50%) scale(1)`;
-          this.$refs.centerBox.style.top = `50%`;
-          this.$refs.centerBox.style.left = `0`;
-          this.initTransform = `translate(0, -50%)`;
+          this.baseSize = { h: this.maxHeight, w: this.maxHeight * imgRatio };
+          this.$refs.centerBox.style.left = 0;
+          this.$refs.centerBox.style.top = 0;
         } else {
-          this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(1)`;
-          this.$refs.centerBox.style.top = `50%`;
-          this.$refs.centerBox.style.left = `50%`;
-          this.initTransform = `translate(-50%, -50%)`;
+          this.$refs.centerBox.style.left =
+            (this.maxWidth - naturalWidth) / 2 + "px";
+          this.$refs.centerBox.style.top =
+            (this.maxHeight - naturalHeight) / 2 + "px";
+          this.initImgStyle = {
+            height: naturalHeight + "px",
+          };
+          this.baseSize = { w: naturalWidth, h: naturalHeight };
         }
       }
     },
-    scaleDom() {
-      this.$refs.centerBox.style.transform =
-        this.initTransform + ` scale(${this.scale})`;
+    scaleDom(offset) {
+      console.log(offset * this.baseSize.w);
+      // this.$refs.centerBox.style.transform =
+      //   this.initTransform + ` scale(${this.scale})`;
+      this.initImgStyle.width = this.baseSize.w * this.scale + "px";
+      this.initImgStyle.height = this.baseSize.h * this.scale + "px";
+
+      this.$refs.centerBox.style.left =
+        parseFloat(this.$refs.centerBox.style.left) +
+        offset * this.baseSize.w +
+        "px";
+      this.$refs.centerBox.style.top =
+        parseFloat(this.$refs.centerBox.style.top) +
+        offset * this.baseSize.h +
+        "px";
     },
     scaleHandle(e, isBtn) {
       let dy = isBtn ? e : -e.deltaY || e.wheelDeltaY;
@@ -213,8 +232,8 @@ export default {
         this.scale = this.scaleMin;
         return;
       }
-      this.$refs.centerBox.style.transition = `all 0.3s ease-in-out`;
-      this.scaleDom();
+      // this.$refs.centerBox.style.transition = `all 0.3s ease-in-out`;
+      this.scaleDom(dy < 0 ? 0.1 : -0.1);
       return false;
     },
     dragstart(e) {
@@ -230,11 +249,89 @@ export default {
         // 计算元素的位置
         _this.dragData.left = event.pageX - _this.dragData.x;
         _this.dragData.top = event.pageY - _this.dragData.y;
+        console.log("_this.dragData.left", _this.dragData.left);
+        console.log("_this.dragData.top", _this.dragData.top);
+        const isToRight = _this.dragData.left > 0;
+        const isToLeft = _this.dragData.left < 0;
+        const isToTop = _this.dragData.top < 0;
+        const isToBottom = _this.dragData.top > 0;
         // 边界判断可以在这里添加 ↓
+        if (isToRight) {
+          if (
+            parseFloat(_this.$refs.centerBox.style.left) < 0 ||
+            parseFloat(_this.$refs.centerBox.style.left) +
+              _this.$refs.centerBox.offsetWidth +
+              _this.dragData.left <
+              this.$refs.dragOuter.offsetWidth - 40
+          ) {
+            _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+          }
+        }
+
+        if (isToLeft) {
+          //todo
+        }
 
         // 设置元素的位置
-        _this.$refs.centerBox.style.left = _this.dragData.left + "px";
-        _this.$refs.centerBox.style.top = _this.dragData.top + "px";
+
+        // if (
+        //   _this.$refs.centerBox.clientWidth >
+        //   _this.$refs.dragOuter.offsetWidth - 40
+        // ) {
+        //   if (
+        //     (_this.dragData.left <= 0 &&
+        //       _this.$refs.centerBox.clientWidth + _this.dragData.left >=
+        //         _this.$refs.dragOuter.offsetWidth - 40) ||
+        //     (parseFloat(_this.$refs.centerBox.style.left) < 0 &&
+        //       _this.dragData.left >
+        //         parseFloat(_this.$refs.centerBox.style.left)) ||
+        //     (_this.dragData.left >= 0 &&
+        //       _this.dragData.left <
+        //         parseFloat(_this.$refs.centerBox.style.left))
+        //   ) {
+        //     _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+        //   }
+        // } else {
+        //   if (
+        //     _this.$refs.centerBox.clientWidth + _this.dragData.left <=
+        //       _this.$refs.dragOuter.offsetWidth - 40 &&
+        //     (_this.dragData.left >= 0 ||
+        //       (parseFloat(_this.$refs.centerBox.style.left) < 0 &&
+        //         _this.dragData.left >
+        //           parseFloat(_this.$refs.centerBox.style.left)))
+        //   ) {
+        //     _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+        //   }
+        // }
+
+        // if (
+        //   _this.$refs.centerBox.clientHeight >
+        //   _this.$refs.dragOuter.offsetHeight - 40
+        // ) {
+        //   if (
+        //     (_this.dragData.top <= 0 &&
+        //       _this.$refs.centerBox.clientHeight + _this.dragData.top >=
+        //         _this.$refs.dragOuter.offsetHeight - 40) ||
+        //     (parseFloat(_this.$refs.centerBox.style.top) < 0 &&
+        //       _this.dragData.top >
+        //         parseFloat(_this.$refs.centerBox.style.top)) ||
+        //     (_this.dragData.top >= 0 &&
+        //       _this.dragData.top < parseFloat(_this.$refs.centerBox.style.top))
+        //   ) {
+        //     _this.$refs.centerBox.style.top = _this.dragData.top + "px";
+        //   }
+        // } else {
+        //   if (
+        //     _this.$refs.centerBox.clientHeight + _this.dragData.top <=
+        //       _this.$refs.dragOuter.offsetHeight - 40 &&
+        //     (_this.dragData.top >= 0 ||
+        //       (parseFloat(_this.$refs.centerBox.style.top) < 0 &&
+        //         _this.dragData.top >
+        //           parseFloat(_this.$refs.centerBox.style.top)))
+        //   ) {
+        //     _this.$refs.centerBox.style.top = _this.dragData.top + "px";
+        //   }
+        // }
       }
       // 添加鼠标抬起事件，鼠标抬起，将事件移除
       document.addEventListener("mouseup", function () {
@@ -426,12 +523,10 @@ export default {
             user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
             position: absolute;
             cursor: move;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
             & > img {
               // max-width: none;
               // max-height: none;
+              transition: none;
             }
           }
         }