@hprint/plugins 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/src/plugins/AlignGuidLinePlugin.d.ts

@@ -2,14 +2,19 @@ import { fabric, IEditor, IPluginTempl } from '@hprint/core';
 declare class AlignGuidLinePlugin implements IPluginTempl {
     canvas: fabric.Canvas;
     editor: IEditor;
+    static pluginName: string;
+    static apis: string[];
     defautOption: {
         color: string;
         width: number;
     };
-    static pluginName: string;
     dragMode: boolean;
-    constructor(canvas: fabric.Canvas, editor: IEditor);
+    switch: boolean;
+    constructor(canvas: fabric.Canvas, editor: IEditor, options?: {
+        switch?: boolean;
+    });
     init(): void;
+    changeSwitch(switchStatus: boolean): void;
     destroy(): void;
 }
 export default AlignGuidLinePlugin;

package/dist/src/plugins/AlignGuidLinePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlignGuidLinePlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/AlignGuidLinePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAc7D,cAAM,mBAAoB,YAAW,YAAY;IAQlC,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAR1B,YAAY;;;MAGV;IACF,MAAM,CAAC,UAAU,SAAyB;IAC1C,QAAQ,UAAS;gBAEN,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAK1B,IAAI;IAmlCJ,OAAO;CAGV;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"AlignGuidLinePlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/AlignGuidLinePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAc7D,cAAM,mBAAoB,YAAW,YAAY;IAUlC,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAV1B,MAAM,CAAC,UAAU,SAAyB;IAC1C,MAAM,CAAC,IAAI,WAAoB;IAC/B,YAAY;;;MAGV;IACF,QAAQ,UAAS;IACjB,MAAM,EAAG,OAAO,CAAC;gBAEN,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO,EACtB,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,OAAO,CAAC;KACpB;IAML,IAAI;IAolCJ,YAAY,CAAC,YAAY,EAAE,OAAO;IAIlC,OAAO;CAGV;AAED,eAAe,mBAAmB,CAAC"}

package/dist/src/plugins/GroupAlignPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupAlignPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/GroupAlignPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,KAAK,OAAO,GAAG,IAAI,CACf,gBAAgB,EACd,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,KAAK,GACL,QAAQ,GACR,WAAW,GACX,WAAW,CAChB,CAAC;AAEF,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAG;CACvC;AAED,cAAM,gBAAiB,YAAW,YAAY;IAc/B,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAd1B,MAAM,CAAC,UAAU,SAAsB;IACvC,MAAM,CAAC,IAAI,WAST;gBAGS,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAG1B,IAAI;IAuBJ,KAAK;IA0BL,OAAO;IA0BP,OAAO;IA0BP,GAAG;IAsBH,MAAM;IA0BN,SAAS;IAwFT,SAAS;IAoFT,OAAO;CAGV;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GroupAlignPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/GroupAlignPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,KAAK,OAAO,GAAG,IAAI,CACf,gBAAgB,EACd,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,KAAK,GACL,QAAQ,GACR,WAAW,GACX,WAAW,CAChB,CAAC;AAEF,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAI;CACxC;AAED,cAAM,gBAAiB,YAAW,YAAY;IAc/B,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAd1B,MAAM,CAAC,UAAU,SAAsB;IACvC,MAAM,CAAC,IAAI,WAST;gBAGS,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAG1B,IAAI;IAuBJ,KAAK;IA0BL,OAAO;IA0BP,OAAO;IA0BP,GAAG;IAsBH,MAAM;IA0BN,SAAS;IAwFT,SAAS;IAoFT,OAAO;CAGV;AAED,eAAe,gBAAgB,CAAC"}

