@logicflow/extension 2.1.10 → 2.1.11

package/es/tools/snapshot/index.d.ts

@@ -110,10 +110,14 @@ export declare class Snapshot {
      */
     private getClassRules;
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    private getCanvasDimensionsByBrowser;
+    private getCanvasScaleRatio;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/es/tools/snapshot/index.js

@@ -345,24 +345,28 @@ var Snapshot = /** @class */ (function () {
         return rules;
     };
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    Snapshot.prototype.getCanvasDimensionsByBrowser = function () {
-        var userAgent = navigator.userAgent;
-        // 默认值
-        var maxCanvasDimension = 65535;
-        var otherMaxCanvasDimension = 4096;
-        if (userAgent.indexOf('Chrome') !== -1 ||
-            userAgent.indexOf('Edge') !== -1) {
-            maxCanvasDimension = 65535;
-            otherMaxCanvasDimension = 4096;
+    Snapshot.prototype.getCanvasScaleRatio = function (width, height) {
+        /* 单边最大像素 */
+        var maxCanvasSide = 32767;
+        /* 最大像素面积 */
+        var maxCanvasArea = 268435456;
+        var area = width * height;
+        if (width <= maxCanvasSide &&
+            height <= maxCanvasSide &&
+            area <= maxCanvasArea) {
+            return 1;
         }
-        else if (userAgent.indexOf('Firefox') !== -1) {
-            maxCanvasDimension = 32767;
-            otherMaxCanvasDimension = 3814;
-        }
-        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+        var widthScale = maxCanvasSide / width;
+        var heightScale = maxCanvasSide / height;
+        var areaScale = maxCanvasArea / area;
+        return Math.min(widthScale, heightScale, areaScale);
     };
     /**
      * 将 svg 转化为 canvas
@@ -372,14 +376,14 @@ var Snapshot = /** @class */ (function () {
      */
     Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, targetWidth, targetHeight, scaleRatio, ctx, img, style, foreignObject;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
                         return [4 /*yield*/, this.cloneSvg(svg, false)];
                     case 1:
-                        copy = _c.sent();
+                        copy = _b.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -417,54 +421,29 @@ var Snapshot = /** @class */ (function () {
                         canvas.style.height = "".concat(bboxHeight, "px");
                         safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
                         ;
-                        _b = this.getCanvasDimensionsByBrowser(), maxCanvasDimension = _b.maxCanvasDimension, otherMaxCanvasDimension = _b.otherMaxCanvasDimension;
-                        MAX_CANVAS_DIMENSION = maxCanvasDimension;
-                        OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension;
                         targetWidth = bboxWidth * dpr;
                         targetHeight = bboxHeight * dpr;
-                        scaleWidth = 1 //宽 缩放
-                        ;
-                        scaleHeight = 1 //高 缩放
-                        ;
-                        // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-                        if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight > OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight < OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                        }
-                        else if (targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        if (scaleWidth < 1 || scaleHeight < 1) {
-                            targetWidth = Math.floor(targetWidth * scaleWidth);
-                            targetHeight = Math.floor(targetHeight * scaleHeight);
+                        scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight);
+                        if (scaleRatio < 1) {
+                            targetWidth = Math.floor(targetWidth * scaleRatio);
+                            targetHeight = Math.floor(targetHeight * scaleRatio);
                         }
                         // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
                         // 在transform矩阵中加入padding值，确保左侧元素不会被截断
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+                            "matrix(".concat(scaleRatio, ", 0, 0, ").concat(scaleRatio, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
                                 padding +
                                 factorWidth / 2 +
-                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding + factorHeight / 2 + safetyMargin, ")");
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin, ")");
                         canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr;
                         canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
+                            ctx.scale(dpr, dpr);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;

package/lib/tools/snapshot/index.d.ts

@@ -110,10 +110,14 @@ export declare class Snapshot {
      */
     private getClassRules;
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    private getCanvasDimensionsByBrowser;
+    private getCanvasScaleRatio;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/lib/tools/snapshot/index.js

@@ -348,24 +348,28 @@ var Snapshot = /** @class */ (function () {
         return rules;
     };
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    Snapshot.prototype.getCanvasDimensionsByBrowser = function () {
-        var userAgent = navigator.userAgent;
-        // 默认值
-        var maxCanvasDimension = 65535;
-        var otherMaxCanvasDimension = 4096;
-        if (userAgent.indexOf('Chrome') !== -1 ||
-            userAgent.indexOf('Edge') !== -1) {
-            maxCanvasDimension = 65535;
-            otherMaxCanvasDimension = 4096;
+    Snapshot.prototype.getCanvasScaleRatio = function (width, height) {
+        /* 单边最大像素 */
+        var maxCanvasSide = 32767;
+        /* 最大像素面积 */
+        var maxCanvasArea = 268435456;
+        var area = width * height;
+        if (width <= maxCanvasSide &&
+            height <= maxCanvasSide &&
+            area <= maxCanvasArea) {
+            return 1;
         }
-        else if (userAgent.indexOf('Firefox') !== -1) {
-            maxCanvasDimension = 32767;
-            otherMaxCanvasDimension = 3814;
-        }
-        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+        var widthScale = maxCanvasSide / width;
+        var heightScale = maxCanvasSide / height;
+        var areaScale = maxCanvasArea / area;
+        return Math.min(widthScale, heightScale, areaScale);
     };
     /**
      * 将 svg 转化为 canvas
@@ -375,14 +379,14 @@ var Snapshot = /** @class */ (function () {
      */
     Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, targetWidth, targetHeight, scaleRatio, ctx, img, style, foreignObject;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
                         return [4 /*yield*/, this.cloneSvg(svg, false)];
                     case 1:
-                        copy = _c.sent();
+                        copy = _b.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -420,54 +424,29 @@ var Snapshot = /** @class */ (function () {
                         canvas.style.height = "".concat(bboxHeight, "px");
                         safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
                         ;
-                        _b = this.getCanvasDimensionsByBrowser(), maxCanvasDimension = _b.maxCanvasDimension, otherMaxCanvasDimension = _b.otherMaxCanvasDimension;
-                        MAX_CANVAS_DIMENSION = maxCanvasDimension;
-                        OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension;
                         targetWidth = bboxWidth * dpr;
                         targetHeight = bboxHeight * dpr;
-                        scaleWidth = 1 //宽 缩放
-                        ;
-                        scaleHeight = 1 //高 缩放
-                        ;
-                        // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-                        if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight > OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight < OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                        }
-                        else if (targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        if (scaleWidth < 1 || scaleHeight < 1) {
-                            targetWidth = Math.floor(targetWidth * scaleWidth);
-                            targetHeight = Math.floor(targetHeight * scaleHeight);
+                        scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight);
+                        if (scaleRatio < 1) {
+                            targetWidth = Math.floor(targetWidth * scaleRatio);
+                            targetHeight = Math.floor(targetHeight * scaleRatio);
                         }
                         // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
                         // 在transform矩阵中加入padding值，确保左侧元素不会被截断
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+                            "matrix(".concat(scaleRatio, ", 0, 0, ").concat(scaleRatio, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
                                 padding +
                                 factorWidth / 2 +
-                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding + factorHeight / 2 + safetyMargin, ")");
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin, ")");
                         canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr;
                         canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
+                            ctx.scale(dpr, dpr);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/vue-node-registry": "1.1.9",
-    "@logicflow/core": "2.1.8"
+    "@logicflow/vue-node-registry": "1.1.10",
+    "@logicflow/core": "2.1.9"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.1.8",
-    "@logicflow/vue-node-registry": "1.1.9"
+    "@logicflow/core": "2.1.9",
+    "@logicflow/vue-node-registry": "1.1.10"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/tools/snapshot/index.ts

@@ -315,31 +315,34 @@ export class Snapshot {
   }
 
   /**
-   * 根据浏览器类型获取Canvas尺寸限制
-   * @returns 包含最大主维度和次维度的对象
+   * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+   * - 参考 MDN 最大的画布尺寸：
+   * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+   *
+   * @param width
+   * @param height
    */
-  private getCanvasDimensionsByBrowser(): {
-    maxCanvasDimension: number
-    otherMaxCanvasDimension: number
-  } {
-    const userAgent = navigator.userAgent
+  private getCanvasScaleRatio(width: number, height: number): number {
+    /* 单边最大像素 */
+    const maxCanvasSide = 32767
+    /* 最大像素面积 */
+    const maxCanvasArea = 268435456
 
-    // 默认值
-    let maxCanvasDimension = 65535
-    let otherMaxCanvasDimension = 4096
+    const area = width * height
 
     if (
-      userAgent.indexOf('Chrome') !== -1 ||
-      userAgent.indexOf('Edge') !== -1
+      width <= maxCanvasSide &&
+      height <= maxCanvasSide &&
+      area <= maxCanvasArea
     ) {
-      maxCanvasDimension = 65535
-      otherMaxCanvasDimension = 4096
-    } else if (userAgent.indexOf('Firefox') !== -1) {
-      maxCanvasDimension = 32767
-      otherMaxCanvasDimension = 3814
+      return 1
     }
 
-    return { maxCanvasDimension, otherMaxCanvasDimension }
+    const widthScale = maxCanvasSide / width
+    const heightScale = maxCanvasSide / height
+    const areaScale = maxCanvasArea / area
+
+    return Math.min(widthScale, heightScale, areaScale)
   }
 
   /**
@@ -406,62 +409,33 @@ export class Snapshot {
     // 为宽画布添加额外的安全边距，确保不会裁剪
     const safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
 
-    // 获取当前浏览器类型，不同浏览器对canvas的限制不同
-    const { maxCanvasDimension, otherMaxCanvasDimension } =
-      this.getCanvasDimensionsByBrowser()
-    const MAX_CANVAS_DIMENSION = maxCanvasDimension
-    const OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension
-
     let targetWidth = bboxWidth * dpr
     let targetHeight = bboxHeight * dpr
-    let scaleWidth = 1 //宽 缩放
-    let scaleHeight = 1 //高 缩放
-    // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-    if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight > OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight < OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-    } else if (
-      targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight
-    }
 
-    if (scaleWidth < 1 || scaleHeight < 1) {
-      targetWidth = Math.floor(targetWidth * scaleWidth)
-      targetHeight = Math.floor(targetHeight * scaleHeight)
+    // 超出 canvas 大小限制时，进行等比缩放
+    const scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight)
+    if (scaleRatio < 1) {
+      targetWidth = Math.floor(targetWidth * scaleRatio)
+      targetHeight = Math.floor(targetHeight * scaleRatio)
     }
+
     // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
     // 在transform矩阵中加入padding值，确保左侧元素不会被截断
     // 对这个矩阵进行缩放，否则会导致截断
     ;(copy.lastChild as SVGElement).style.transform =
-      `matrix(${scaleWidth}, 0, 0, ${scaleHeight}, ${
-        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+      `matrix(${scaleRatio}, 0, 0, ${scaleRatio}, ${
+        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
         padding +
         factorWidth / 2 +
         safetyMargin
-      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding + factorHeight / 2 + safetyMargin})`
+      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin})`
     canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr
     canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr
     const ctx = canvas.getContext('2d')
     if (ctx) {
       // 清空canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.scale(dpr * scaleWidth, dpr * scaleHeight)
+      ctx.scale(dpr, dpr)
       // 如果有背景色，设置流程图导出的背景色
       if (backgroundColor) {
         ctx.fillStyle = backgroundColor