Feat:优化指定中心点缩放

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/core/view/View.js

@@ -190,22 +190,22 @@ class View {
   }
 
   //  缩小
-  narrow() {
+  narrow(cx = this.mindMap.width / 2, cy = this.mindMap.height / 2) {
     let scale
     if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
       scale = this.scale - this.mindMap.opt.scaleRatio
     } else {
       scale = 0.1
     }
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+    this.scaleInCenter(cx, cy, scale)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
 
   //  放大
-  enlarge() {
+  enlarge(cx = this.mindMap.width / 2, cy = this.mindMap.height / 2) {
     const scale = this.scale + this.mindMap.opt.scaleRatio
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+    this.scaleInCenter(cx, cy, scale)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
@@ -213,11 +213,11 @@ class View {
   // 基于画布中心进行缩放
   scaleInCenter(cx, cy, scale) {
     const prevScale = this.scale
-    const dx = (cx - this.x) * (1 - scale / prevScale)
+    const ratio = 1 - scale / prevScale
-    const dy = (cy - this.y) * (1 - scale / prevScale)
+    const dx = (cx - this.x) * ratio
-
+    const dy = (cy - this.y) * ratio
-    this.x += dx;
+    this.x += dx
-    this.y += dy;
+    this.y += dy
     this.scale = scale
   }
 

simple-mind-map/src/plugins/TouchEvent.js

@@ -50,16 +50,17 @@ class TouchEvent {
     } else if (len === 2) {
       let touch1 = e.touches[0]
       let touch2 = e.touches[1]
-      let distance = Math.sqrt(
+      let ox = touch1.clientX - touch2.clientX
-        Math.pow(touch1.clientX - touch2.clientX, 2) +
+      let oy = touch1.clientY - touch2.clientY
-          Math.pow(touch1.clientY - touch2.clientY, 2)
+      let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
-      )
+      let cx = (touch1.clientX + touch2.clientX) / 2
+      let cy = (touch1.clientY + touch2.clientY) / 2
       if (distance > this.doubleTouchmoveDistance) {
         // 放大
-        this.mindMap.view.enlarge()
+        this.mindMap.view.enlarge(cx, cy)
       } else {
         // 缩小
-        this.mindMap.view.narrow()
+        this.mindMap.view.narrow(cx, cy)
       }
       this.doubleTouchmoveDistance = distance
     }

web/src/pages/Edit/components/Edit.vue

@@ -32,6 +32,7 @@ import Drag from 'simple-mind-map/src/plugins/Drag.js'
 import Select from 'simple-mind-map/src/plugins/Select.js'
 import RichText from 'simple-mind-map/src/plugins/RichText.js'
 import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -67,6 +68,7 @@ MindMap
   .usePlugin(Export)
   .usePlugin(Select)
   .usePlugin(AssociativeLine)
+  // .usePlugin(TouchEvent)
 
 // 注册自定义主题
 // customThemeList.forEach((item) => {