package/dist/src/plugins/LockPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LockPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/LockPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM1D,KAAK,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEnD,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAG;CACvC;AAuBD,MAAM,CAAC,OAAO,OAAO,UAAW,YAAW,YAAY;IAIxC,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAJ1B,MAAM,CAAC,UAAU,SAAgB;IACjC,MAAM,CAAC,IAAI,WAAsB;gBAEtB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAK1B,IAAI;IA8GJ,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM;IAWxC,uBAAuB;IAevB,eAAe;IAUf,IAAI;IAaJ,MAAM;IAgBN,WAAW;;;;;IAgBX,OAAO;CAGV"}
+{"version":3,"file":"LockPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/LockPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM1D,KAAK,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEnD,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAI;CACxC;AAuBD,MAAM,CAAC,OAAO,OAAO,UAAW,YAAW,YAAY;IAIxC,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAJ1B,MAAM,CAAC,UAAU,SAAgB;IACjC,MAAM,CAAC,IAAI,WAAsB;gBAEtB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAK1B,IAAI;IA8GJ,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM;IAWxC,uBAAuB;IAevB,eAAe;IAYf,IAAI;IAaJ,MAAM;IAgBN,WAAW;;;;;IAgBX,OAAO;CAGV"}

package/dist/src/plugins/QrCodePlugin.d.ts

@@ -15,6 +15,11 @@ declare class QrCodePlugin implements IPluginTempl {
         originObject: any;
         fabricObject: any;
     }): Promise<void>;
+    _getQrCodeResult(options: any): Promise<{
+        url: string;
+        width: number;
+        height: number;
+    }>;
     _getBase64Str(options: any): Promise<string>;
     _defaultBarcodeOption(): {
         value: string;

package/dist/src/plugins/QrCodePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCodePlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/QrCodePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,KAAK,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC;AAE7D,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAI;CACxC;AAuCD,cAAM,YAAa,YAAW,YAAY;IAI3B,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAJ1B,MAAM,CAAC,UAAU,SAAkB;IACnC,MAAM,CAAC,IAAI,WAA8B;gBAE9B,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAGpB,aAAa,CAAC,MAAM,EAAE,GAAG;IAQzB,sBAAsB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE;QAAE,YAAY,EAAE,GAAG,CAAC;QAAC,YAAY,EAAE,GAAG,CAAA;KAAE;IAM/F,aAAa,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC;IAgClD,qBAAqB;;;;;;IASrB;;OAEG;IACH,eAAe,CAAC,MAAM,EAAE,GAAG;YAiBb,kBAAkB;IAkChC;;OAEG;IACH,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAmCzB;;OAEG;IACG,SAAS,CACX,IAAI,CAAC,EAAE,MAAM,EACb,IAAI,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACnB,EACD,GAAG,CAAC,EAAE,MAAM,GACb,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;IAwDlB,SAAS,CAAC,MAAM,EAAE,GAAG;IA2B3B,OAAO;CAGV;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"QrCodePlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/QrCodePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE1D,KAAK,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC;AAE7D,OAAO,QAAQ,cAAc,CAAC;IAE1B,UAAU,OAAQ,SAAQ,OAAO;KAAI;CACxC;AAED,cAAM,YAAa,YAAW,YAAY;IAI3B,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,MAAM,EAAE,OAAO;IAJ1B,MAAM,CAAC,UAAU,SAAkB;IACnC,MAAM,CAAC,IAAI,WAA8B;gBAE9B,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO;IAGpB,aAAa,CAAC,MAAM,EAAE,GAAG;IA0BzB,sBAAsB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE;QAAE,YAAY,EAAE,GAAG,CAAC;QAAC,YAAY,EAAE,GAAG,CAAA;KAAE;IAM/F,gBAAgB,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAsCvF,aAAa,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC;IAKlD,qBAAqB;;;;;;IASrB;;OAEG;IACH,eAAe,CAAC,MAAM,EAAE,GAAG;YAiBb,kBAAkB;IAkChC;;OAEG;IACH,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAoCzB;;OAEG;IACG,SAAS,CACX,IAAI,CAAC,EAAE,MAAM,EACb,IAAI,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACnB,EACD,GAAG,CAAC,EAAE,MAAM,GACb,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;IAwDlB,SAAS,CAAC,MAAM,EAAE,GAAG;IA2B3B,OAAO;CAGV;AAED,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hprint/plugins",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,8 +22,8 @@
     "qs": "~6.12.3",
     "socket.io-client": "^4.8.1",
     "uuid": "~8.3.2",
-    "@hprint/core": "0.0.1-alpha.2",
-    "@hprint/shared": "0.0.1-alpha.2"
+    "@hprint/core": "0.0.1-alpha.3",
+    "@hprint/shared": "0.0.1-alpha.3"
   },
   "devDependencies": {
     "@types/bwip-js": "^3.2.3",

package/src/assets/style/resizePlugin.css

@@ -1,27 +1,27 @@
-.resize-bar {
-    border-radius: 3px;
-    background-color: rgba(160, 160, 160, 0.6);
-    position: absolute;
-}
-.resize-bar:hover {
-    background-color: #328cff;
-}
-.resize-bar.horizontal {
-    width: 6px;
-    height: 30px;
-}
-.resize-bar.vertical {
-    width: 30px;
-    height: 6px;
-}
-.resize-bar.active {
-    background-color: #328cff;
-}
-#resize-left-bar,
-#resize-right-bar {
-    cursor: ew-resize;
-}
-#resize-top-bar,
-#resize-bottom-bar {
-    cursor: ns-resize;
-}
+.resize-bar {
+    border-radius: 3px;
+    background-color: rgba(160, 160, 160, 0.6);
+    position: absolute;
+}
+.resize-bar:hover {
+    background-color: #328cff;
+}
+.resize-bar.horizontal {
+    width: 6px;
+    height: 30px;
+}
+.resize-bar.vertical {
+    width: 30px;
+    height: 6px;
+}
+.resize-bar.active {
+    background-color: #328cff;
+}
+#resize-left-bar,
+#resize-right-bar {
+    cursor: ew-resize;
+}
+#resize-top-bar,
+#resize-bottom-bar {
+    cursor: ns-resize;
+}

