更新移动端移动缩放画布

package.json

@@ -32,6 +32,7 @@
     "element-plus": "^2.2.28",
     "fabric": "^6.0.0-beta12",
     "file-saver": "^2.0.5",
+    "hammerjs": "^2.0.8",
     "html-to-image": "^1.11.11",
     "js-base64": "^3.7.5",
     "jsbarcode": "^3.11.5",
@@ -57,6 +58,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/delaunator": "^5.0.0",
     "@types/file-saver": "^2.0.5",
+    "@types/hammerjs": "^2.0.45",
     "@types/lodash": "^4.14.194",
     "@types/mousetrap": "^1.6.12",
     "@types/opentype.js": "^1.3.6",

src/views/Canvas/useCanvas.ts

@@ -15,6 +15,7 @@ import { Keybinding } from '@/app/keybinding'
 import { defaultControls, textboxControls } from '@/app/fabricControls'
 import { useTemplatesStore } from '@/store'
 import useCommon from './useCommon'
+import useHammer from './useHammer'
 
 
 
@@ -115,10 +116,12 @@ const initTemplate = async () => {
   if (!canvas) return
   const templatesStore = useTemplatesStore()
   const { initCommon } = useCommon()
+  const { initHammer } = useHammer()
   const { currentTemplate } = storeToRefs(templatesStore)
   await canvas.loadFromJSON(currentTemplate.value)
   setCanvasTransform()
   initCommon()
+  initHammer()
 }
 
 export const initEditor = async () => {

src/views/Canvas/useHammer.ts

@@ -0,0 +1,38 @@
+import Hammer from 'hammerjs'
+import useCanvas from './useCanvas'
+import { Point } from 'fabric'
+import { storeToRefs } from 'pinia'
+import { useFabricStore } from '@/store/modules/fabric'
+
+export default () => {
+
+  const initHammer = () => {
+    const [ canvas ] = useCanvas()
+    const fabricStore = useFabricStore()
+    const { zoom } = storeToRefs(fabricStore)
+    const hammer = new Hammer(canvas.lowerCanvasEl);
+    hammer.get('pinch').set({ enable: true });
+    hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+    hammer.on('pinch pan', function(ev) {
+      // 缩放
+      if (ev.type == 'pinch') {
+          // var zoom = canvas.getZoom();
+          var zoomRatio = ev.scale / zoom.value
+          zoom.value *= zoomRatio;
+          if (zoom.value > 5) zoom.value = 5;
+          if (zoom.value < 0.05) zoom.value = 0.05;
+          canvas.zoomToPoint(new Point(ev.center.x, ev.center.y), zoom.value);
+          zoom.value = ev.scale;
+      }
+      // 移动
+      else if (ev.type == 'pan') {
+        var delta = new Point(ev.deltaX, ev.deltaY);
+        canvas.relativePan(delta);
+      }
+    });
+  }
+
+  return {
+    initHammer
+  }
+}