更新拖动，辅助线

dromara · Jul 1, 2024 · 3da0725 · 3da0725
1 parent ac28f52
commit 3da0725
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 24 deletions.
diff --git a/src/app/fabricRuler.ts b/src/app/fabricRuler.ts
@@ -113,10 +113,6 @@ export class FabricRuler extends Disposable {
       }
       this.render({ ctx: this.canvas.contextContainer })
     })
-    // computed(() => {
-    //   this.options.unit = unitName
-    //   this.render({ ctx: this.canvas.contextContainer })
-    // })
 
     this.canvasEvents = {
       'after:render': this.render.bind(this),
@@ -156,35 +152,35 @@ export class FabricRuler extends Disposable {
   }
 
   private mouseMove(e: TPointerEventInfo<TPointerEvent>) {
-    if (!e.pointer) return
-    if (this.tempReferenceLine && e.absolutePointer) {
+    if (!e.viewportPoint) return
+    if (this.tempReferenceLine && e.scenePoint) {
       const pos: Partial<ReferenceLine> = {};
       if (this.tempReferenceLine.axis === 'horizontal') {
-        pos.top = e.pointer.y;
+        pos.top = e.scenePoint.y;
       } 
       else {
-        pos.left = e.pointer.x;
+        pos.left = e.scenePoint.x;
       }
       this.tempReferenceLine.set({ ...pos, visible: true });
       this.canvas.renderAll();
       const event = this.getCommonEventInfo(e) as any;
       this.canvas.fire('object:moving', event);
       this.tempReferenceLine.fire('moving', event);
     }
-    const status = this.getPointHover(e.absolutePointer)
+    const status = this.getPointHover(e.viewportPoint)
     this.canvas.defaultCursor = this.lastCursor
     if (!status) return
     this.lastCursor = this.canvas.defaultCursor
     this.canvas.defaultCursor = status === 'horizontal' ? 'ns-resize' : 'ew-resize';
   }
 
   private mouseDown(e: TPointerEventInfo<TPointerEvent>) {
-    const pointHover = this.getPointHover(e.absolutePointer)
+    const pointHover = this.getPointHover(e.viewportPoint)
     if (!pointHover) return
     if (this.activeOn === 'up') {
       this.canvas.selection = false
       this.activeOn = 'down'
-      const point = pointHover === 'horizontal' ? e.pointer.y : e.pointer.x
+      const point = pointHover === 'horizontal' ? e.viewportPoint.y : e.viewportPoint.x
       this.tempReferenceLine = new ReferenceLine(
         point,
         {
@@ -212,13 +208,13 @@ export class FabricRuler extends Disposable {
   }
 
   private getCommonEventInfo(e: TPointerEventInfo<TPointerEvent>) {
-    if (!this.tempReferenceLine || !e.absolutePointer) return;
+    if (!this.tempReferenceLine || !e.scenePoint) return;
     return {
       e: e.e,
       transform: this.tempReferenceLine.get('transform'),
       pointer: {
-        x: e.absolutePointer.x,
-        y: e.absolutePointer.y,
+        x: e.scenePoint.x,
+        y: e.scenePoint.y,
       },
       target: this.tempReferenceLine,
     };

diff --git a/src/app/fabricTool.ts b/src/app/fabricTool.ts
@@ -1,12 +1,11 @@
-import { Point, Canvas, Object as FabricObject } from 'fabric'
+import { Point, Canvas } from 'fabric'
 import { watch, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Disposable } from '@/utils/lifecycle'
 import useCanvasSwipe from '@/hooks/useCanvasSwipe'
 import { useKeyboardStore } from '@/store'
 import { useActiveElement, toValue } from '@vueuse/core'
 
-
 type ToolOption = {
   defaultCursor: string
   skipTargetFind: boolean
@@ -185,14 +184,13 @@ export class FabricTool extends Disposable {
     let vpt = canvas.viewportTransform
     const { spaceKeyState } = storeToRefs(useKeyboardStore())
     const { lengthX, lengthY, isSwiping } = useCanvasSwipe({
-      onSwipeStart: (e) => {
-
-        if (e.button === 2 || (spaceKeyState.value && e.button === 1)) {
+      onSwipeStart: (e: any) => {
+        if (e.e.buttons === 2 || (spaceKeyState.value && e.e.buttons === 1)) {
           isSwiping.value = true
           vpt = canvas.viewportTransform
           this.handMoveActivate = true
-          // this.applyOption('handMove')
-          // canvas.setCursor('grab')
+          this.applyOption('handMove')
+          canvas.setCursor('grab')
         }
       },
       onSwipe: () => {

diff --git a/src/hooks/useCanvasSwipe.ts b/src/hooks/useCanvasSwipe.ts
@@ -47,14 +47,14 @@ export default(options: UseSwipeOptions = {}) => {
   const mouseDown = (e: TPointerEventInfo<TPointerEvent>) => {
     if (e.e instanceof TouchEvent && e.e.touches.length !== 1) return
     isPointerDown.value = true
-    updateCoordsStart(e.absolutePointer)
-    updateCoordsEnd(e.absolutePointer)
+    updateCoordsStart(e.viewportPoint)
+    updateCoordsEnd(e.viewportPoint)
     onSwipeStart?.(e)
   }
   const mouseMove = (e: TPointerEventInfo<TPointerEvent>) => {
     if (!isPointerDown.value) return
     if (e.e instanceof TouchEvent && e.e.touches.length !== 1) return
-    updateCoordsEnd(e.absolutePointer)
+    updateCoordsEnd(e.viewportPoint)
     isSwiping.value = true
     onSwipe?.(e)
   }