@logicflow/extension 2.1.9 → 2.1.10

package/es/materials/curved-edge/index.js

@@ -41,6 +41,9 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 var directionMap = {
     tr: 'tl',
     lb: 'tl',
@@ -51,13 +54,17 @@ var directionMap = {
     bl: 'br',
     rt: 'br',
 };
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points) {
+    // 原地修改传入的数组
     var all = points;
+    // 从第二个点开始，检查三点是否共线
     var i = 1;
     while (i < all.length - 1) {
         var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
         var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
         var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        // 如果三点在同一条水平或垂直直线上，删除中间点
         if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
             all.splice(i, 1);
         }
@@ -65,6 +72,7 @@ function pointFilter(points) {
             i++;
         }
     }
+    // 返回精简后的点集
     return all;
 }
 function getMidPoints(cur, key, orientation, radius) {
@@ -121,18 +129,22 @@ function getMidPoints(cur, key, orientation, radius) {
 }
 function getPartialPath(prev, cur, next, radius) {
     var _a;
+    // 定义误差容错变量
+    var tolerance = 1;
     var dir1 = '';
     var dir2 = '';
-    if (prev[0] === cur[0]) {
+    if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+        // 垂直方向
         dir1 = prev[1] > cur[1] ? 't' : 'b';
     }
-    else if (prev[1] === cur[1]) {
+    else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+        // 水平方向
         dir1 = prev[0] > cur[0] ? 'l' : 'r';
     }
-    if (cur[0] === next[0]) {
+    if (Math.abs(cur[0] - next[0]) <= tolerance) {
         dir2 = cur[1] > next[1] ? 't' : 'b';
     }
-    else if (cur[1] === next[1]) {
+    else if (Math.abs(cur[1] - next[1]) <= tolerance) {
         dir2 = cur[0] > next[0] ? 'l' : 'r';
     }
     var r = Math.min(Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2, Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2, radius) || (1 / 5) * radius;

package/es/tools/snapshot/index.js

@@ -372,7 +372,7 @@ 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, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
+            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) {
                     case 0:
@@ -404,22 +404,24 @@ var Snapshot = /** @class */ (function () {
                         graphModel = this.lf.graphModel;
                         transformModel = graphModel.transformModel;
                         SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                        safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
+                        safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
                         ;
-                        actualWidth = (bbox.width / SCALE_X) * safetyFactor;
-                        actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        bboxWidth = Math.ceil(actualWidth);
-                        bboxHeight = Math.ceil(actualHeight);
+                        actualWidth = bbox.width / SCALE_X;
+                        actualHeight = bbox.height / SCALE_Y;
+                        factorWidth = actualWidth * (safetyFactor - 1);
+                        factorHeight = actualHeight * (safetyFactor - 1);
+                        bboxWidth = Math.ceil(actualWidth + factorWidth);
+                        bboxHeight = Math.ceil(actualHeight + factorHeight);
                         canvas = document.createElement('canvas');
                         canvas.style.width = "".concat(bboxWidth, "px");
                         canvas.style.height = "".concat(bboxHeight, "px");
-                        safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
+                        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 + padding * 2 + safetyMargin;
-                        targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin;
+                        targetWidth = bboxWidth * dpr;
+                        targetHeight = bboxHeight * dpr;
                         scaleWidth = 1 //宽 缩放
                         ;
                         scaleHeight = 1 //高 缩放
@@ -452,9 +454,12 @@ var Snapshot = /** @class */ (function () {
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr, ")");
-                        canvas.width = targetWidth;
-                        canvas.height = targetHeight;
+                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+                                padding +
+                                factorWidth / 2 +
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + 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
@@ -704,9 +709,7 @@ var Snapshot = /** @class */ (function () {
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        console.log('getSnapshotBase64---------------', backgroundColor, fileType, toImageOptions);
-                        return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });

package/lib/materials/curved-edge/index.js

@@ -44,6 +44,9 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCurvedEdgePath = exports.CurvedEdgeModel = exports.CurvedEdge = void 0;
 var core_1 = require("@logicflow/core");
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 var directionMap = {
     tr: 'tl',
     lb: 'tl',
@@ -54,13 +57,17 @@ var directionMap = {
     bl: 'br',
     rt: 'br',
 };
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points) {
+    // 原地修改传入的数组
     var all = points;
+    // 从第二个点开始，检查三点是否共线
     var i = 1;
     while (i < all.length - 1) {
         var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
         var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
         var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        // 如果三点在同一条水平或垂直直线上，删除中间点
         if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
             all.splice(i, 1);
         }
@@ -68,6 +75,7 @@ function pointFilter(points) {
             i++;
         }
     }
+    // 返回精简后的点集
     return all;
 }
 function getMidPoints(cur, key, orientation, radius) {
@@ -124,18 +132,22 @@ function getMidPoints(cur, key, orientation, radius) {
 }
 function getPartialPath(prev, cur, next, radius) {
     var _a;
+    // 定义误差容错变量
+    var tolerance = 1;
     var dir1 = '';
     var dir2 = '';
-    if (prev[0] === cur[0]) {
+    if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+        // 垂直方向
         dir1 = prev[1] > cur[1] ? 't' : 'b';
     }
-    else if (prev[1] === cur[1]) {
+    else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+        // 水平方向
         dir1 = prev[0] > cur[0] ? 'l' : 'r';
     }
-    if (cur[0] === next[0]) {
+    if (Math.abs(cur[0] - next[0]) <= tolerance) {
         dir2 = cur[1] > next[1] ? 't' : 'b';
     }
-    else if (cur[1] === next[1]) {
+    else if (Math.abs(cur[1] - next[1]) <= tolerance) {
         dir2 = cur[0] > next[0] ? 'l' : 'r';
     }
     var r = Math.min(Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2, Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2, radius) || (1 / 5) * radius;

package/lib/tools/snapshot/index.js

@@ -375,7 +375,7 @@ 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, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
+            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) {
                     case 0:
@@ -407,22 +407,24 @@ var Snapshot = /** @class */ (function () {
                         graphModel = this.lf.graphModel;
                         transformModel = graphModel.transformModel;
                         SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                        safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
+                        safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
                         ;
-                        actualWidth = (bbox.width / SCALE_X) * safetyFactor;
-                        actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        bboxWidth = Math.ceil(actualWidth);
-                        bboxHeight = Math.ceil(actualHeight);
+                        actualWidth = bbox.width / SCALE_X;
+                        actualHeight = bbox.height / SCALE_Y;
+                        factorWidth = actualWidth * (safetyFactor - 1);
+                        factorHeight = actualHeight * (safetyFactor - 1);
+                        bboxWidth = Math.ceil(actualWidth + factorWidth);
+                        bboxHeight = Math.ceil(actualHeight + factorHeight);
                         canvas = document.createElement('canvas');
                         canvas.style.width = "".concat(bboxWidth, "px");
                         canvas.style.height = "".concat(bboxHeight, "px");
-                        safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
+                        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 + padding * 2 + safetyMargin;
-                        targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin;
+                        targetWidth = bboxWidth * dpr;
+                        targetHeight = bboxHeight * dpr;
                         scaleWidth = 1 //宽 缩放
                         ;
                         scaleHeight = 1 //高 缩放
@@ -455,9 +457,12 @@ var Snapshot = /** @class */ (function () {
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr, ")");
-                        canvas.width = targetWidth;
-                        canvas.height = targetHeight;
+                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+                                padding +
+                                factorWidth / 2 +
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + 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
@@ -707,9 +712,7 @@ var Snapshot = /** @class */ (function () {
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        console.log('getSnapshotBase64---------------', backgroundColor, fileType, toImageOptions);
-                        return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.1.7",
-    "@logicflow/vue-node-registry": "1.1.8"
+    "@logicflow/vue-node-registry": "1.1.9",
+    "@logicflow/core": "2.1.8"
   },
   "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.7",
-    "@logicflow/vue-node-registry": "1.1.8"
+    "@logicflow/core": "2.1.8",
+    "@logicflow/vue-node-registry": "1.1.9"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/materials/curved-edge/index.ts

@@ -1,9 +1,14 @@
 import { PolylineEdge, PolylineEdgeModel, h, LogicFlow } from '@logicflow/core'
 import PointTuple = LogicFlow.PointTuple
 
+// 方向类型：t=上(top), b=下(bottom), l=左(left), r=右(right)，'' 表示未确定
 type DirectionType = 't' | 'b' | 'l' | 'r' | ''
+// 圆弧所在象限：tl=左上，tr=右上，bl=左下，br=右下，'-' 表示不需要圆弧
 type ArcQuadrantType = 'tl' | 'tr' | 'bl' | 'br' | '-'
 
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 const directionMap: {
   [key: string]: ArcQuadrantType
 } = {
@@ -17,19 +22,24 @@ const directionMap: {
   rt: 'br',
 }
 
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points: number[][]) {
+  // 原地修改传入的数组
   const all = points
+  // 从第二个点开始，检查三点是否共线
   let i = 1
   while (i < all.length - 1) {
     const [x, y] = all[i - 1]
     const [x1, y1] = all[i]
     const [x2, y2] = all[i + 1]
+    // 如果三点在同一条水平或垂直直线上，删除中间点
     if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
       all.splice(i, 1)
     } else {
       i++
     }
   }
+  // 返回精简后的点集
   return all
 }
 
@@ -93,18 +103,23 @@ function getPartialPath(
   next: PointTuple,
   radius: number,
 ): string {
+  // 定义误差容错变量
+  const tolerance = 1
+
   let dir1: DirectionType = ''
   let dir2: DirectionType = ''
 
-  if (prev[0] === cur[0]) {
+  if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+    // 垂直方向
     dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (prev[1] === cur[1]) {
+  } else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+    // 水平方向
     dir1 = prev[0] > cur[0] ? 'l' : 'r'
   }
 
-  if (cur[0] === next[0]) {
+  if (Math.abs(cur[0] - next[0]) <= tolerance) {
     dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (cur[1] === next[1]) {
+  } else if (Math.abs(cur[1] - next[1]) <= tolerance) {
     dir2 = cur[0] > next[0] ? 'l' : 'r'
   }
 

package/src/tools/snapshot/index.ts

@@ -389,20 +389,22 @@ export class Snapshot {
     // 计算实际宽高，考虑缩放因素
     // 在宽画布情况下，getBoundingClientRect可能无法获取到所有元素的边界
     // 因此我们添加一个安全系数来确保能够容纳所有元素
-    const safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
-    const actualWidth = (bbox.width / SCALE_X) * safetyFactor
-    const actualHeight = (bbox.height / SCALE_Y) * safetyFactor
+    const safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
+    const actualWidth = bbox.width / SCALE_X
+    const actualHeight = bbox.height / SCALE_Y
+    const factorWidth = actualWidth * (safetyFactor - 1)
+    const factorHeight = actualHeight * (safetyFactor - 1)
 
     // 包含所有元素的最小宽高，确保足够大以容纳所有元素
-    const bboxWidth = Math.ceil(actualWidth)
-    const bboxHeight = Math.ceil(actualHeight)
+    const bboxWidth = Math.ceil(actualWidth + factorWidth)
+    const bboxHeight = Math.ceil(actualHeight + factorHeight)
     const canvas = document.createElement('canvas')
     canvas.style.width = `${bboxWidth}px`
     canvas.style.height = `${bboxHeight}px`
 
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     // 为宽画布添加额外的安全边距，确保不会裁剪
-    const safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
+    const safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
 
     // 获取当前浏览器类型，不同浏览器对canvas的限制不同
     const { maxCanvasDimension, otherMaxCanvasDimension } =
@@ -410,8 +412,8 @@ export class Snapshot {
     const MAX_CANVAS_DIMENSION = maxCanvasDimension
     const OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension
 
-    let targetWidth = bboxWidth * dpr + padding * 2 + safetyMargin
-    let targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin
+    let targetWidth = bboxWidth * dpr
+    let targetHeight = bboxHeight * dpr
     let scaleWidth = 1 //宽 缩放
     let scaleHeight = 1 //高 缩放
     // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
@@ -448,12 +450,13 @@ export class Snapshot {
     // 对这个矩阵进行缩放，否则会导致截断
     ;(copy.lastChild as SVGElement).style.transform =
       `matrix(${scaleWidth}, 0, 0, ${scaleHeight}, ${
-        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr
-      }, ${
-        (-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr
-      })`
-    canvas.width = targetWidth
-    canvas.height = targetHeight
+        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+        padding +
+        factorWidth / 2 +
+        safetyMargin
+      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + 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
@@ -678,12 +681,6 @@ export class Snapshot {
     fileType?: string,
     toImageOptions?: ToImageOptions,
   ): Promise<SnapshotResponse> {
-    console.log(
-      'getSnapshotBase64---------------',
-      backgroundColor,
-      fileType,
-      toImageOptions,
-    )
     return await this.withExportPreparation(
       () => this._getSnapshotBase64(backgroundColor, fileType, toImageOptions),
       toImageOptions,