加入根据缩放比例调整编辑把手大小

src/App.vue

@@ -1,9 +1,14 @@
 <template>
   <div id="app">
-    <div style="height: 800px; width: 1200px; border: 1px solid red; position: relative;margin: 0 auto">
+	  <div style="margin: 0 auto;width:400px;display: flex;justify-content: space-between">
+		  <input v-model="scale.current" type="range" min="0.2" max="2" step="0.1" style="width: 320px">
+		  <span style="margin-left: 20px">{{scale.current*100}}%</span>
+	  </div>
+    <div :style="{transform: `scale(${scale.current})`}" style="height: 700px; width: 1200px; border: 1px solid red; position: relative;margin: 0 auto">
       <vue-draggable-resizable
         :w="200"
         :h="200"
+        :scaleRatio="scale.current"
         :parent="true"
         :debug="false"
         :min-width="200"
@@ -17,6 +22,7 @@
       <vue-draggable-resizable
         :w="200"
         :h="200"
+        :scaleRatio="scale.current"
         :parent="true"
         :x="210"
         :debug="false"
@@ -31,6 +37,7 @@
       <vue-draggable-resizable
         :w="200"
         :h="200"
+        :scaleRatio="scale.current"
         :parent="true"
         :x="420"
         :debug="false"
@@ -68,6 +75,12 @@
     },
     data () {
       return {
+        scale: {
+          current: 0.6,
+          min: 0.2,
+          max: 2,
+          step: .2
+        },
         vLine: [],
         hLine: []
       }
@@ -78,7 +91,20 @@
         const { vLine, hLine } = params
         this.vLine = vLine
         this.hLine = hLine
+      },
+      handleWheelEvent(e) {
+        if (e.wheelDeltaY > 0 && this.scale.current + this.scale.step < this.scale.max) {
+          this.scale.current += this.scale.step
+        } else if (e.wheelDeltaY < 0 && this.scale.current - this.scale.step > this.scale.min) {
+          this.scale.current -= this.scale.step
+        }
       }
+    },
+	mounted() {
+	  document.addEventListener("wheel", this.handleWheelEvent, false)
+	},
+    beforeDestroy() {
+      document.removeEventListener("wheel", this.handleWheelEvent, false)
     }
   }
 </script>

src/components/vue-draggable-resizable.css

@@ -14,47 +14,47 @@
   box-shadow: 0 0 2px #bbb;
 }
 .handle-tl {
-  top: -5px;
-  left: -5px;
+  /*top: -5px;*/
+  /*left: -5px;*/
   cursor: nw-resize;
 }
 .handle-tm {
-  top: -5px;
+  /*top: -5px;*/
   left: 50%;
-  margin-left: -5px;
+  /*margin-left: -5px;*/
   cursor: n-resize;
 }
 .handle-tr {
-  top: -5px;
-  right: -5px;
+  /*top: -5px;*/
+  /*right: -5px;*/
   cursor: ne-resize;
 }
 .handle-ml {
   top: 50%;
-  margin-top: -5px;
-  left: -5px;
+  /*margin-top: -5px;*/
+  /*left: -5px;*/
   cursor: w-resize;
 }
 .handle-mr {
   top: 50%;
-  margin-top: -5px;
-  right: -5px;
+  /*margin-top: -5px;*/
+  /*right: -5px;*/
   cursor: e-resize;
 }
 .handle-bl {
-  bottom: -5px;
-  left: -5px;
+  /*bottom: -5px;*/
+  /*left: -5px;*/
   cursor: sw-resize;
 }
 .handle-bm {
-  bottom: -5px;
+  /*bottom: -5px;*/
   left: 50%;
-  margin-left: -5px;
+  /*margin-left: -5px;*/
   cursor: s-resize;
 }
 .handle-br {
-  bottom: -5px;
-  right: -5px;
+  /*bottom: -5px;*/
+  /*right: -5px;*/
   cursor: se-resize;
 }
 /*旋转handle*/

src/components/vue-draggable-resizable.vue

@@ -15,7 +15,7 @@
       v-for="handle in actualHandles"
       :key="handle"
       :class="[classNameHandle, classNameHandle + '-' + handle]"
-      :style="{display: enabled ? 'block' : 'none'}"
+      :style="handleStyle(handle)"
       @mousedown.stop.prevent="handleDown(handle, $event)"
       @touchstart.stop.prevent="handleTouchDown(handle, $event)"
     >
@@ -28,6 +28,7 @@
 <script>
 import { matchesSelectorToParentElements, addEvent, removeEvent } from '../utils/dom'
 
+const stickSize = 8;
 const events = {
   mouse: {
     start: 'mousedown',
@@ -885,6 +886,32 @@ export default {
     }
   },
   computed: {
+    // 计算把手的新位置
+    handleStyle(){
+      console.log(`handleStyle...`)
+      return (stick)=>{
+        const styleMapping = {
+          y: {
+            t: 'top',
+            m: 'marginTop',
+            b: 'bottom',
+          },
+          x: {
+            l: 'left',
+            m: 'marginLeft',
+            r: 'right',
+          }
+        }
+        const stickStyle = {
+          width: `${stickSize / this.scaleRatio}px`,
+          height: `${stickSize / this.scaleRatio}px`,
+        };
+        stickStyle[styleMapping.y[stick[0]]] = `${stickSize / this.scaleRatio / -2}px`;
+        stickStyle[styleMapping.x[stick[1]]] = `${stickSize / this.scaleRatio / -2}px`;
+        stickStyle.display = this.enabled ? 'block': 'none'
+        return stickStyle;
+      }
+    },
     style () {
       return {
         position: 'absolute',