1

src/modules/admin/ocr/OcrTest.vue

@@ -202,7 +202,6 @@ export default {
       }
     },
     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";
@@ -239,66 +238,101 @@ export default {
     dragstart(e) {
       this.$refs.centerBox.style.transition = "none";
       e.preventDefault();
-      this.dragData.x = e.pageX - this.$refs.centerBox.offsetLeft;
-      this.dragData.y = e.pageY - this.$refs.centerBox.offsetTop;
+      console.log(
+        "this.$refs.centerBox.offsetLeft",
+        this.$refs.centerBox.offsetLeft
+      );
+      this.dragData.x = e.pageX - this.$refs.centerBox.offsetLeft - 40;
+      this.dragData.y = e.pageY - this.$refs.centerBox.offsetTop - 90;
 
       // 给 document 添加鼠标移动事件
       document.addEventListener("mousemove", move);
       const _this = this;
       function move(event) {
         // 计算元素的位置
-        _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;
+        _this.dragData.left = event.pageX - _this.dragData.x - 40;
+        _this.dragData.top = event.pageY - _this.dragData.y - 90;
+        console.log("_this.dragData.left:", _this.dragData.left);
+        console.log("_this.dragData.top:", _this.dragData.top);
+        console.log(
+          " _this.$refs.centerBox.offsetLeft:",
+          _this.$refs.centerBox.offsetLeft
+        );
+        console.log(
+          "_this.$refs.centerBox.offsetTop:",
+          _this.$refs.centerBox.offsetTop
+        );
+        const isToRight =
+          _this.dragData.left > _this.$refs.centerBox.offsetLeft;
+        const isToLeft = _this.dragData.left < _this.$refs.centerBox.offsetLeft;
+        const isToTop = _this.dragData.top < _this.$refs.centerBox.offsetTop;
+        const isToBottom = _this.dragData.top > _this.$refs.centerBox.offsetTop;
+        console.log(
+          (isToRight && "向右") +
+            "," +
+            (isToLeft && "向左") +
+            "," +
+            (isToTop && "向上") +
+            "," +
+            (isToBottom && "向下")
+        );
         // 边界判断可以在这里添加 ↓
         //正向判断的判断分支太多，于是选择反向判断
         if (isToRight) {
           if (
-            _this.$refs.centerBox.offsetWidth +
-              parseFloat(_this.$refs.centerBox.style.left) >=
-            _this.maxWidth
+            !(
+              (_this.$refs.centerBox.offsetWidth <= _this.maxWidth &&
+                _this.$refs.centerBox.offsetWidth +
+                  parseFloat(_this.$refs.centerBox.style.left) >=
+                  _this.maxWidth) ||
+              (_this.$refs.centerBox.offsetWidth > _this.maxWidth &&
+                _this.dragData.left >= 0)
+            )
           ) {
-            return false;
+            _this.$refs.centerBox.style.left = _this.dragData.left + "px";
           }
-        }
-        if (isToLeft) {
+        } else if (isToLeft) {
           if (
-            parseFloat(_this.$refs.centerBox.style.left) <= 0 &&
-            (_this.$refs.centerBox.offsetWidth <= _this.maxWidth ||
-              _this.$refs.centerBox.offsetWidth +
-                parseFloat(_this.$refs.centerBox.style.left) <=
-                _this.maxWidth)
+            !(
+              (parseFloat(_this.$refs.centerBox.style.left) <= 0 &&
+                _this.$refs.centerBox.offsetWidth <= _this.maxWidth) ||
+              (parseFloat(_this.$refs.centerBox.style.left) <= 0 &&
+                _this.$refs.centerBox.offsetWidth +
+                  parseFloat(_this.$refs.centerBox.style.left) <=
+                  _this.maxWidth)
+            )
           ) {
-            return false;
+            _this.$refs.centerBox.style.left = _this.dragData.left + "px";
           }
         }
         if (isToTop) {
           if (
-            parseFloat(_this.$refs.centerBox.style.top) <= 0 &&
-            (_this.$refs.centerBox.offsetHeight <= _this.maxHeight ||
-              _this.$refs.centerBox.offsetHeight +
-                parseFloat(_this.$refs.centerBox.style.top) <=
-                _this.maxHeight)
+            !(
+              (parseFloat(_this.$refs.centerBox.style.top) <= 0 &&
+                _this.$refs.centerBox.offsetHeight <= _this.maxHeight) ||
+              (parseFloat(_this.$refs.centerBox.style.top) <= 0 &&
+                _this.$refs.centerBox.offsetHeight +
+                  parseFloat(_this.$refs.centerBox.style.top) <=
+                  _this.maxHeight)
+            )
           ) {
-            return false;
+            _this.$refs.centerBox.style.top = _this.dragData.top + "px";
           }
         }
         if (isToBottom) {
           if (
-            _this.$refs.centerBox.offsetHeight +
-              parseFloat(_this.$refs.centerBox.style.top) >=
-            _this.maxHeight
+            !(
+              (_this.$refs.centerBox.offsetHeight <= _this.maxHeight &&
+                _this.$refs.centerBox.offsetHeight +
+                  parseFloat(_this.$refs.centerBox.style.top) >=
+                  _this.maxHeight) ||
+              (_this.$refs.centerBox.offsetHeight > _this.maxHeight &&
+                _this.dragData.top >= 0)
+            )
           ) {
-            return false;
+            _this.$refs.centerBox.style.top = _this.dragData.top + "px";
           }
         }
-        _this.$refs.centerBox.style.left = _this.dragData.left + "px";
-        _this.$refs.centerBox.style.top = _this.dragData.top + "px";
       }
       // 添加鼠标抬起事件，鼠标抬起，将事件移除
       document.addEventListener("mouseup", function () {