更新

src/app/fabricGuide.ts

@@ -64,7 +64,9 @@ export class FabricGuide extends Disposable {
 
   private objectMoving({ target }: any) {
     this.clearStretLine()
-
+    if (check.isCircle(target)) {
+      return false
+    }
     const transform = this.canvas._currentTransform
     if (!transform) return
 

src/extension/index.ts

@@ -13,4 +13,4 @@ import './object/Textbox'
 import './object/IText'
 import './object/VerticalText'
 import './object/GifImage'
-// import './object/Path'
+import './object/Circle'

src/extension/object/Circle.ts

@@ -0,0 +1,132 @@
+import { Path, classRegistry, Circle as OriginCircle, CircleProps } from "fabric";
+
+export class Circle extends OriginCircle {
+
+  public line1?: Path
+  public line2?: Path
+  public line3?: Path
+
+  constructor(options: Partial<CircleProps> = {}) {
+    super(options)
+    this.initEvent()
+  }
+
+  initEvent() {
+    this.on('selected', this.onObjectSelected.bind(this))
+    this.on('moving', this.onObjectMoving.bind(this))
+    this.on('deselected', this.onSelectionCleared.bind(this))
+  }
+
+  onObjectSelected(e: any) {
+    const activeObject = e.target;
+
+    if (activeObject.name === "p0" || activeObject.name === "p2") {
+      activeObject.line2.animate('opacity', '1', {
+        duration: 200,
+        onChange: this.canvas?.renderAll.bind(this.canvas),
+      });
+      activeObject.line2.selectable = true;
+    }
+  }
+
+  onObjectMoving(e: any) {
+    const p = e.target;
+    if (!p) return
+    console.log('p:', p, p.name)
+    if (p.name === "p0" || p.name === "p2") {
+      console.log('p:', p.name)
+      if (p.line1) {
+        p.line1.path[0][1] = p.left;
+        p.line1.path[0][2] = p.top;
+        console.log('line1:', p.line1)
+      }
+      else if (p.line3) {
+        p.line3.path[1][3] = p.left;
+        p.line3.path[1][4] = p.top;
+        console.log('line3:', p.line3)
+      }
+    }
+    else if (p.name === "p1") {
+      if (p.line2) {
+        p.line2.path[1][1] = p.left;
+        p.line2.path[1][2] = p.top;
+        console.log('line2:', p.line2)
+      }
+    }
+    else if (p.name === "p0" || p.name === "p2") {
+      p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
+      p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
+      p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
+      p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
+    }
+  }
+
+  onSelectionCleared(e: any) {
+    var activeObject = e.target;
+    if (activeObject.name === "p0" || activeObject.name === "p2") {
+      activeObject.line2.animate('opacity', '0', {
+        duration: 200,
+        onChange: this.canvas?.renderAll.bind(this.canvas),
+      });
+      activeObject.line2.selectable = false;
+    }
+    else if (activeObject.name === "p1") {
+      activeObject.animate('opacity', '0', {
+        duration: 200,
+        onChange: this.canvas?.renderAll.bind(this.canvas),
+      });
+      activeObject.selectable = false;
+    }
+  }
+
+  destroyed() {
+    this.off('selected', this.onObjectSelected.bind(this))
+    this.off('moving', this.onObjectMoving.bind(this))
+    this.off('deselected', this.onSelectionCleared.bind(this))
+  }
+}
+
+export const makeCurveCircle = (left: number, top: number, line1?: any, line2?: any, line3?: any): Circle => {
+  const c = new Circle({
+    left: left,
+    top: top,
+    strokeWidth: 5,
+    radius: 12,
+    fill: '#fff',
+    stroke: '#666',
+    originX: 'center',
+    originY: 'center'
+  });
+
+  c.hasBorders = c.hasControls = false;
+
+  c.line1 = line1;
+  c.line2 = line2;
+  c.line3 = line3;
+
+  return c;
+}
+
+export const makeCurvePoint = (left: number, top: number, line1?: any, line2?: any, line3?: any): Circle => {
+  var c = new Circle({
+    left: left,
+    top: top,
+    strokeWidth: 8,
+    radius: 14,
+    fill: '#fff',
+    stroke: '#666',
+    originX: 'center',
+    originY: 'center'
+  });
+
+  c.hasBorders = c.hasControls = false;
+
+  c.line1 = line1;
+  c.line2 = line2;
+  c.line3 = line3;
+
+  return c;
+}
+
+
+classRegistry.setClass(Circle)

src/hooks/useHandleCreate.ts

@@ -13,6 +13,8 @@ import { Image } from "@/extension/object/Image";
 import { QRCode } from "@/extension/object/QRCode";
 import { BarCode } from "@/extension/object/BarCode";
 import { ArcText } from '@/extension/object/ArcText';
+import { Polyline } from '@/extension/object/Polyline';
+import { Circle, makeCurveCircle, makeCurvePoint } from '@/extension/object/Circle';
 import { VerticalText } from '@/extension/object/VerticalText'
 import { Table } from "@/extension/object/Table"
 import JsBarcode from "jsbarcode";
@@ -31,8 +33,8 @@ export default () => {
   const { rightState, systemFonts } = storeToRefs(mainStore);
 
   const renderCanvas = (element: FabricObject) => {
-    const [canvas] = useCanvas();
-	canvas.viewportCenterObject(element); 
+    const [ canvas ] = useCanvas();
+	  canvas.viewportCenterObject(element); 
     canvas.add(element);
     canvas.setActiveObject(element);
     rightState.value = RightStates.ELEMENT_STYLE;
@@ -177,12 +179,41 @@ export default () => {
     // setZindex(canvas)
     createPolylineElement(path, startStyle, endStyle, strokeDashArray);
     // createArrowElement(path)
+    // createCurverElement()
   };
 
+  const createCurverElement = () => {
+    const [ canvas ] = useCanvas();
+    var line = new Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke: 'black', objectCaching: false });
+
+    line.path[0][1] = 100;
+    line.path[0][2] = 100;
+
+    line.path[1][1] = 200;
+    line.path[1][2] = 200;
+
+    line.path[1][3] = 300;
+    line.path[1][4] = 100;
+    console.log('path:', line.path)
+    line.selectable = false;
+    canvas.add(line);
+
+    var p1 = makeCurvePoint(200, 200, null, line, null)
+    p1.name = "p1";
+    canvas.add(p1);
+
+    var p0 = makeCurveCircle(100, 100, line, p1, null);
+    p0.name = "p0";
+    canvas.add(p0);
+
+    var p2 = makeCurveCircle(300, 100, null, p1, line);
+    p2.name = "p2";
+    canvas.add(p2);
+  }
+
   const createPolylineElement = (path: XY[], startStyle: LinePoint, endStyle: LinePoint, strokeDashArray?: [number, number]) => {
     const { centerPoint } = useCenter();
     // const points = [ { x: 0, y: 0 }, { x: 200, y: 0 } ]
-    const Polyline = classRegistry.getClass("Polyline");
 
     const element = new Polyline(path, {
       id: nanoid(10),

src/mocks/templates.ts

@@ -32,7 +32,7 @@ export const Templates: Template[] = [
         "top": 0,
         "width": 1070.5512,
         "height": 645.3543,
-        "stroke": "rgba(255,255,255,1)",
+        "stroke": "",
         "strokeWidth": 1,
         "strokeDashArray": null,
         "strokeLineCap": "butt",

src/utils/check.ts

@@ -1,43 +1,37 @@
-import { Object as FabricObject, ActiveSelection, Gradient, Pattern, Text, Group, Canvas,} from 'fabric'
+import { Object as FabricObject, ActiveSelection, Gradient, Pattern, Text, Group, Canvas, Circle } from 'fabric'
 import { util as utilOrgin, Group as NativeGroup } from 'fabric'
 
-
-// 类型工具
 
 const isActiveSelection = (thing: unknown): thing is ActiveSelection => {
-    return thing instanceof ActiveSelection
+  return thing instanceof ActiveSelection
+}
+
+const isCircle = (thing: unknown): thing is Circle => {
+  return thing instanceof Circle
 }
-
 
 const isGroup = (thing?: unknown): thing is Group => {
-    return thing instanceof Group
+  return thing instanceof Group
 }
 
 const isCollection = (thing?: unknown): thing is Group | ActiveSelection | Canvas => {
-    return !!thing && Array.isArray((thing as Group)._objects)
+  return !!thing && Array.isArray((thing as Group)._objects)
 }
 
-/**
- * 判断是否为原生组
- * @param thing
- * @returns NativeGroup | Group | Board
- */
 const isNativeGroup = (thing?: unknown): thing is NativeGroup => {
-    return thing instanceof NativeGroup
+  return thing instanceof NativeGroup
 }
 
 const isGradient = (thing: unknown): thing is Gradient<'linear' | 'radial'> => {
-    return thing instanceof Gradient
+  return thing instanceof Gradient
 }
 
 const isPattern = (thing: unknown): thing is Pattern => {
-    return thing instanceof Pattern
+  return thing instanceof Pattern
 }
 
 const isTextObject = (thing?: FabricObject): thing is Text => {
-// we could use instanceof but that would mean pulling in Text code for a simple check
-// @todo discuss what to do and how to do
-    return !!thing && thing.isType('Text', 'IText', 'Textbox', 'ArcText')
+  return !!thing && thing.isType('Text', 'IText', 'Textbox', 'ArcText')
 }
 
 // const isFiller = (filler: TFiller | string | null): filler is TFiller => {
@@ -49,14 +43,13 @@ const isTextObject = (thing?: FabricObject): thing is Text => {
 // }
 
 export const check = {
-isCollection,
-isGradient,
-isPattern,
-isActiveSelection,
-isTextObject,
-isGroup,
-isNativeGroup,
-// isFiller,
-// isSerializableFiller,
+  isCollection,
+  isGradient,
+  isPattern,
+  isActiveSelection,
+  isTextObject,
+  isGroup,
+  isNativeGroup,
+  isCircle
 }