更新辅助线

src/app/fabricRuler.ts

@@ -4,10 +4,11 @@ import { computed, watchEffect } from 'vue'
 // import { useThemes } from '@/hooks/useThemes'
 import { DesignUnitMode } from '@/configs/background'
 import { PiBy180 } from '@/utils/common'
-import { TAxis, Canvas, Point, Rect as fabricRect } from 'fabric'
+import { TAxis, Canvas, Point, Rect as fabricRect, util, classRegistry } from 'fabric'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import { px2mm } from '@/utils/image'
+import { ElementNames } from '@/types/elements'
 
 type Rect = { left: number; top: number; width: number; height: number }
 
@@ -123,27 +124,29 @@ export class FabricRuler extends Disposable {
     this.canvasEvents = {
       'after:render': this.render.bind(this),
       'mouse:move': this.mouseMove.bind(this),
+      'mouse:down': this.mouseDown.bind(this),
     }
     this.enabled = this.options.enabled
   }
 
-  public getPointStatus(point: Point): string {
-
+  public getPointHover(point: Point): string {
     if (
       new fabricRect({
         left: 0,
         top: 0,
         width: this.options.ruleSize,
-        height: this.canvas.getHeight(),
+        height: this.canvas.height,
+        absolutePositioned: true,
       }).containsPoint(point)
     ) {
       return 'vertical';
     } else if (
       new fabricRect({
         left: 0,
         top: 0,
-        width: this.canvas.getHeight(), 
-        height: this.options.ruleSize
+        width: this.canvas.width, 
+        height: this.options.ruleSize,
+        absolutePositioned: true,
       }).containsPoint(point)
     ) {
       return 'horizontal';
@@ -152,8 +155,36 @@ export class FabricRuler extends Disposable {
   }
 
   private mouseMove(e: any) {
-    const status = this.getPointStatus(e.pointer)
+    const status = this.getPointHover(e.absolutePointer)
     if (!status) return
+    // this.canvas.defaultCursor = status === 'horizontal' ? 'ns-resize' : 'ew-resize';
+  }
+
+  private mouseDown(e: any) {
+    const pointHover = this.getPointHover(e.absolutePointer)
+    if (!pointHover) return
+    this.canvas.selection = false
+    // this.canvas.renderAll()
+    const GuideLine = classRegistry.getClass('GuideLine')
+    const guideLine = new GuideLine(
+      pointHover === 'horizontal' ? e.absolutePointer.y : e.absolutePointer.x,
+      {
+        axis: pointHover,
+        // visible: ,
+        name: 'GuideLine',
+        // selectable: false,
+        hasControls: false,
+        hasBorders: false,
+        stroke: 'pink',
+        fill: 'pink',
+        originX: 'center',
+        originY: 'center',
+        padding: 4, // 填充，让辅助线选择范围更大，方便选中
+        globalCompositeOperation: 'difference',
+      }
+    );
+    // this.canvas.add(guideLine)
+    // this.canvas.setActiveObject(guideLine)
   }
 
   public get enabled() {
@@ -425,6 +456,11 @@ export class FabricRuler extends Disposable {
       this.objectRect = undefined
       return
     }
+    console.log('activeObjects[0].type:', activeObjects[0].type)
+    if (activeObjects[0].name.toLowerCase() === ElementNames.GUIDELINE) {
+      this.objectRect = undefined
+      return
+    }
     const allRect = activeObjects.reduce((rects, obj) => {
       const rect: HighlightRect = obj.getBoundingRect(true)
       rects.push(rect)

src/app/wheelScroll.ts

@@ -39,7 +39,7 @@ export class WheelScroll extends Disposable {
         }
         zoom.value = zoomVal
         this.canvas.zoomToPoint(new Point(offsetX, offsetY), zoomVal)
-        // this.setCoords()
+        this.setCoords()
         return
       }
 
@@ -51,7 +51,7 @@ export class WheelScroll extends Disposable {
         deltaPoint.y = deltaY > 0 ? -20 : 20
       }
       this.canvas.relativePan(deltaPoint)
-      // this.setCoords()
+      this.setCoords()
     }
 
     this.canvas.on('mouse:wheel', mouseWheel)

src/components/FileUpload/index.vue

@@ -26,15 +26,17 @@ import { useTemplatesStore } from '@/store'
 import { loadSVGFromString } from 'fabric'
 import useCanvasScale from '@/hooks/useCanvasScale'
 import useHandleCreate from '@/hooks/useHandleCreate'
+import useHandleTemplate from '@/hooks/useHandleTemplate'
 import useCanvas from '@/views/Canvas/useCanvas'
 
 
 const templatesStore = useTemplatesStore()
 const { setCanvasTransform } = useCanvasScale()
 const { createImageElement } = useHandleCreate()
+const { addTemplate } = useHandleTemplate()
 const dialogVisible = ref(false)
 const uploading = ref(false)
-const fileAccept = ref('.pdf,.psd,.cdr,.svg,.jpg,.jpeg,.png,.webp')
+const fileAccept = ref('.pdf,.psd,.cdr,.svg,.jpg,.jpeg,.png,.webp,.json')
 const uploadRef = ref<UploadInstance>()
 const props = defineProps({
   visible: {
@@ -67,6 +69,12 @@ const uploadHandle = async (option: any) => {
     canvas.renderAll()
     emit('close')
   }
+  if (fileSuffix === 'json') {
+    const dataText = await getImageText(option.file)
+    const template = JSON.parse(dataText)
+    addTemplate(template)
+    emit('close')
+  }
   if (['jpg', 'jpeg', 'png', 'webp'].includes(fileSuffix)) {
     const dataURL = await getImageDataURL(option.file)
     createImageElement(dataURL)

src/configs/canvas.ts

@@ -65,6 +65,7 @@ export const propertiesToInclude = [
   'isShow',
   'isCheck',
   'color', 
+  'axis',
   'cropKey', 
   'cropPath', 
   'cropSize', 

src/extension/index.ts

@@ -2,4 +2,5 @@ import './object/Image'
 import './object/Group'
 import './object/Polygon'
 import './object/BarCode'
-import './object/QRCode'
+import './object/QRCode'
+import './object/GuideLine'

src/extension/object/GuideLine.ts

@@ -0,0 +1,79 @@
+import { Object as FabricObject, Line, classRegistry, TProps } from "fabric"
+import { GuideLineProps } from "@/types/canvas"
+
+export class GuideLine extends Line {
+
+  // public type = 'guideline'
+
+  constructor(point: number, options: GuideLineProps) {
+    // 设置新的点
+    // point += 100
+    const size = 500
+    const points = options.axis === 'horizontal' ? [-size, point, size, point] : [point, -size, point, size];
+    const isHorizontal = options.axis === 'horizontal';
+    options[isHorizontal ? 'lockMovementX' : 'lockMovementY'] = true;
+    // options.type = 'guideline'
+    super(points as [number, number, number, number], options)
+    // this.init(point, options)
+    // console.log('init:', 'init')
+    this.type = 'guideline'
+    this.hoverCursor = isHorizontal ? 'ns-resize' : 'ew-resize';
+  }
+
+  public init(points: number, options: GuideLineProps) {
+
+    // 指针
+
+
+    // // 锁定移动
+    // options[isHorizontal ? 'lockMovementX' : 'lockMovementY'] = true;
+    // 调用父类初始化
+    // this.init(newPoints, options);
+
+    // 绑定事件
+    this.on('mousedown:before', (e) => {
+      if (this.activeOn === 'down') {
+        // 设置selectable:false后激活对象才能进行移动
+        this.canvas?.setActiveObject(this, e.e);
+      }
+    });
+
+    this.on('moving', (e) => {
+      // if (this.isPointOnRuler(e.e)) {
+      //   this.moveCursor = 'not-allowed';
+      // } else {
+      //   this.moveCursor = this.isHorizontal() ? 'ns-resize' : 'ew-resize';
+      // }
+      // this.canvas?.fire('guideline:moving', {
+      //   target: this,
+      //   e: e.e,
+      // });
+    });
+
+    this.on('mouseup', (e) => {
+      // // 移动到标尺上，移除辅助线
+      // if (this.isPointOnRuler(e.e)) {
+      //   // console.log('移除辅助线', this);
+      //   this.canvas?.remove(this);
+      //   return;
+      // }
+      // this.moveCursor = this.isHorizontal() ? 'ns-resize' : 'ew-resize';
+      // this.canvas?.fire('guideline:mouseup', {
+      //   target: this,
+      //   e: e.e,
+      // });
+    });
+
+    // this.on('removed', () => {
+    //   this.off('mousedown:before')
+    //   this.off('removed');
+    //   this.off('mousedown:before');
+    //   this.off('moving');
+    //   this.off('mouseup');
+    // });
+  }
+}
+
+classRegistry.setClass(GuideLine, 'GuideLine')
+
+

src/hooks/useHandleTemplate.ts

@@ -103,6 +103,12 @@ export default () => {
     templatesStore.renderTemplate()
   }
 
+  const addTemplate = (template: Template) => {
+    templatesStore.addTemplate(template)
+    templatesStore.setTemplateIndex(templateIndex.value)
+    templatesStore.renderTemplate()
+  }
+
   // // 根据模板创建新页面
   // const createSlideByTemplate = (slides: Slide[]) => {
   //   for (let i = 0; i < slides.length; i++) {
@@ -174,7 +180,7 @@ export default () => {
     // copyAndPasteSlide,
     deleteTemplate,
     cutTemplate,
-    // selectAllSlide,
+    addTemplate,
     sortTemplates,
   }
 }

src/types/canvas.ts

@@ -132,6 +132,11 @@ export interface QRCodeProps extends ImageProps {
   codeOption: QRCodeOption
 }
 
+export interface GuideLineProps extends Line {
+  type: string
+  axis: 'horizontal' | 'vertical' | ''
+}
+
 export interface ImageElement extends SerializedImageProps, CommenElement {
   type: string
   isCropping?: boolean

src/types/elements.ts

@@ -17,7 +17,8 @@ export const enum ElementNames {
   BARCODE = 'barcode',
   GROUP = 'group',
   ACTIVE = 'activeselection',
-  CIRCLE = 'circle'
+  CIRCLE = 'circle',
+  GUIDELINE = 'guideline',
 }
 
 export interface ColorStop {