package/src/objects/Arrow.js

@@ -1,47 +1,47 @@
-import { fabric } from '@hprint/core';
-
-fabric.Arrow = fabric.util.createClass(fabric.Line, {
-    type: 'arrow',
-    superType: 'drawing',
-    initialize(points, options) {
-        if (!points) {
-            const { x1, x2, y1, y2 } = options;
-            points = [x1, y1, x2, y2];
-        }
-        options = options || {};
-        this.callSuper('initialize', points, options);
-    },
-    _render(ctx) {
-        this.callSuper('_render', ctx);
-        ctx.save();
-        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
-        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
-        const xDiff = (this.x2 - this.x1) * this.scaleX;
-        const yDiff = (this.y2 - this.y1) * this.scaleY;
-        const angle = Math.atan2(yDiff, xDiff);
-        ctx.translate(
-            ((this.x2 - this.x1) / 2) * this.scaleX,
-            ((this.y2 - this.y1) / 2) * this.scaleY
-        );
-        ctx.rotate(angle);
-        ctx.beginPath();
-        // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
-        ctx.moveTo(0, 0);
-        ctx.lineTo(-10, 5);
-        ctx.lineTo(-10, -5);
-        ctx.closePath();
-        ctx.lineWidth = this.lineWidth;
-        ctx.strokeStyle = this.stroke;
-        ctx.fillStyle = this.fill;
-        ctx.stroke();
-        ctx.fill();
-        ctx.restore();
-    },
-});
-
-fabric.Arrow.fromObject = (options, callback) => {
-    const { x1, x2, y1, y2 } = options;
-    return callback(new fabric.Arrow([x1, y1, x2, y2], options));
-};
-
-export default fabric.Arrow;
+import { fabric } from '@hprint/core';
+
+fabric.Arrow = fabric.util.createClass(fabric.Line, {
+    type: 'arrow',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        ctx.save();
+        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
+        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
+        const xDiff = (this.x2 - this.x1) * this.scaleX;
+        const yDiff = (this.y2 - this.y1) * this.scaleY;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate(
+            ((this.x2 - this.x1) / 2) * this.scaleX,
+            ((this.y2 - this.y1) / 2) * this.scaleY
+        );
+        ctx.rotate(angle);
+        ctx.beginPath();
+        // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+        ctx.moveTo(0, 0);
+        ctx.lineTo(-10, 5);
+        ctx.lineTo(-10, -5);
+        ctx.closePath();
+        ctx.lineWidth = this.lineWidth;
+        ctx.strokeStyle = this.stroke;
+        ctx.fillStyle = this.fill;
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    },
+});
+
+fabric.Arrow.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new fabric.Arrow([x1, y1, x2, y2], options));
+};
+
+export default fabric.Arrow;

