拼图游戏 可drop区域计算时考虑画框粗细

src/views/JigsawGame.vue

@@ -82,6 +82,7 @@ export default {
       topForDrop: 0,
       widthForDrop: 0,
       heightForDrop: 0,
+      imgFrameThicknessWhenDesign: '15',
     }
   },
   computed: {
@@ -122,7 +123,7 @@ export default {
     onDragStart(e, jigsawImgName, idx) {
       // 不知道为啥，在svg内部元素上无法触发drop事件，求助gpt也没用。只好用一个透明方块放在需要能drop的svg内部元素上面。
 
-      // reset for drop
+      // reset div for drop
       this.leftForDrop = 0
       this.topForDrop = 0
       this.widthForDrop = 0
@@ -176,6 +177,15 @@ export default {
       }
       console.log("image's original top left: ", imageLeftOriginal, imageTopOriginal)
 
+      // 计算画框粗细
+      let imageFrameThicknessActual = 0
+      if (this.unit === '100vh') {
+        imageFrameThicknessActual = Number(this.imgFrameThicknessWhenDesign) / 1080 * window.innerHeight
+      } else {
+        imageFrameThicknessActual = Number(this.imgFrameThicknessWhenDesign) / 1920 * window.innerWidth
+      }
+      console.log("image frame's actual thickness: ", imageFrameThicknessActual)
+
       // compute image's actual left top
       const topLeft = utils.mapPosFromDraftToWindow({
         x: imageLeftOriginal,
@@ -189,8 +199,8 @@ export default {
       }, 'cover', svgWidth, svgHeight, this.$refs.svgContainer.clientWidth, this.$refs.svgContainer.clientHeight)
       console.log("image's actual right top: ", rightBottom.x, rightBottom.y)
 
-      this.leftForDrop = topLeft.x
-      this.topForDrop = topLeft.y
+      this.leftForDrop = topLeft.x + imageFrameThicknessActual
+      this.topForDrop = topLeft.y + imageFrameThicknessActual
       this.widthForDrop = rightBottom.x - topLeft.x
       this.heightForDrop = rightBottom.y - topLeft.y
       console.log("image's actual ltwh for render: ", this.leftForDrop, this.topForDrop, this.widthForDrop, this.heightForDrop)
@@ -255,7 +265,7 @@ export default {
     background-repeat: no-repeat;
     background-position: center center;
     margin-right: calc(83 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    padding: calc(15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    padding: calc(v-bind('imgFrameThicknessWhenDesign') / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     position: relative;
     >.object-wrapper {
       width: 100%;