package/src/objects/ThinTailArrow.js

@@ -1,50 +1,50 @@
-import { fabric } from '@hprint/core';
-
-fabric.ThinTailArrow = fabric.util.createClass(fabric.Line, {
-    type: 'thinTailArrow',
-    superType: 'drawing',
-    initialize(points, options) {
-        if (!points) {
-            const { x1, x2, y1, y2 } = options;
-            points = [x1, y1, x2, y2];
-        }
-        options = options || {};
-        this.callSuper('initialize', points, options);
-    },
-    _render(ctx) {
-        ctx.save();
-        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
-        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
-        const xDiff = (this.x2 - this.x1) * this.scaleX;
-        const yDiff = (this.y2 - this.y1) * this.scaleY;
-        ctx.translate(-xDiff / 2, -yDiff / 2);
-        // 箭头方位角
-        const angle = Math.atan2(yDiff, xDiff);
-        ctx.rotate(angle);
-        // 箭头总长(最小长度是20)
-        let length = Math.hypot(xDiff, yDiff);
-        length = length < 20 ? 20 : length;
-        // 绘制箭头
-        ctx.beginPath();
-        ctx.moveTo(0, 0);
-        ctx.lineTo(length - 18, -5);
-        ctx.lineTo(length - 20, -12);
-        ctx.lineTo(length, 0);
-        ctx.lineTo(length - 20, 12);
-        ctx.lineTo(length - 18, 5);
-        ctx.lineTo(0, 0);
-        ctx.lineWidth = this.strokeWidth;
-        ctx.strokeStyle = this.stroke;
-        ctx.fillStyle = this.fill;
-        ctx.stroke();
-        ctx.fill();
-        ctx.restore();
-    },
-});
-
-fabric.ThinTailArrow.fromObject = (options, callback) => {
-    const { x1, x2, y1, y2 } = options;
-    return callback(new fabric.ThinTailArrow([x1, y1, x2, y2], options));
-};
-
-export default fabric.ThinTailArrow;
+import { fabric } from '@hprint/core';
+
+fabric.ThinTailArrow = fabric.util.createClass(fabric.Line, {
+    type: 'thinTailArrow',
+    superType: 'drawing',
+    initialize(points, options) {
+        if (!points) {
+            const { x1, x2, y1, y2 } = options;
+            points = [x1, y1, x2, y2];
+        }
+        options = options || {};
+        this.callSuper('initialize', points, options);
+    },
+    _render(ctx) {
+        ctx.save();
+        // 乘或除对应的scaleX(Y)，抵消元素放缩造成的影响，使箭头不会变形
+        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
+        const xDiff = (this.x2 - this.x1) * this.scaleX;
+        const yDiff = (this.y2 - this.y1) * this.scaleY;
+        ctx.translate(-xDiff / 2, -yDiff / 2);
+        // 箭头方位角
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.rotate(angle);
+        // 箭头总长(最小长度是20)
+        let length = Math.hypot(xDiff, yDiff);
+        length = length < 20 ? 20 : length;
+        // 绘制箭头
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(length - 18, -5);
+        ctx.lineTo(length - 20, -12);
+        ctx.lineTo(length, 0);
+        ctx.lineTo(length - 20, 12);
+        ctx.lineTo(length - 18, 5);
+        ctx.lineTo(0, 0);
+        ctx.lineWidth = this.strokeWidth;
+        ctx.strokeStyle = this.stroke;
+        ctx.fillStyle = this.fill;
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    },
+});
+
+fabric.ThinTailArrow.fromObject = (options, callback) => {
+    const { x1, x2, y1, y2 } = options;
+    return callback(new fabric.ThinTailArrow([x1, y1, x2, y2], options));
+};
+
+export default fabric.ThinTailArrow;