@meta2d/core 1.0.56 → 1.0.58

package/src/pen/render.ts

@@ -1,3725 +0,0 @@
-import {
-  CanvasLayer,
-  ColorStop,
-  IValue,
-  LineAnimateType,
-  LockState,
-  Pen,
-} from './model';
-import { drawArrow, getLineRect, getSplitAnchor } from '../diagrams';
-import { Direction, inheritanceProps } from '../data';
-import {
-  calcRotate,
-  distance,
-  facePoint,
-  Point,
-  rotatePoint,
-  scalePoint,
-  translatePoint,
-  TwoWay,
-} from '../point';
-import {
-  calcCenter,
-  calcRightBottom,
-  calcRelativePoint,
-  calcRelativeRect,
-  Rect,
-  rectInRect,
-  scaleRect,
-  translateRect,
-  calcPivot
-} from '../rect';
-import { globalStore, Meta2dStore } from '../store';
-import { calcTextLines, calcTextDrawRect, calcTextRect } from './text';
-import { deepClone } from '../utils/clone';
-import { renderFromArrow, renderToArrow } from './arrow';
-import { Gradient, isEqual, PenType } from '../pen';
-import { pSBC, rgba } from '../utils';
-import { Canvas } from '../canvas';
-
-/**
- * ancestor 是否是 pen 的祖先
- * @param pen 当前画笔
- * @param ancestor 祖先画笔
- */
-export function isAncestor(pen: Pen, ancestor: Pen) {
-  if (!pen || !ancestor) {
-    return false;
-  }
-  let parent = getParent(pen);
-  while (parent) {
-    if (parent.id === ancestor.id) {
-      return true;
-    }
-    parent = getParent(parent);
-  }
-  return false;
-}
-
-export function getParent(pen: Pen, root?: boolean): Pen {
-  if (!pen || !pen.parentId || !pen.calculative) {
-    return undefined;
-  }
-
-  const store = pen.calculative.canvas.store;
-  const parent = store.pens[pen.parentId];
-  if (!root) {
-    return parent;
-  }
-  return getParent(parent, root) || parent;
-}
-
-export function getAllChildren(pen: Pen, store: Meta2dStore): Pen[] {
-  if (!pen || !pen.children) {
-    return [];
-  }
-  const children: Pen[] = [];
-  pen.children.forEach((id) => {
-    const child = store.pens[id];
-    if (child) {
-      children.push(child);
-      children.push(...getAllChildren(child, store));
-    }
-  });
-  return children;
-}
-
-export function getAllFollowers(pen: Pen, store: Meta2dStore): Pen[] {
-  if (!pen || !pen.followers) {
-    return [];
-  }
-  const followers: Pen[] = [];
-  pen.followers.forEach((id) => {
-    const follower = store.pens[id];
-    if (follower&&!follower.parentId) {
-      followers.push(follower);
-      followers.push(...getAllFollowers(follower, store));
-    }
-  });
-  return followers;
-}
-
-function drawBkLinearGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { worldRect, gradientFromColor, gradientToColor, gradientAngle } =
-    pen.calculative;
-  return linearGradient(
-    ctx,
-    worldRect,
-    gradientFromColor,
-    gradientToColor,
-    gradientAngle
-  );
-}
-
-/**
- * 避免副作用，把创建好后的径向渐变对象返回出来
- * @param ctx 画布绘制对象
- * @param pen 当前画笔
- * @returns 径向渐变
- */
-function drawBkRadialGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { worldRect, gradientFromColor, gradientToColor, gradientRadius } =
-    pen.calculative;
-  if (!gradientFromColor || !gradientToColor) {
-    return;
-  }
-
-  const { width, height, center } = worldRect;
-  const { x: centerX, y: centerY } = center;
-  let r = width;
-  if (r < height) {
-    r = height;
-  }
-  r *= 0.5;
-  const grd = ctx.createRadialGradient(
-    centerX,
-    centerY,
-    r * (gradientRadius || 0),
-    centerX,
-    centerY,
-    r
-  );
-  grd.addColorStop(0, gradientFromColor);
-  grd.addColorStop(1, gradientToColor);
-
-  return grd;
-}
-
-function getLinearGradientPoints(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  r: number
-) {
-  let slantAngle = 0;
-  slantAngle = Math.PI / 2 - Math.atan2(y2 - y1, x2 - x1);
-  const originX = (x1 + x2) / 2;
-  const originY = (y1 + y2) / 2;
-
-  const perpX1 = originX + r * Math.sin((90 * Math.PI) / 180 - slantAngle);
-  const perpY1 = originY + r * -Math.cos((90 * Math.PI) / 180 - slantAngle);
-
-  const perpX2 = originX + r * Math.sin((270 * Math.PI) / 180 - slantAngle);
-  const perpY2 = originY + r * -Math.cos((270 * Math.PI) / 180 - slantAngle);
-
-  return [perpX1, perpY1, perpX2, perpY2];
-}
-
-function getBkRadialGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { worldRect, gradientColors, gradientRadius } = pen.calculative;
-  if (!gradientColors) {
-    return;
-  }
-
-  const { width, height, center } = worldRect;
-  const { x: centerX, y: centerY } = center;
-  let r = width;
-  if (r < height) {
-    r = height;
-  }
-  r *= 0.5;
-  const { colors } = formatGradient(gradientColors);
-  const grd = ctx.createRadialGradient(
-    centerX,
-    centerY,
-    r * (gradientRadius || 0),
-    centerX,
-    centerY,
-    r
-  );
-  colors.forEach((stop) => {
-    grd.addColorStop(stop.i, stop.color);
-  });
-
-  return grd;
-}
-
-function getBkGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { x, y, ex, width, height, center } = pen.calculative.worldRect;
-  let points = [
-    { x: ex, y: y + height / 2 },
-    { x: x, y: y + height / 2 },
-  ];
-  const { angle, colors } = formatGradient(pen.calculative.gradientColors);
-  let r = getGradientR(angle, width, height);
-  points.forEach((point) => {
-    rotatePoint(point, angle, center);
-  });
-  return getLinearGradient(ctx, points, colors, r);
-}
-
-function getTextRadialGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { worldRect, textGradientColors } = pen.calculative;
-  if (!textGradientColors) {
-    return;
-  }
-
-  const { width, height, center } = worldRect;
-  const { x: centerX, y: centerY } = center;
-  let r = width;
-  if (r < height) {
-    r = height;
-  }
-  r *= 0.5;
-  const { colors } = formatGradient(textGradientColors);
-  const grd = ctx.createRadialGradient(
-    centerX,
-    centerY,
-    0,
-    centerX,
-    centerY,
-    r
-  );
-  colors.forEach((stop) => {
-    grd.addColorStop(stop.i, stop.color);
-  });
-
-  return grd;
-}
-
-function getTextGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { x, y, ex, width, height, center } = pen.calculative.worldRect;
-  let points = [
-    { x: ex, y: y + height / 2 },
-    { x: x, y: y + height / 2 },
-  ];
-  const { angle, colors } = formatGradient(pen.calculative.textGradientColors);
-  let r = getGradientR(angle, width, height);
-  points.forEach((point) => {
-    rotatePoint(point, angle, center);
-  });
-  return getLinearGradient(ctx, points, colors, r);
-}
-
-function getGradientR(angle: number, width: number, height: number) {
-  const dividAngle = (Math.atan(height / width) / Math.PI) * 180;
-  let calculateAngle = (angle - 90) % 360;
-  let r = 0;
-  if (
-    (calculateAngle > dividAngle && calculateAngle < 180 - dividAngle) ||
-    (calculateAngle > 180 + dividAngle && calculateAngle < 360 - dividAngle) ||
-    calculateAngle < 0
-  ) {
-    //根据高计算
-    if (calculateAngle > 270) {
-      calculateAngle = 360 - calculateAngle;
-    } else if (calculateAngle > 180) {
-      calculateAngle = calculateAngle - 180;
-    } else if (calculateAngle > 90) {
-      calculateAngle = 180 - calculateAngle;
-    }
-    r = Math.abs(height / Math.sin((calculateAngle / 180) * Math.PI) / 2);
-  } else {
-    //根据宽计算
-    if (calculateAngle > 270) {
-      calculateAngle = 360 - calculateAngle;
-    } else if (calculateAngle > 180) {
-      calculateAngle = calculateAngle - 180;
-    } else if (calculateAngle > 90) {
-      calculateAngle = 180 - calculateAngle;
-    }
-    r = Math.abs(width / Math.cos((calculateAngle / 180) * Math.PI) / 2);
-  }
-  return r;
-}
-
-function formatGradient(color: string) {
-  if (typeof color == 'string' && color.startsWith('linear-gradient')) {
-    let arr = color.slice(16, -2).split('deg,');
-    if (arr.length > 1) {
-      let _arr = arr[1].split('%,');
-      const colors = [];
-      _arr.forEach((stap) => {
-        if (/rgba?/.test(stap)) {
-          let _arr = stap.split(') ');
-          colors.push({
-            color: rgbaToHex(_arr[0] + ')'),
-            i: parseFloat(_arr[1]) / 100,
-          });
-        } else {
-          let _arr = stap.split(' ');
-          if (_arr.length > 2) {
-            colors.push({
-              color: _arr[1],
-              i: parseFloat(_arr[2]) / 100,
-            });
-          } else {
-            colors.push({
-              color: _arr[0],
-              i: parseFloat(_arr[1]) / 100,
-            });
-          }
-        }
-      });
-      return {
-        angle: parseFloat(arr[0]),
-        colors,
-      };
-    } else {
-      return {
-        angle: parseFloat(arr[0]),
-        colors: [],
-      };
-    }
-  } else {
-    return {
-      angle: 0,
-      colors: [],
-    };
-  }
-}
-
-function rgbaToHex(value) {
-  if (/rgba?/.test(value)) {
-    let array = value.split(',');
-    //不符合rgb或rgb规则直接return
-    if (array.length < 3) return '';
-    value = '#';
-    for (let i = 0, color; (color = array[i++]); ) {
-      if (i < 4) {
-        //前三位转换成16进制
-        color = parseInt(color.replace(/[^\d]/gi, ''), 10).toString(16);
-        value += color.length == 1 ? '0' + color : color;
-      } else {
-        //rgba的透明度转换成16进制
-        color = color.replace(')', '');
-        let colorA = parseInt(color * 255 + '');
-        let colorAHex = colorA.toString(16);
-        colorAHex = colorAHex.length === 2 ? colorAHex : '0' + colorAHex;
-        value += colorAHex;
-      }
-    }
-    value = value.toUpperCase();
-  }
-  return value;
-}
-
-function getLineGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const { x, y, ex, width, height, center } = pen.calculative.worldRect;
-  let points = [
-    { x: ex, y: y + height / 2 },
-    { x: x, y: y + height / 2 },
-  ];
-
-  const { angle, colors } = formatGradient(pen.calculative.lineGradientColors);
-  let r = getGradientR(angle, width, height);
-
-  points.forEach((point) => {
-    rotatePoint(point, angle, center);
-  });
-  return getLinearGradient(ctx, points, colors, r);
-}
-
-function getLinearGradient(
-  ctx: CanvasRenderingContext2D,
-  points: Point[],
-  colors: ColorStop[],
-  radius: number
-): CanvasGradient {
-  let arr = getLinearGradientPoints(
-    points[0].x,
-    points[0].y,
-    points[1].x,
-    points[1].y,
-    radius
-  );
-  let gradient = ctx.createLinearGradient(arr[0], arr[1], arr[2], arr[3]);
-  colors.forEach((stop) => {
-    gradient.addColorStop(stop.i, stop.color);
-  });
-  return gradient;
-}
-
-function drawLinearGradientLine(
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  points: Point[]
-) {
-  let colors = [];
-  if (pen.calculative.gradientColorStop) {
-    colors = pen.calculative.gradientColorStop;
-  } else {
-    colors = formatGradient(pen.calculative.lineGradientColors).colors;
-    pen.calculative.gradientColorStop = colors;
-  }
-  ctx.strokeStyle = getLinearGradient(
-    ctx,
-    points,
-    colors,
-    pen.calculative.lineWidth / 2
-  );
-  ctx.beginPath();
-  ctx.moveTo(points[0].x, points[0].y);
-  ctx.lineTo(points[1].x, points[1].y);
-  ctx.stroke();
-}
-
-function ctxDrawLinearGradientPath(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const anchors = pen.calculative.worldAnchors;
-  let smoothLenth =
-    pen.calculative.lineWidth * (pen.calculative.gradientSmooth || pen.calculative.lineSmooth || 0);
-  for (let i = 0; i < anchors.length - 1; i++) {
-    if (
-      (pen.lineName === 'curve' || pen.lineName === 'mind') &&
-      anchors[i].curvePoints
-    ) {
-            if (i > 0) {
-        let lastCurvePoints = anchors[i - 1].curvePoints;
-        if (lastCurvePoints) {
-          //上一个存在锚点
-          smoothTransition(
-            ctx,
-            pen,
-            smoothLenth,
-            lastCurvePoints[lastCurvePoints.length - 1],
-            anchors[i],
-            anchors[i].curvePoints[0]
-          );
-        } else {
-          smoothTransition(
-            ctx,
-            pen,
-            smoothLenth,
-            anchors[i - 1],
-            anchors[i],
-            anchors[i].curvePoints[0]
-          );
-        }
-        //获取当前相对于0的位置
-        let next = getSmoothAdjacent(
-          smoothLenth,
-          anchors[i],
-          anchors[i].curvePoints[0]
-        );
-        drawLinearGradientLine(ctx, pen, [next, anchors[i].curvePoints[1]]);
-      } else {
-        drawLinearGradientLine(ctx, pen, [
-          anchors[i],
-          anchors[i].curvePoints[0],
-        ]);
-        drawLinearGradientLine(ctx, pen, [
-          anchors[i].curvePoints[0],
-          anchors[i].curvePoints[1],
-        ]);
-      }
-      let len = anchors[i].curvePoints.length - 1;
-      for (let j = 1; j < len; j++) {
-        drawLinearGradientLine(ctx, pen, [
-          anchors[i].curvePoints[j],
-          anchors[i].curvePoints[j + 1],
-        ]);
-      }
-      let last = getSmoothAdjacent(
-        smoothLenth,
-        anchors[i + 1],
-        anchors[i].curvePoints[len]
-      );
-      drawLinearGradientLine(ctx, pen, [anchors[i].curvePoints[len], last]);
-    } else {
-      let _next = anchors[i];
-      let _last = anchors[i + 1];
-      if (i > 0 && i < anchors.length - 1) {
-        //有突兀的地方
-        let lastCurvePoints = anchors[i - 1].curvePoints;
-        if (lastCurvePoints) {
-          smoothTransition(
-            ctx,
-            pen,
-            smoothLenth,
-            lastCurvePoints[lastCurvePoints.length - 1],
-            anchors[i],
-            anchors[i + 1]
-          );
-        } else {
-                    smoothTransition(
-            ctx,
-            pen,
-            smoothLenth,
-            anchors[i - 1],
-            anchors[i],
-            anchors[i + 1]
-          );
-                  }
-      }
-      if (i > 0 && i < anchors.length - 1) {
-        _next = getSmoothAdjacent(smoothLenth, anchors[i], anchors[i + 1]);
-      }
-      if (i < anchors.length - 2) {
-        _last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i]);
-      }
-      let flag = false;
-      if(i === 0){
-        if( pen.fromLineCap && pen.fromLineCap !== 'butt'){
-          ctx.save();
-          flag = true;
-          ctx.lineCap = pen.fromLineCap;
-        }
-      }
-      if(i !== 0 && i === anchors.length - 2){
-        if( pen.toLineCap && pen.toLineCap !== 'butt'){
-          ctx.save();
-          flag = true;
-          ctx.lineCap = pen.toLineCap;
-        }
-      }
-
-      drawLinearGradientLine(ctx, pen, [_next, _last]);
-      if(flag){
-        ctx.restore();
-      }
-      if(anchors.length===2&&i===0){
-        ctx.save();
-        flag = true;
-        ctx.lineCap = pen.toLineCap;
-        let _y = 0.1;
-        let _x = 0.1;
-        if(_next.x-_last.x===0){
-          _x =0
-        }else{
-          _y = (_next.y-_last.y)/(_next.x-_last.x)*0.1;
-        }
-        drawLinearGradientLine(ctx, pen, [{x:_last.x-_x,y:_last.y-_y}, _last]);
-        ctx.restore();
-      }
-    }
-  }
-}
-
-function getSmoothAdjacent(smoothLenth: number, p1: Point, p2: Point) {
-  let nexLength = Math.sqrt(
-    (p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y)
-  );
-  if (nexLength === 0) {
-    return {
-      x: p1.x,
-      y: p1.y,
-    };
-  }
-  if (smoothLenth < nexLength) {
-    return {
-      x: p1.x + ((p2.x - p1.x) * smoothLenth) / nexLength,
-      y: p1.y + ((p2.y - p1.y) * smoothLenth) / nexLength,
-    };
-  } else {
-    return {
-      x: p1.x + (p2.x - p1.x) / nexLength / 2,
-      y: p1.y + (p2.y - p1.y) / nexLength / 2,
-    };
-  }
-}
-
-function smoothTransition(
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  smoothLenth: number,
-  p1: Point,
-  p2: Point,
-  p3: Point
-) {
-  let last = getSmoothAdjacent(smoothLenth, p2, p1);
-  let next = getSmoothAdjacent(smoothLenth, p2, p3);
-  let contrlPoint = { x: p2.x, y: p2.y };
-
-  let points = getBezierPoints(pen.calculative.canvas.store.data.smoothNum || 20, last, contrlPoint, next);
-  for (let k = 0; k < points.length - 1; k++) {
-    drawLinearGradientLine(ctx, pen, [
-      {
-        x: points[k].x,
-        y: points[k].y,
-      },
-      {
-        x: points[k + 1].x,
-        y: points[k + 1].y,
-      },
-    ]);
-  }
-}
-
-function smoothAnimateTransition(
-  ctx: Path2D,
-  smoothLenth: number,
-  p2: Point,
-  p3: Point
-) {
-  let next = getSmoothAdjacent(smoothLenth, p2, p3);
-  let contrlPoint = { x: p2.x, y: p2.y };
-
-  ctx.quadraticCurveTo(contrlPoint.x, contrlPoint.y, next.x, next.y);
-}
-
-export function getGradientAnimatePath(pen: Pen) {
-  const anchors = pen.calculative.worldAnchors;
-  let smoothLenth =
-    pen.calculative.lineWidth * (pen.calculative.gradientSmooth || pen.calculative.lineSmooth || 0);
-  //只创建一次
-  const _path = new Path2D();
-  for (let i = 0; i < anchors.length - 1; i++) {
-    let _next = anchors[i];
-    let _last = anchors[i + 1];
-    if (i == 0) {
-      _path.moveTo(anchors[i].x, anchors[i].y);
-    }
-    if (i > 0 && i < anchors.length - 1) {
-      //有突兀的地方
-      let lastCurvePoints = anchors[i - 1].curvePoints;
-      // const path = new Path2D();
-      if (lastCurvePoints) {
-        smoothAnimateTransition(_path, smoothLenth, anchors[i], anchors[i + 1]);
-      } else {
-        smoothAnimateTransition(_path, smoothLenth, anchors[i], anchors[i + 1]);
-      }
-    }
-    if (i > 0 && i < anchors.length - 1) {
-      _next = getSmoothAdjacent(smoothLenth, anchors[i], anchors[i + 1]);
-    }
-    if (i < anchors.length - 2) {
-      _last = getSmoothAdjacent(smoothLenth, anchors[i + 1], anchors[i]);
-    }
-    _path.lineTo(_last.x, _last.y);
-  }
-
-  return _path;
-}
-
-function getAngle(p1: Point, p2: Point, p3: Point) {
-  let a = { x: 0, y: 0 },
-    b = { x: 0, y: 0 };
-  a.x = p1.x - p2.x;
-  a.y = p1.y - p2.y;
-  b.x = p3.x - p2.x;
-  b.y = p3.y - p2.y;
-
-  return (
-    (Math.acos(
-      (a.x * b.x + a.y * b.y) /
-        (Math.sqrt(a.x * a.x + a.y * a.y) * Math.sqrt(b.x * b.x + b.y * b.y))
-    ) /
-      Math.PI) *
-    180
-  );
-}
-
-function getBezierPoints(
-  num = 100,
-  p1?: Point,
-  p2?: Point,
-  p3?: Point,
-  p4?: Point
-) {
-  let func = null;
-  const points = [];
-  if (!p3 && !p4) {
-    func = oneBezier;
-  } else if (p3 && !p4) {
-    func = twoBezier;
-  } else if (p3 && p4) {
-    func = threeBezier;
-  }
-  for (let i = 0; i < num; i++) {
-    points.push(func(i / num, p1, p2, p3, p4));
-  }
-  if (p4) {
-    points.push(p4);
-  } else if (p3) {
-    points.push(p3);
-  }
-  return points;
-}
-
-/**
- * @desc 一阶贝塞尔
- * @param  t 当前百分比
- * @param  p1 起点坐标
- * @param  p2 终点坐标
- */
-function oneBezier(t: number, p1: Point, p2: Point) {
-  const { x: x1, y: y1 } = p1;
-  const { x: x2, y: y2 } = p2;
-  let x = x1 + (x2 - x1) * t;
-  let y = y1 + (y2 - y1) * t;
-  return { x, y };
-}
-
-/**
- * @desc 二阶贝塞尔
- * @param  t 当前百分比
- * @param  p1 起点坐标
- * @param  p2 终点坐标
- * @param  cp 控制点
- */
-function twoBezier(t: number, p1: Point, cp: Point, p2: Point) {
-  const { x: x1, y: y1 } = p1;
-  const { x: cx, y: cy } = cp;
-  const { x: x2, y: y2 } = p2;
-  let x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
-  let y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
-  return { x, y };
-}
-
-/**
- * @desc 三阶贝塞尔
- * @param  t 当前百分比
- * @param  p1 起点坐标
- * @param  p2 终点坐标
- * @param  cp1 控制点1
- * @param  cp2 控制点2
- */
-function threeBezier(t: number, p1: Point, cp1: Point, cp2: Point, p2: Point) {
-  const { x: x1, y: y1 } = p1;
-  const { x: x2, y: y2 } = p2;
-  const { x: cx1, y: cy1 } = cp1;
-  const { x: cx2, y: cy2 } = cp2;
-  let x =
-    x1 * (1 - t) * (1 - t) * (1 - t) +
-    3 * cx1 * t * (1 - t) * (1 - t) +
-    3 * cx2 * t * t * (1 - t) +
-    x2 * t * t * t;
-  let y =
-    y1 * (1 - t) * (1 - t) * (1 - t) +
-    3 * cy1 * t * (1 - t) * (1 - t) +
-    3 * cy2 * t * t * (1 - t) +
-    y2 * t * t * t;
-  return { x, y };
-}
-
-function strokeLinearGradient(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const {
-    worldRect,
-    lineGradientFromColor,
-    lineGradientToColor,
-    lineGradientAngle,
-  } = pen.calculative;
-  return linearGradient(
-    ctx,
-    worldRect,
-    lineGradientFromColor,
-    lineGradientToColor,
-    lineGradientAngle
-  );
-}
-
-/**
- * 避免副作用，把创建好后的线性渐变对象返回出来
- * @param ctx 画布绘制对象
- * @param worldRect 世界坐标
- * @returns 线性渐变
- */
-function linearGradient(
-  ctx: CanvasRenderingContext2D,
-  worldRect: Rect,
-  fromColor: string,
-  toColor: string,
-  angle: number
-) {
-  if (!fromColor || !toColor) {
-    return;
-  }
-
-  const { x, y, center, ex, ey } = worldRect;
-  const from: Point = {
-    x,
-    y: center.y,
-  };
-  const to: Point = {
-    x: ex,
-    y: center.y,
-  };
-  if (angle % 90 === 0 && angle % 180) {
-    from.x = center.x;
-    to.x = center.x;
-    if (angle % 270) {
-      from.y = y;
-      to.y = ey;
-    } else {
-      from.y = ey;
-      to.y = y;
-    }
-  } else if (angle) {
-    rotatePoint(from, angle, worldRect.center);
-    rotatePoint(to, angle, worldRect.center);
-  }
-
-  // contributor: https://github.com/sunnyguohua/meta2d
-  const grd = ctx.createLinearGradient(from.x, from.y, to.x, to.y);
-  grd.addColorStop(0, fromColor);
-  grd.addColorStop(1, toColor);
-  return grd;
-}
-
-/**
- * 根据图片的宽高， imageRatio iconAlign 来获取图片的实际位置
- * @param pen 画笔
- */
-function getImagePosition(pen: Pen) {
-  const {
-    worldIconRect: rect,
-    iconWidth,
-    iconHeight,
-    imgNaturalWidth,
-    imgNaturalHeight,
-  } = pen.calculative;
-  let { x, y, width: w, height: h } = rect;
-  if (iconWidth) {
-    w = iconWidth;
-  }
-  if (iconHeight) {
-    h = iconHeight;
-  }
-  if (imgNaturalWidth && imgNaturalHeight && pen.imageRatio) {
-    const scaleW = rect.width / imgNaturalWidth;
-    const scaleH = rect.height / imgNaturalHeight;
-    const scaleMin = Math.min(scaleW, scaleH);
-    const wDivideH = imgNaturalWidth / imgNaturalHeight;
-    if (iconWidth) {
-      h = iconWidth / wDivideH;
-    } else if (iconHeight) {
-      w = iconHeight * wDivideH;
-    } else {
-      w = scaleMin * imgNaturalWidth;
-      h = scaleMin * imgNaturalHeight;
-    }
-  }
-  x += (rect.width - w) / 2;
-  y += (rect.height - h) / 2;
-
-  switch (pen.iconAlign) {
-    case 'top':
-      y = rect.y;
-      break;
-    case 'bottom':
-      y = rect.ey - h;
-      break;
-    case 'left':
-      x = rect.x;
-      break;
-    case 'right':
-      x = rect.ex - w;
-      break;
-    case 'left-top':
-      x = rect.x;
-      y = rect.y;
-      break;
-    case 'right-top':
-      x = rect.ex - w;
-      y = rect.y;
-      break;
-    case 'left-bottom':
-      x = rect.x;
-      y = rect.ey - h;
-      break;
-    case 'right-bottom':
-      x = rect.ex - w;
-      y = rect.ey - h;
-      break;
-  }
-
-  return {
-    x,
-    y,
-    width: w,
-    height: h,
-  };
-}
-
-export function drawImage(
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  pen: Pen
-) {
-  const { x, y, width, height } = getImagePosition(pen);
-  const { worldIconRect, iconRotate, img } = pen.calculative;
-
-  if (iconRotate) {
-    const { x: centerX, y: centerY } = worldIconRect.center;
-    ctx.translate(centerX, centerY);
-    ctx.rotate((iconRotate * Math.PI) / 180);
-    ctx.translate(-centerX, -centerY);
-  }
-  if (pen.imageRadius) {
-    ctx.save();
-    let wr = pen.calculative.imageRadius || 0,
-      hr = wr;
-    const {
-      x: _x,
-      y: _y,
-      width: w,
-      height: h,
-      ex,
-      ey,
-    } = pen.calculative.worldRect;
-    if (wr < 1) {
-      wr = w * wr;
-      hr = h * hr;
-    }
-    let r = wr < hr ? wr : hr;
-    if (w < 2 * r) {
-      r = w / 2;
-    }
-    if (h < 2 * r) {
-      r = h / 2;
-    }
-    ctx.beginPath();
-
-    ctx.moveTo(_x + r, _y);
-    ctx.arcTo(ex, _y, ex, ey, r);
-    ctx.arcTo(ex, ey, _x, ey, r);
-    ctx.arcTo(_x, ey, _x, _y, r);
-    ctx.arcTo(_x, _y, ex, _y, r);
-    ctx.clip();
-    ctx.drawImage(img, x, y, width, height);
-    ctx.restore();
-  } else {
-    ctx.drawImage(img, x, y, width, height);
-  }
-}
-
-/**
- * 获取文字颜色， textColor 优先其次 color
- */
-export function getTextColor(pen: Pen, store: Meta2dStore) {
-  const { textColor, color } = pen.calculative;
-  const { data, options } = store;
-  return (
-    textColor ||
-    color ||
-    data.textColor ||
-    data.color ||
-    options.textColor ||
-    options.color
-  );
-}
-
-function drawText(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const {
-    fontStyle,
-    fontWeight,
-    fontSize,
-    fontFamily,
-    lineHeight,
-    text,
-    hiddenText,
-    canvas,
-    textHasShadow,
-    textBackground,
-    textType,
-  } = pen.calculative;
-  if (text == undefined || hiddenText) {
-    return;
-  }
-  const store = canvas.store;
-  ctx.save();
-  if (!textHasShadow) {
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-  let fill: string = undefined;
-  if(pen.calculative.disabled){
-    fill = pen.disabledTextColor || pen.disabledColor || pSBC(0.4, getTextColor(pen, store));
-  }else if (pen.calculative.hover) {
-    fill = pen.hoverTextColor || pen.hoverColor || store.options.hoverColor;
-  } else if (pen.calculative.active) {
-    fill = pen.activeTextColor || pen.activeColor || store.options.activeColor;
-  }
-  let gradient = undefined;
-  if (textType === Gradient.Linear) {
-    gradient = getTextGradient(ctx, pen);
-  } else if (textType === Gradient.Radial) {
-    gradient = getTextRadialGradient(ctx, pen);
-  }
-  ctx.fillStyle = fill || gradient || getTextColor(pen, store);
-  ctx.font = getFont({
-    fontStyle,
-    fontWeight,
-    fontFamily: fontFamily || store.options.fontFamily,
-    fontSize,
-    lineHeight,
-  });
-
-  !pen.calculative.textDrawRect && calcTextDrawRect(ctx, pen);
-  const {
-    x: drawRectX,
-    y: drawRectY,
-    width,
-    height,
-  } = pen.calculative.textDrawRect;
-  if (textBackground) {
-    ctx.save();
-    ctx.fillStyle = textBackground;
-    ctx.fillRect(drawRectX, drawRectY, width, height);
-    ctx.restore();
-  }
-
-  const y = 0.55;
-  const textAlign = pen.textAlign || store.options.textAlign;
-  const oneRowHeight = fontSize * lineHeight;
-  pen.calculative.textLines.forEach((text, i) => {
-    const textLineWidth = pen.calculative.textLineWidths[i];
-    let x = 0;
-    if (textAlign === 'center') {
-      x = (width - textLineWidth) / 2;
-    } else if (textAlign === 'right') {
-      x = width - textLineWidth;
-    }
-    // 下划线
-    ctx.fillText(text, drawRectX + x, drawRectY + (i + y) * oneRowHeight);
-    const { textDecorationColor, textDecorationDash, textDecoration } = pen;
-    if (textDecoration) {
-      drawUnderLine(
-        ctx,
-        {
-          x: drawRectX + x,
-          y: drawRectY + (i + y) * oneRowHeight,
-          width: textLineWidth,
-        },
-        { textDecorationColor, textDecorationDash, fontSize }
-      );
-    }
-    // 删除线
-    const { textStrickoutColor, textStrickoutDash, textStrickout } = pen;
-    if (textStrickout) {
-      drawStrickout(
-        ctx,
-        {
-          x: drawRectX + x,
-          y: drawRectY + (i + y) * oneRowHeight,
-          width: textLineWidth,
-        },
-        { textStrickoutColor, textStrickoutDash, fontSize }
-      );
-    }
-  });
-  ctx.restore();
-}
-function drawUnderLine(
-  ctx: CanvasRenderingContext2D,
-  location: any,
-  config: any
-) {
-  const { textDecorationColor, textDecorationDash, fontSize } = config;
-  let { x, y, width } = location;
-  switch (ctx.textBaseline) {
-    case 'top':
-      y += fontSize;
-      break;
-    case 'middle':
-      y += fontSize / 2;
-      break;
-  }
-  ctx.save();
-  ctx.beginPath();
-  ctx.strokeStyle = textDecorationColor ? textDecorationColor : ctx.fillStyle;
-  ctx.lineWidth = 1;
-  ctx.moveTo(x, y);
-  ctx.setLineDash(textDecorationDash || []);
-  ctx.lineTo(x + width, y);
-  ctx.stroke();
-  ctx.restore();
-}
-function drawStrickout(
-  ctx: CanvasRenderingContext2D,
-  location: any,
-  config: any
-) {
-  const { textStrickoutColor, textStrickoutDash, fontSize } = config;
-  let { x, y, width } = location;
-  switch (ctx.textBaseline) {
-    case 'top':
-      y += fontSize / 2;
-      break;
-    case 'bottom':
-      y -= fontSize / 2;
-      break;
-  }
-  ctx.save();
-  ctx.beginPath();
-  ctx.strokeStyle = textStrickoutColor ? textStrickoutColor : ctx.fillStyle;
-  ctx.lineWidth = 1;
-  ctx.moveTo(x, y);
-  ctx.setLineDash(textStrickoutDash || []);
-  ctx.lineTo(x + width, y);
-  ctx.stroke();
-  ctx.restore();
-}
-function drawFillText(ctx: CanvasRenderingContext2D, pen: Pen, text: string) {
-  if (text == undefined) {
-    return;
-  }
-
-  const { fontStyle, fontWeight, fontSize, fontFamily, lineHeight, canvas } =
-    pen.calculative;
-
-  const store = canvas.store;
-  ctx.save();
-
-  let fill: string = undefined;
-  if (pen.calculative.hover) {
-    fill = pen.hoverTextColor || pen.hoverColor || store.options.hoverColor;
-  } else if (pen.calculative.active) {
-    fill = pen.activeTextColor || pen.activeColor || store.options.activeColor;
-  }
-  ctx.fillStyle = fill || getTextColor(pen, store);
-
-  ctx.font = getFont({
-    fontStyle,
-    fontWeight,
-    fontFamily: fontFamily || store.options.fontFamily,
-    fontSize,
-    lineHeight,
-  });
-
-  const w = ctx.measureText(text).width;
-  let t: string;
-
-  let prev: Point;
-  for (const anchor of pen.calculative.worldAnchors) {
-    if (!prev) {
-      prev = anchor;
-      continue;
-    }
-
-    const dis = distance(prev, anchor);
-
-    const n = Math.floor(dis / w);
-    t = '';
-    for (let i = 0; i < n; i++) {
-      t += text;
-    }
-
-    const angle = calcRotate(prev, anchor) - 270;
-    ctx.save();
-    if (angle % 360 !== 0) {
-      const { x, y } = prev;
-      ctx.translate(x, y);
-      let rotate = (angle * Math.PI) / 180;
-      ctx.rotate(rotate);
-      ctx.translate(-x, -y);
-    }
-    ctx.fillText(t, prev.x, prev.y + lineHeight / 2);
-    ctx.restore();
-    prev = anchor;
-  }
-
-  ctx.restore();
-}
-
-export function drawIcon(
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  pen: Pen
-) {
-  const store = pen.calculative.canvas.store;
-  ctx.save();
-  ctx.shadowColor = '';
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  const iconRect = pen.calculative.worldIconRect;
-  let x = iconRect.x + iconRect.width / 2;
-  let y = iconRect.y + iconRect.height / 2;
-
-  switch (pen.iconAlign) {
-    case 'top':
-      y = iconRect.y;
-      ctx.textBaseline = 'top';
-      break;
-    case 'bottom':
-      y = iconRect.ey;
-      ctx.textBaseline = 'bottom';
-      break;
-    case 'left':
-      x = iconRect.x;
-      ctx.textAlign = 'left';
-      break;
-    case 'right':
-      x = iconRect.ex;
-      ctx.textAlign = 'right';
-      break;
-    case 'left-top':
-      x = iconRect.x;
-      y = iconRect.y;
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'top';
-      break;
-    case 'right-top':
-      x = iconRect.ex;
-      y = iconRect.y;
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'top';
-      break;
-    case 'left-bottom':
-      x = iconRect.x;
-      y = iconRect.ey;
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'bottom';
-      break;
-    case 'right-bottom':
-      x = iconRect.ex;
-      y = iconRect.ey;
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'bottom';
-      break;
-  }
-
-  const fontWeight = pen.calculative.iconWeight;
-  let fontSize: number = undefined;
-  const fontFamily = pen.calculative.iconFamily;
-  if (pen.calculative.iconSize > 0) {
-    fontSize = pen.calculative.iconSize;
-  } else if (iconRect.width > iconRect.height) {
-    fontSize = iconRect.height;
-  } else {
-    fontSize = iconRect.width;
-  }
-  ctx.font = getFont({
-    fontSize,
-    fontWeight,
-    fontFamily,
-  });
-  ctx.fillStyle = pen.calculative.iconColor || getTextColor(pen, store);
-
-  if (pen.calculative.iconRotate) {
-    ctx.translate(iconRect.center.x, iconRect.center.y);
-    ctx.rotate((pen.calculative.iconRotate * Math.PI) / 180);
-    ctx.translate(-iconRect.center.x, -iconRect.center.y);
-  }
-
-  ctx.beginPath();
-  ctx.fillText(pen.calculative.icon, x, y);
-  ctx.restore();
-}
-
-/**
- * canvas2svg 中对 font 的解析规则比 canvas 中简单，能识别的类型很少
- * @returns ctx.font
- */
-export function getFont({
-  fontStyle = 'normal',
-  textDecoration = 'normal',
-  fontWeight = 'normal',
-  fontSize = 12,
-  fontFamily = 'Arial',
-  lineHeight = 1, // TODO: lineHeight 默认值待测试
-}: {
-  fontStyle?: string;
-  textDecoration?: string;
-  fontWeight?: string;
-  fontSize?: number;
-  fontFamily?: string;
-  lineHeight?: number;
-} = {}) {
-  return `${fontStyle} ${textDecoration} ${fontWeight} ${fontSize}px/${lineHeight} ${fontFamily}`;
-}
-
-// TODO: 0.5 偏移量在 图片中可能存在问题
-export function ctxFlip(
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  pen: Pen
-) {
-  // worldRect 可能为 undefined
-  const { x, ex, y, ey } = pen.calculative.worldRect || {};
-  if (pen.calculative.flipX) {
-    ctx.translate(x + ex + 0.5, 0.5);
-    ctx.scale(-1, 1);
-  }
-  if (pen.calculative.flipY) {
-    ctx.translate(0.5, y + ey + 0.5);
-    ctx.scale(1, -1);
-  }
-}
-
-export function ctxRotate(
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  pen: Pen,
-  noFlip: boolean = false
-) {
-  const { x, y } = pen.calculative.worldRect.pivot || pen.calculative.worldRect.center;
-  ctx.translate(x, y);
-  let rotate = (pen.calculative.rotate * Math.PI) / 180;
-  // 目前只有水平和垂直翻转，都需要 * -1
-  if (!noFlip) {
-    if (pen.calculative.flipX) {
-      rotate *= -1;
-    }
-    if (pen.calculative.flipY) {
-      rotate *= -1;
-    }
-  }
-  ctx.rotate(rotate);
-  ctx.translate(-x, -y);
-}
-
-export function renderPen(
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  download?: boolean
-) {
-  ctx.save();
-  ctx.translate(0.5, 0.5);
-  ctx.beginPath();
-  const store = pen.calculative.canvas.store;
-  const textFlip = pen.textFlip || store.options.textFlip;
-  const textRotate = pen.textRotate || store.options.textRotate;
-  if (!textFlip || !textRotate) {
-    ctx.save();
-  }
-  ctxFlip(ctx, pen);
-
-  if (pen.calculative.rotate && pen.name !== 'line') {
-    ctxRotate(ctx, pen);
-  }
-  if (pen.calculative.lineWidth > 1 || download) {
-    ctx.lineWidth = pen.calculative.lineWidth;
-  }
-
-  inspectRect(ctx, store, pen); // 审查 rect
-  let fill: any;
-  // 该变量控制在 hover active 状态下的节点是否设置填充颜色
-  // let setBack = true;
-  let lineGradientFlag = false;
-  let _stroke = undefined;
-  if(pen.calculative.disabled){
-    _stroke = pen.disabledColor || store.options.disabledColor || pSBC(0.4, pen.calculative.color || getGlobalColor(store));
-    fill = pen.disabledBackground || store.options.disabledBackground || pSBC(0.4, pen.calculative.background || store.data.penBackground);
-  } else if (pen.mouseDownValid && pen.calculative.mouseDown){
-    _stroke = pen.mouseDownColor || pSBC(-0.4, pen.calculative.color || getGlobalColor(store));
-    fill = pen.mouseDownBackground || pSBC(-0.4, pen.calculative.background || store.data.penBackground);
-  } else if (pen.calculative.hover) {
-    _stroke = pen.hoverColor || store.options.hoverColor;
-    fill = pen.hoverBackground || store.options.hoverBackground;
-    //  ctx.fillStyle = fill;
-    //  fill && (setBack = false);
-  } else if (pen.calculative.active) {
-    _stroke = pen.activeColor || store.options.activeColor;
-    fill = pen.activeBackground || store.options.activeBackground;
-    // ctx.fillStyle = fill;
-    // fill && (setBack = false);
-  } else if (pen.calculative.isDock) {
-    if (pen.type === PenType.Line) {
-      _stroke = store.options.dockPenColor;
-    } else {
-      fill = rgba(store.options.dockPenColor, 0.2);
-      //  ctx.fillStyle = fill;
-      //  fill && (setBack = false);
-    }
-  }
-  // else {
-  const strokeImg = pen.calculative.strokeImg;
-  if (pen.calculative.strokeImage && strokeImg) {
-    ctx.strokeStyle = _stroke || ctx.createPattern(strokeImg, 'repeat');
-    // fill = true;
-  } else {
-    let stroke: string | CanvasGradient | CanvasPattern;
-    // TODO: 线只有线性渐变
-    if (pen.calculative.strokeType) {
-      if (pen.calculative.lineGradientColors) {
-        if (pen.name === 'line') {
-          lineGradientFlag = true;
-        } else {
-          if (pen.calculative.lineGradient) {
-            stroke = pen.calculative.lineGradient;
-          } else {
-            stroke = getLineGradient(ctx, pen);
-            pen.calculative.lineGradient = stroke;
-          }
-        }
-      } else {
-        stroke = strokeLinearGradient(ctx, pen);
-      }
-    } else {
-      stroke = pen.calculative.color || getGlobalColor(store);
-    }
-    ctx.strokeStyle = _stroke || stroke;
-  }
-  // }
-  //if (setBack) {
-  const backgroundImg = pen.calculative.backgroundImg;
-  if (pen.calculative.backgroundImage && backgroundImg) {
-    ctx.fillStyle = fill || ctx.createPattern(backgroundImg, 'repeat');
-    fill = true;
-  } else {
-    let back: string | CanvasGradient | CanvasPattern;
-    if (pen.calculative.bkType === Gradient.Linear) {
-      if (pen.calculative.gradientColors) {
-        // if (!pen.type) {
-          //连线不考虑渐进背景
-          if (pen.calculative.gradient) {
-            //位置变化/放大缩小操作不会触发重新计算
-            back = pen.calculative.gradient;
-          } else {
-            back = getBkGradient(ctx, pen);
-            pen.calculative.gradient = back;
-          }
-        // }
-      } else {
-        back = drawBkLinearGradient(ctx, pen);
-      }
-    } else if (pen.calculative.bkType === Gradient.Radial) {
-      if (pen.calculative.gradientColors) {
-        if (pen.calculative.radialGradient) {
-          back = pen.calculative.radialGradient;
-        } else {
-          back = getBkRadialGradient(ctx, pen);
-          pen.calculative.radialGradient = back;
-        }
-      } else {
-        back = drawBkRadialGradient(ctx, pen);
-      }
-    } else {
-      back = pen.calculative.background || store.data.penBackground;
-    }
-    ctx.fillStyle = fill || back;
-    fill = !!back;
-  }
-  // }
-
-  setLineCap(ctx, pen);
-  setLineJoin(ctx, pen);
-
-  setGlobalAlpha(ctx, pen);
-
-  if (pen.calculative.lineDash) {
-    ctx.setLineDash(
-      pen.calculative.lineDash.map(
-        (item) => item * pen.calculative.canvas.store.data.scale
-      )
-    );
-  }
-  if (pen.calculative.lineDashOffset) {
-    ctx.lineDashOffset = pen.calculative.lineDashOffset;
-  }
-
-  if (pen.calculative.shadowColor) {
-    ctx.shadowColor = pen.calculative.shadowColor;
-    ctx.shadowOffsetX = pen.calculative.shadowOffsetX;
-    ctx.shadowOffsetY = pen.calculative.shadowOffsetY;
-    ctx.shadowBlur = pen.calculative.shadowBlur;
-  }
-  if (lineGradientFlag) {
-    ctxDrawLinearGradientPath(ctx, pen);
-    ctxDrawLinePath(true, ctx, pen, store);
-  } else {
-    ctxDrawPath(true, ctx, pen, store, fill);
-
-    ctxDrawCanvas(ctx, pen);
-  }
-  if (!(pen.image && pen.calculative.img) && pen.calculative.icon) {
-    drawIcon(ctx, pen);
-  }
-
-  if (!textFlip || !textRotate) {
-    ctx.restore();
-  }
-  if (textFlip && !textRotate) {
-    ctxFlip(ctx, pen);
-  }
-  if (!textFlip && textRotate) {
-    if (pen.calculative.rotate && pen.name !== 'line') {
-      ctxRotate(ctx, pen, true);
-    }
-  }
-
-  drawText(ctx, pen);
-  if (pen.type === PenType.Line && pen.fillTexts) {
-    for (const text of pen.fillTexts) {
-      drawFillText(ctx, pen, text);
-    }
-  }
-
-  ctx.restore();
-}
-
-/**
- * 更改 ctx 的 lineCap 属性
- */
-export function setLineCap(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const lineCap = pen.lineCap || (pen.type ? 'round' : 'square');
-  if (lineCap) {
-    ctx.lineCap = lineCap;
-  } else if (pen.type) {
-    ctx.lineCap = 'round';
-  }
-}
-
-/**
- * 更改 ctx 的 lineJoin 属性
- */
-export function setLineJoin(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const lineJoin = pen.lineJoin;
-  if (lineJoin) {
-    ctx.lineJoin = lineJoin;
-  } else if (pen.type) {
-    ctx.lineJoin = 'round';
-  }
-}
-
-/**
- * 通常用在下载 svg
- * canvas2svg 与 canvas ctx 设置 strokeStyle 表现不同
- * 若设置值为 undefined ，canvas2svg 为空， canvas ctx 为上一个值
- */
-export function renderPenRaw(
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  rect?: Rect,
-  download?: boolean
-) {
-  ctx.save();
-  if (rect) {
-    ctx.translate(-rect.x, -rect.y);
-  }
-
-  // for canvas2svg
-  (ctx as any).setAttrs?.(pen);
-  // end
-  let lineGradientFlag = false;
-  const store = pen.calculative.canvas.store;
-  const textFlip = pen.textFlip || store.options.textFlip;
-  const textRotate = pen.textRotate || store.options.textRotate;
-  ctx.beginPath();
-  if (!textFlip || !textRotate) {
-    ctx.save();
-  }
-  if (pen.calculative.flipX) {
-    if (rect) {
-      ctx.translate(
-        pen.calculative.worldRect.x + pen.calculative.worldRect.ex,
-        0
-      );
-    } else {
-      ctx.translate(
-        pen.calculative.worldRect.x + pen.calculative.worldRect.ex,
-        0
-      );
-    }
-    ctx.scale(-1, 1);
-  }
-  if (pen.calculative.flipY) {
-    if (rect) {
-      ctx.translate(
-        0,
-        pen.calculative.worldRect.y + pen.calculative.worldRect.ey
-      );
-    } else {
-      ctx.translate(
-        0,
-        pen.calculative.worldRect.y + pen.calculative.worldRect.ey
-      );
-    }
-    ctx.scale(1, -1);
-  }
-
-  if (pen.calculative.rotate && pen.name !== 'line') {
-    ctxRotate(ctx, pen);
-  }
-  if (pen.calculative.lineWidth > 1 || download) {
-    ctx.lineWidth = pen.calculative.lineWidth;
-  }
-  let fill: any;
-  if (pen.calculative.hover) {
-    ctx.strokeStyle = pen.hoverColor || store.options.hoverColor;
-    ctx.fillStyle = pen.hoverBackground || store.options.hoverBackground;
-    fill = pen.hoverBackground || store.options.hoverBackground;
-  } else if (pen.calculative.active) {
-    ctx.strokeStyle = pen.activeColor || store.options.activeColor;
-    ctx.fillStyle = pen.activeBackground || store.options.activeBackground;
-    fill = pen.activeBackground || store.options.activeBackground;
-  } else {
-    if (pen.strokeImage) {
-      if (pen.calculative.strokeImg) {
-        ctx.strokeStyle = ctx.createPattern(
-          pen.calculative.strokeImg,
-          'repeat'
-        );
-        fill = true;
-      }
-    } else {
-      let stroke: string | CanvasGradient | CanvasPattern;
-      if (pen.calculative.strokeType&&pen.calculative.lineGradientColors&&pen.name === 'line') {
-        lineGradientFlag = true;
-      } else {
-        stroke = pen.calculative.color || getGlobalColor(store);
-      }
-      ctx.strokeStyle = stroke;
-    }
-
-    if (pen.backgroundImage) {
-      if (pen.calculative.backgroundImg) {
-        ctx.fillStyle = ctx.createPattern(
-          pen.calculative.backgroundImg,
-          'repeat'
-        );
-        fill = true;
-      }
-    } else {
-      ctx.fillStyle = pen.background;
-      fill = !!pen.background;
-    }
-  }
-
-  setLineCap(ctx, pen);
-  setLineJoin(ctx, pen);
-
-  setGlobalAlpha(ctx, pen);
-
-  if (pen.calculative.lineDash) {
-    ctx.setLineDash(pen.calculative.lineDash);
-  }
-  if (pen.calculative.lineDashOffset) {
-    ctx.lineDashOffset = pen.calculative.lineDashOffset;
-  }
-
-  if (pen.calculative.shadowColor) {
-    ctx.shadowColor = pen.calculative.shadowColor;
-    ctx.shadowOffsetX = pen.calculative.shadowOffsetX;
-    ctx.shadowOffsetY = pen.calculative.shadowOffsetY;
-    ctx.shadowBlur = pen.calculative.shadowBlur;
-  }
-
-  if (lineGradientFlag) {
-    ctxDrawLinearGradientPath(ctx, pen);
-    ctxDrawLinePath(true, ctx, pen, store);
-  } else {
-    ctxDrawPath(false, ctx, pen, store, fill);
-
-    ctxDrawCanvas(ctx, pen);
-  }
-
-  // renderPenRaw 用在 downloadPng svg , echarts 等图形需要
-  if (pen.calculative.img) {
-    ctx.save();
-    ctx.shadowColor = '';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    drawImage(ctx, pen);
-    ctx.restore();
-  } else if (pen.calculative.icon) {
-    drawIcon(ctx, pen);
-  }
-
-  if (!textFlip || !textRotate) {
-    ctx.restore();
-  }
-
-  if (textFlip && !textRotate) {
-    if (pen.calculative.flipX) {
-      if (rect) {
-        ctx.translate(
-          pen.calculative.worldRect.x + pen.calculative.worldRect.ex,
-          0
-        );
-      } else {
-        ctx.translate(
-          pen.calculative.worldRect.x + pen.calculative.worldRect.ex,
-          0
-        );
-      }
-      ctx.scale(-1, 1);
-    }
-    if (pen.calculative.flipY) {
-      if (rect) {
-        ctx.translate(
-          0,
-          pen.calculative.worldRect.y + pen.calculative.worldRect.ey
-        );
-      } else {
-        ctx.translate(
-          0,
-          pen.calculative.worldRect.y + pen.calculative.worldRect.ey
-        );
-      }
-      ctx.scale(1, -1);
-    }
-  }
-  if (!textFlip && textRotate) {
-    if (pen.calculative.rotate && pen.name !== 'line') {
-      ctxRotate(ctx, pen, true);
-    }
-  }
-
-  drawText(ctx, pen);
-
-  if (pen.type === PenType.Line && pen.fillTexts) {
-    for (const text of pen.fillTexts) {
-      drawFillText(ctx, pen, text);
-    }
-  }
-
-  ctx.restore();
-}
-
-/**
- * 根据 path2D 绘制 path
- * @param canUsePath 是否可使用 Path2D, downloadSvg 不可使用 path2D
- */
-export function ctxDrawPath(
-  canUsePath = true,
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  store: Meta2dStore,
-  fill: boolean
-) {
-  const path = canUsePath
-    ? store.path2dMap.get(pen)
-    : globalStore.path2dDraws[pen.name];
-
-  let path_from = null;
-  let path_to = null;
-  if(pen.type === PenType.Line){
-    //线段的起始和结束线帽 分别配置
-    if( pen.fromLineCap && pen.fromLineCap !== 'butt'){
-      ctx.lineCap = 'butt';
-      path_from = new Path2D();
-      path_from.moveTo(pen.calculative.worldAnchors[0].x, pen.calculative.worldAnchors[0].y);
-      path_from.lineTo(pen.calculative.worldAnchors[0].x, pen.calculative.worldAnchors[0].y);
-    }
-    if( pen.toLineCap && pen.toLineCap !== 'butt'){
-      ctx.lineCap = 'butt';
-      path_to = new Path2D();
-      path_to.moveTo(pen.calculative.worldAnchors[pen.calculative.worldAnchors.length-1].x, pen.calculative.worldAnchors[pen.calculative.worldAnchors.length-1].y);
-      path_to.lineTo(pen.calculative.worldAnchors[pen.calculative.worldAnchors.length-1].x, pen.calculative.worldAnchors[pen.calculative.worldAnchors.length-1].y);
-    }
-  }
-  if (path) {
-    if (pen.type === PenType.Line && pen.borderWidth) {
-      ctx.save();
-      ctx.beginPath();
-      const lineWidth = pen.calculative.lineWidth + pen.calculative.borderWidth;
-      ctx.lineWidth = lineWidth;
-      ctx.strokeStyle = pen.borderColor;
-      if( path_from ){
-        ctx.save();
-        ctx.lineCap = pen.fromLineCap;
-        ctx.stroke(path_from);
-        ctx.restore();
-      }
-      if (path instanceof Path2D) {
-        fill && ctx.fill(path);
-        lineWidth && ctx.stroke(path);
-      } else {
-        path(pen, ctx);
-        fill && ctx.fill();
-        lineWidth && ctx.stroke();
-      }
-      if( path_to){
-        ctx.save();
-        ctx.lineCap = pen.toLineCap;
-        ctx.stroke(path_to);
-        ctx.restore();
-      }
-      ctx.restore();
-    }
-    if (path instanceof Path2D) {
-      if(pen.type){
-        if(pen.close){
-         fill && ctx.fill(path);
-        }
-      }else{
-        //svgPath
-        fill && ctx.fill(path);
-      }
-    } else {
-      ctx.save();
-      path(pen, ctx);
-      fill && ctx.fill();
-      ctx.restore();
-    }
-
-    const progress = pen.calculative.progress;
-    if (progress != null) {
-      // 从左往右 x, y, x + width * progress, y
-      // 从右往左 ex, y, x + width * (1-progress), y
-      // 从下往上 x, y, x, y + height * progress
-      // 从上往下 x, ey, x, y + height * (1 - progress)
-      ctx.save();
-      const { ex, x, y, width, height, ey } = pen.calculative.worldRect;
-      let grd = null;
-      if (!pen.verticalProgress) {
-        grd = !pen.reverseProgress
-          ? ctx.createLinearGradient(x, y, x + width * progress, y)
-          : ctx.createLinearGradient(ex, y, x + width * (1 - progress), y);
-      } else {
-        grd = !pen.reverseProgress
-          ? ctx.createLinearGradient(x, ey, x, y + height * (1 - progress))
-          : ctx.createLinearGradient(x, y, x, y + height * progress);
-      }
-
-      if (pen.calculative.progressGradientColors) {
-        const { colors } = formatGradient(
-          pen.calculative.progressGradientColors
-        );
-        colors.forEach((stop) => {
-          grd.addColorStop(stop.i, stop.color);
-        });
-      } else {
-        const color =
-          pen.calculative.progressColor ||
-          pen.calculative.color ||
-          store.options.activeColor;
-        grd.addColorStop(0, color);
-        grd.addColorStop(1, color);
-      }
-      grd.addColorStop(1, 'transparent');
-
-      ctx.fillStyle = grd;
-      if (path instanceof Path2D) {
-        ctx.fill(path);
-      } else {
-        path(pen, ctx);
-        ctx.fill();
-      }
-      ctx.restore();
-    }
-
-    if (pen.calculative.lineWidth) {
-      if (path instanceof Path2D) {
-        if(store.options.svgPathStroke || pen.name!=='svgPath'){
-          if(path_from){
-            ctx.save();
-            ctx.lineCap = pen.fromLineCap;
-            ctx.stroke(path_from);
-            ctx.restore();
-          }
-          ctx.stroke(path);
-          if( path_to ){
-            ctx.save();
-            ctx.lineCap = pen.toLineCap;
-            ctx.stroke(path_to);
-            ctx.restore();
-          }
-        }
-      } else {
-        path(pen, ctx);
-        ctx.stroke();
-      }
-    }
-
-    if (pen.type) {
-      if (pen.calculative.animatePos) {
-        ctx.save();
-        setCtxLineAnimate(ctx, pen, store);
-        if(pen.lineAnimateType === LineAnimateType.Arrow || pen.lineAnimateType === LineAnimateType.WaterDrop){
-          //箭头动画
-          let _path = drawArrow(pen,ctx);
-          if(_path instanceof Path2D){
-            ctx.stroke(_path);
-            ctx.fill(_path);
-          }else{
-            ctx.stroke();
-            ctx.fill();
-          }
-        }else{
-          if (path instanceof Path2D) {
-            if(path_from&&!pen.lineAnimateType){
-              ctx.save();
-              ctx.lineCap = pen.fromLineCap;
-              ctx.stroke(path_from);
-              ctx.restore();
-            }
-            ctx.lineCap = pen.lineCap;
-            ctx.stroke(path);
-                      } else {
-            path(pen, ctx);
-            ctx.stroke();
-          }
-        }
-        ctx.restore();
-      }
-
-      pen.fromArrow && renderFromArrow(ctx, pen, store);
-      pen.toArrow && renderToArrow(ctx, pen, store);
-
-      if (pen.calculative.active && !pen.calculative.pencil && !store.options.disableAnchor && !store.data.locked) {
-        renderLineAnchors(ctx, pen);
-      }
-    }
-  }
-}
-
-/**
- * 连线配置线条渐进后，动画效果、起始点、终点的绘制
- */
-export function ctxDrawLinePath(
-  canUsePath = true,
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  store: Meta2dStore
-) {
-  const path = canUsePath
-    ? store.path2dMap.get(pen)
-    : globalStore.path2dDraws[pen.name];
-  if (path) {
-    if (pen.type) {
-      if (pen.calculative.animatePos) {
-        ctx.save();
-        setCtxLineAnimate(ctx, pen, store);
-        ctx.beginPath();
-        if (path instanceof Path2D) {
-          if(pen.lineName === 'polyline' || pen.lineName === 'line'){
-            if(pen.lineAnimateType === LineAnimateType.Arrow || pen.lineAnimateType === LineAnimateType.WaterDrop){
-              //箭头动画
-              const _path = drawArrow(pen);
-              ctx.stroke(_path);
-              ctx.fill(_path);
-            }else{
-              if(pen.calculative.gradientSmooth || pen.calculative.lineSmooth){
-                if (!pen.calculative.gradientAnimatePath) {
-                  pen.calculative.gradientAnimatePath = getGradientAnimatePath(pen);
-                }
-                if (pen.calculative.gradientAnimatePath instanceof Path2D) {
-                  ctx.stroke(pen.calculative.gradientAnimatePath);
-                }
-              }else{
-                ctx.stroke(path);
-              }
-            }
-          }else {
-            ctx.stroke(path);
-          }
-        } else {
-          path(pen, ctx);
-          ctx.stroke();
-        }
-        ctx.restore();
-      }
-
-      pen.fromArrow && renderFromArrow(ctx, pen, store);
-      pen.toArrow && renderToArrow(ctx, pen, store);
-      //TODO 锚点处渐进色的过渡
-      if (pen.calculative.active && !pen.calculative.pencil && !store.options.disableAnchor && !store.data.locked) {
-        renderLineAnchors(ctx, pen);
-      }
-    }
-  }
-}
-
-/**
- * 设置线条动画，ctx 的 strokeStyle lineDash 等属性更改
- */
-export function setCtxLineAnimate(
-  ctx: CanvasRenderingContext2D,
-  pen: Pen,
-  store: Meta2dStore
-) {
-  ctx.strokeStyle = pen.animateColor || store.options.animateColor;
-  if(pen.animateShadow){
-    ctx.shadowBlur = pen.animateShadowBlur || pen.animateLineWidth || 6;
-    ctx.shadowColor = pen.animateShadowColor || pen.animateColor || store.options.animateColor;
-  }
-  pen.calculative.animateLineWidth &&
-    (ctx.lineWidth = pen.calculative.animateLineWidth * store.data.scale);
-  let len = 0;
-  switch (pen.lineAnimateType) {
-    case LineAnimateType.Beads:
-      if (pen.animateReverse) {
-        ctx.lineDashOffset = pen.calculative.animatePos;
-      } else {
-        ctx.lineDashOffset = pen.length - pen.calculative.animatePos;
-      }
-      len = pen.calculative.lineWidth || 5;
-      if (len < 5) {
-        len = 5;
-      }
-      const dash =
-        pen.animateLineDash &&
-        pen.animateLineDash.map((item) => (item * len) / 5);
-      ctx.setLineDash(dash || [len, len * 2]);
-      break;
-    case LineAnimateType.Dot:
-      if (pen.animateReverse) {
-        ctx.lineDashOffset = pen.calculative.animatePos;
-      } else {
-        ctx.lineDashOffset = pen.length - pen.calculative.animatePos;
-      }
-      len =
-        pen.calculative.animateDotSize || pen.calculative.lineWidth * 2 || 6;
-      if (len < 6) {
-        len = 6;
-      }
-      if(len > 40){
-        len = 40;
-      }
-      ctx.lineWidth =
-        (pen.calculative.animateLineWidth || len) * store.data.scale;
-      ctx.setLineDash([0.1, pen.length]);
-      break;
-    case LineAnimateType.Arrow:
-      ctx.fillStyle =   pen.animateColor || store.options.animateColor;
-      ctx.lineWidth = 1;
-      break;
-    case LineAnimateType.WaterDrop:
-      ctx.fillStyle =   pen.animateColor || store.options.animateColor;
-      ctx.lineWidth = 1;
-      break;
-    default:
-      if (pen.animateReverse) {
-        ctx.lineDashOffset = Number.EPSILON;//防止在执行动画时会绘制多余的远点
-        ctx.setLineDash([
-          0,
-          pen.length - pen.calculative.animatePos + 1,
-          pen.calculative.animatePos,
-        ]);
-      } else {
-        ctx.setLineDash([
-          pen.calculative.animatePos,
-          pen.length + 0.01 - pen.calculative.animatePos,//避免在缩放时，精度问题绘制多余圆点
-        ]);
-      }
-      break;
-  }
-}
-
-/**
- * 全局 color
- */
-export function getGlobalColor(store: Meta2dStore) {
-  const { data, options } = store;
-  return data.color || options.color;
-}
-
-export function renderLineAnchors(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const store = pen.calculative.canvas.store;
-
-  ctx.save();
-  ctx.lineWidth = 1;
-  ctx.fillStyle = pen.activeColor || store.options.activeColor;
-  pen.calculative.worldAnchors.forEach((pt) => {
-    !pt.hidden && !pt.isTemp && renderAnchor(ctx, pt, pen);
-  });
-  ctx.restore();
-}
-
-export function renderAnchor(
-  ctx: CanvasRenderingContext2D,
-  pt: Point,
-  pen: Pen
-) {
-  if (!pt) {
-    return;
-  }
-
-  const active =
-    pen.calculative.canvas.store.activeAnchor ===
-      pen.calculative.activeAnchor && pen.calculative.activeAnchor === pt;
-  let r = 3;
-  if (pen.calculative.lineWidth > 3) {
-    r = pen.calculative.lineWidth;
-  }
-  if (pen.anchorRadius) {
-    r = pen.anchorRadius;
-  }
-  if (pt.radius) {
-    r = pt.radius;
-  }
-  if (active) {
-    if (pt.prev) {
-      ctx.save();
-      ctx.strokeStyle = '#4dffff';
-      ctx.beginPath();
-      ctx.moveTo(pt.prev.x, pt.prev.y);
-      ctx.lineTo(pt.x, pt.y);
-      ctx.stroke();
-      ctx.restore();
-
-      ctx.save();
-      ctx.fillStyle = '#ffffff';
-      ctx.beginPath();
-      ctx.arc(pt.prev.x, pt.prev.y, r, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-    }
-    if (pt.next) {
-      ctx.save();
-      ctx.strokeStyle = '#4dffff';
-      ctx.beginPath();
-      ctx.moveTo(pt.x, pt.y);
-      ctx.lineTo(pt.next.x, pt.next.y);
-      ctx.stroke();
-      ctx.restore();
-
-      ctx.save();
-      ctx.fillStyle = '#ffffff';
-      ctx.beginPath();
-      ctx.arc(pt.next.x, pt.next.y, r, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.stroke();
-      ctx.restore();
-
-      ctx.beginPath();
-      ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.stroke();
-    }
-
-    ctx.beginPath();
-    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-  } else {
-    ctx.save();
-    ctx.fillStyle = '#ffffff';
-    ctx.beginPath();
-    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-    ctx.restore();
-  }
-}
-
-export function calcWorldRects(pen: Pen) {
-  const store: Meta2dStore = pen.calculative.canvas.store;
-
-  let rect: Rect = {
-    x: pen.x,
-    y: pen.y,
-  };
-
-  if (!pen.parentId || (pen.parentId && !store.pens[pen.parentId])) {
-    pen.parentId = undefined;
-    rect.width = pen.width;
-    rect.height = pen.height;
-    rect.rotate = pen.rotate;
-    calcRightBottom(rect);
-    calcCenter(rect);
-    if(pen.pivot){
-      calcPivot(rect, pen.pivot);
-    }
-  } else {
-    const parent = store.pens[pen.parentId];
-    let parentRect = parent.calculative.worldRect;
-    if (!parentRect) {
-      parentRect = calcWorldRects(parent);
-    }
-
-    rect.x = parentRect.x + parentRect.width * pen.x;
-    rect.y = parentRect.y + parentRect.height * pen.y;
-    rect.width = parentRect.width * pen.width;
-    rect.height = parentRect.height * pen.height;
-    if (parent.flipX) {
-      rect.x =
-        parentRect.width - (rect.x - parentRect.x + rect.width) + parentRect.x;
-    }
-    if (parent.flipY) {
-      rect.y =
-        parentRect.height -
-        (rect.y - parentRect.y + rect.height) +
-        parentRect.y;
-    }
-
-    calcRightBottom(rect);
-
-    rect.rotate = parentRect.rotate + pen.rotate;
-    calcCenter(rect);
-    if(pen.pivot){
-      calcPivot(rect, pen.pivot);
-    }
-  }
-
-  pen.calculative.worldRect = rect;
-  // 这里的 rect 均是绝对值
-  calcPadding(pen, rect);
-
-  return rect;
-}
-
-export function calcPadding(pen: Pen, rect: Rect) {
-  !pen.paddingTop && (pen.calculative.paddingTop = 0);
-  !pen.paddingBottom && (pen.calculative.paddingBottom = 0);
-  !pen.paddingLeft && (pen.calculative.paddingLeft = 0);
-  !pen.paddingRight && (pen.calculative.paddingRight = 0);
-
-  Math.abs(pen.calculative.paddingTop) < 1 &&
-    (pen.calculative.paddingTop *= rect.height);
-  Math.abs(pen.calculative.paddingBottom) < 1 &&
-    (pen.calculative.paddingBottom *= rect.height);
-  Math.abs(pen.calculative.paddingLeft) < 1 &&
-    (pen.calculative.paddingLeft *= rect.width);
-  Math.abs(pen.calculative.paddingRight) < 1 &&
-    (pen.calculative.paddingRight *= rect.width);
-}
-
-export function calcPenRect(pen: Pen) {
-  const worldRect = deepClone(pen.calculative.worldRect);
-  delete worldRect.pivot;
-  if (!pen.parentId) {
-    Object.assign(pen, worldRect);
-    return;
-  }
-  const store = pen.calculative.canvas.store;
-  const parentRect = store.pens[pen.parentId].calculative.worldRect;
-  Object.assign(pen, calcRelativeRect(worldRect, parentRect));
-}
-
-export function calcWorldAnchors(pen: Pen) {
-  const store: Meta2dStore = pen.calculative.canvas.store;
-  let anchors: Point[] = [];
-  if (pen.anchors) {
-    let _anchors = deepClone(pen.anchors);
-    if (pen.flipX) {
-      _anchors.forEach((anchor) => {
-        anchor.x = 0.5 - (anchor.x - 0.5);
-      });
-    }
-    if (pen.flipY) {
-      _anchors.forEach((anchor) => {
-        anchor.y = 0.5 - (anchor.y - 0.5);
-      });
-    }
-    _anchors.forEach((anchor) => {
-      anchors.push(calcWorldPointOfPen(pen, anchor));
-    });
-  }
-
-  // Default anchors of node
-  if (
-    !anchors.length &&
-    !pen.type &&
-    !pen.calculative.canvas.parent.isCombine(pen)
-  ) {
-    const { x, y, width, height } = pen.calculative.worldRect;
-    anchors = store.options.defaultAnchors.map((anchor, index) => {
-      return {
-        id: `${index}`,
-        penId: pen.id,
-        x: x + width * anchor.x,
-        y: y + height * anchor.y,
-      };
-    });
-  }
-
-  if (pen.calculative.rotate) {
-    anchors.forEach((anchor) => {
-      rotatePoint(
-        anchor,
-        pen.calculative.rotate,
-        pen.calculative.worldRect.pivot || pen.calculative.worldRect.center
-      );
-    });
-  }
-
-  if (!pen.type || pen.anchors) {
-    pen.calculative.worldAnchors = anchors;
-  }
-
-  if (pen.calculative.activeAnchor && anchors.length) {
-    pen.calculative.activeAnchor = anchors.find((a) => {
-      a.id === pen.calculative.activeAnchor.id;
-    });
-  }
-
-  pen.calculative.gradientAnimatePath = undefined;
-}
-
-export function calcChildrenInitRect(pen:Pen){
-  // 重新计算子节点初始化坐标
-  if (pen.children?.length) {
-    let parentRect = pen.calculative.worldRect;
-    pen.children.forEach((id) => {
-      const child = pen.calculative.canvas.store.pens[id];
-      if (child.calculative.initRect && child.calculative.initRelativeRect) {
-        child.calculative.initRect.x =
-          parentRect.x +
-          parentRect.width * child.calculative.initRelativeRect.x;
-        child.calculative.initRect.y =
-          parentRect.y +
-          parentRect.height * child.calculative.initRelativeRect.y;
-        child.calculative.initRect.ex =
-          child.calculative.initRect.x +
-          parentRect.width * child.calculative.initRelativeRect.width;
-        child.calculative.initRect.ey =
-          child.calculative.initRect.y +
-          parentRect.height +
-          child.calculative.initRelativeRect.height;
-        calcCenter(child.calculative.initRect);
-      }
-      calcChildrenInitRect(child);
-    });
-  }
-}
-
-export function calcWorldPointOfPen(pen: Pen, pt: Point) {
-  const p: Point = { ...pt };
-  const { x, y, width, height } = pen.calculative.worldRect;
-  p.x = x + width * pt.x;
-  p.y = y + height * pt.y;
-  if (pt.prev) {
-    p.prev = {
-      penId: pen.id,
-      connectTo: pt.prev.connectTo,
-      x: x + width * pt.prev.x,
-      y: y + height * pt.prev.y,
-    };
-  }
-  if (pt.next) {
-    p.next = {
-      penId: pen.id,
-      connectTo: pt.next.connectTo,
-      x: x + width * pt.next.x,
-      y: y + height * pt.next.y,
-    };
-  }
-
-  return p;
-}
-
-export function calcIconRect(pens: { [key: string]: Pen }, pen: Pen) {
-  const { paddingTop, paddingBottom, paddingLeft, paddingRight } =
-    pen.calculative;
-  let x = paddingLeft;
-  let y = paddingTop;
-  let width = pen.calculative.worldRect.width - paddingLeft - paddingRight;
-  let height = pen.calculative.worldRect.height - paddingTop - paddingBottom;
-  let iconLeft = pen.calculative.iconLeft;
-  let iconTop = pen.calculative.iconTop;
-  if (iconLeft && Math.abs(iconLeft) < 1) {
-    iconLeft = pen.calculative.worldRect.width * iconLeft;
-  }
-
-  if (iconTop && Math.abs(iconTop) < 1) {
-    iconTop = pen.calculative.worldRect.height * iconTop;
-  }
-  x += iconLeft || 0;
-  y += iconTop || 0;
-  width -= iconLeft || 0;
-  height -= iconTop || 0;
-
-  let rotate = pen.calculative.iconRotate || 0;
-  if (pen.parentId) {
-    const parentPen = pens[pen.parentId].calculative;
-    if (parentPen) {
-      rotate += parentPen.rotate;
-      rotate %= 360;
-    }
-  }
-
-  x = pen.calculative.worldRect.x + x;
-  y = pen.calculative.worldRect.y + y;
-  pen.calculative.worldIconRect = {
-    x,
-    y,
-    width,
-    height,
-    rotate,
-  };
-  calcRightBottom(pen.calculative.worldIconRect);
-  calcCenter(pen.calculative.worldIconRect);
-}
-
-export function scalePen(pen: Pen, scale: number, center: Point) {
-  scaleRect(pen.calculative.worldRect, scale, center, pen.pivot);
-
-  if (pen.calculative.initRect) {
-    scaleRect(pen.calculative.initRect, scale, center, pen.pivot);
-  }
-  scaleChildrenInitRect(pen, scale, center);
-  if (pen.calculative.x) {
-    scalePoint(pen.calculative as any as Point, scale, center);
-  }
-
-  if (pen.type) {
-    calcWorldAnchors(pen);
-  }
-}
-
-export function scaleChildrenInitRect(pen: Pen, scale: number, center: Point) {
-  if(!pen){
-    return;
-  }
-  if (pen.children?.length) {
-    pen.children.forEach((id) => {
-      const child = pen.calculative.canvas.store.pens[id];
-      if(child){
-        if ( child.calculative.initRect ) {
-          scaleRect(
-            child.calculative.initRect,
-            scale,
-            center
-          );
-        }
-        scaleChildrenInitRect(child, scale, center);
-      }
-    });
-  }
-}
-
-export function pushPenAnchor(pen: Pen, pt: Point) {
-  if (!pen.anchors) {
-    pen.anchors = [];
-  }
-  if (!pen.calculative.worldAnchors) {
-    pen.calculative.worldAnchors = [];
-  }
-
-  const worldAnchor = {
-    id: pt.id,
-    penId: pen.id,
-    x: pt.x,
-    y: pt.y,
-  };
-  pen.calculative.worldAnchors.push(worldAnchor);
-
-  if (pen.calculative.worldRect) {
-    if (pen.rotate % 360) {
-      rotatePoint(pt, -pen.rotate, pen.calculative.worldRect.center);
-    }
-
-    const anchor = {
-      id: pt.id,
-      penId: pen.id,
-      x: (pt.x - pen.calculative.worldRect.x) / pen.calculative.worldRect.width,
-      y:
-        (pt.y - pen.calculative.worldRect.y) / pen.calculative.worldRect.height,
-    };
-    pen.anchors.push(anchor);
-  }
-
-  return worldAnchor;
-}
-
-export function addLineAnchor(pen: Pen, pt: Point, index: number) {
-  if (!pen.anchors) {
-    pen.anchors = [];
-  }
-  if (!pen.calculative.worldAnchors) {
-    pen.calculative.worldAnchors = [];
-  }
-
-  const worldAnchor = getSplitAnchor(pen, pt, index);
-  pen.calculative.worldAnchors.splice(index + 1, 0, worldAnchor);
-  pen.anchors.splice(
-    index + 1,
-    0,
-    calcRelativePoint(worldAnchor, pen.calculative.worldRect)
-  );
-  pen.calculative.activeAnchor = worldAnchor;
-  return worldAnchor;
-}
-
-export function removePenAnchor(pen: Pen, anchor: Point) {
-  if (!pen || !pen.calculative.worldAnchors) {
-    return;
-  }
-  let i = pen.calculative.worldAnchors.findIndex((a) => a.id === anchor.id);
-  if (i > -1) {
-    pen.calculative.worldAnchors.splice(i, 1);
-  }
-
-  i = pen.anchors.findIndex((a) => a.id === anchor.id);
-  if (i > -1) {
-    pen.anchors.splice(i, 1);
-  }
-}
-
-export function facePen(pt: Point, pen?: Pen) {
-  if (!pen || !pen.calculative || !pen.calculative.worldRect.center) {
-    return Direction.None;
-  }
-  if (pt.anchorId) {
-    let anchor = pen.anchors.filter((_anchor) => _anchor.id === pt.anchorId);
-    if (anchor.length) {
-      if (anchor[0].direction > -1) {
-        return anchor[0].direction;
-      }
-    }
-  }
-  return facePoint(pt, pen.calculative.worldRect.center);
-}
-
-export function nearestAnchor(pen: Pen, pt: Point) {
-  let dis = Infinity;
-  let anchor: Point;
-  pen.calculative.worldAnchors.forEach((a: Point) => {
-    const d = distance(pt, a);
-    if (dis > d) {
-      dis = d;
-      anchor = a;
-    }
-  });
-
-  return anchor;
-}
-
-export function translateLine(pen: Pen, x: number, y: number) {
-  pen.x += x;
-  pen.y += y;
-
-  if (pen.anchors) {
-    pen.anchors.forEach((a) => {
-      translatePoint(a, x, y);
-    });
-  }
-
-  if (pen.calculative.worldAnchors) {
-    pen.calculative.worldAnchors.forEach((a) => {
-      translatePoint(a, x, y);
-    });
-  }
-}
-
-export function deleteTempAnchor(pen: Pen) {
-  if (pen && pen.calculative && pen.calculative.worldAnchors.length) {
-    let to: Point = getToAnchor(pen);
-
-    // 第一次画线
-    if (!pen.anchors || !pen.anchors.length) {
-      while (
-        pen.calculative.worldAnchors.length &&
-        to !== pen.calculative.activeAnchor
-      ) {
-        pen.calculative.worldAnchors.pop();
-        to = getToAnchor(pen);
-      }
-    }
-    // 拖拽终点
-    else if (to === pen.calculative.activeAnchor) {
-      pen.calculative.worldAnchors = [pen.calculative.worldAnchors[0]];
-    }
-    // 拖拽起点
-    else if (pen.calculative.worldAnchors[0] === pen.calculative.activeAnchor) {
-      pen.calculative.worldAnchors = [
-        pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1],
-      ];
-    }
-  }
-}
-
-/**
- * 添加line到pen的connectedLines中，并关联相关属性
- * 不添加连线到画布中，请确保画布中已经有该连线。
- * */
-export function connectLine(
-  pen: Pen,
-  anchor: Point,
-  line: Pen,
-  lineAnchor: Point
-) {
-  if (
-    !pen ||
-    !anchor ||
-    !line ||
-    !lineAnchor ||
-    anchor.twoWay === TwoWay.DisableConnected ||
-    anchor.twoWay === TwoWay.Disable ||
-    lineAnchor.twoWay === TwoWay.DisableConnectTo ||
-    lineAnchor.twoWay === TwoWay.Disable
-  ) {
-    return;
-  }
-
-  if (anchor.twoWay === TwoWay.In) {
-    if (line.calculative.worldAnchors.length === 1) {
-      return;
-    }
-    const to = getToAnchor(line);
-    if (lineAnchor.id !== to.id) {
-      return;
-    }
-  }
-
-  if (anchor.twoWay === TwoWay.Out) {
-    const from = getFromAnchor(line);
-    if (lineAnchor.id !== from.id) {
-      return;
-    }
-  }
-
-  if (lineAnchor.connectTo === pen.id && lineAnchor.anchorId === anchor.id) {
-    return;
-  }
-
-  if (lineAnchor.connectTo) {
-    const p = pen.calculative.canvas.store.pens[lineAnchor.connectTo];
-    disconnectLine(p, getAnchor(p, lineAnchor.anchorId), line, lineAnchor);
-  }
-
-  if (!pen.connectedLines) {
-    pen.connectedLines = [];
-  }
-
-  const i = pen.connectedLines.findIndex(
-    (item) =>
-      item.lineId === line.id &&
-      item.lineAnchor === lineAnchor.id &&
-      item.anchor === anchor.id
-  );
-
-  if (i < 0) {
-    pen.connectedLines.push({
-      lineId: line.id,
-      lineAnchor: lineAnchor.id,
-      anchor: anchor.id,
-    });
-  }
-
-  lineAnchor.connectTo = pen.id;
-  lineAnchor.anchorId = anchor.id;
-
-  // 如果两条连线，则相互关联
-  if (pen.type) {
-    connectLine(line, lineAnchor, pen, anchor);
-  }
-
-  pen.calculative.canvas.store.emitter.emit('connectLine', {
-    line,
-    lineAnchor,
-    pen,
-    anchor,
-  });
-  // 新增连线生命周期
-  let fromPen = (line.calculative.worldAnchors?.length >= 2)? line.calculative.worldAnchors?.[0].connectTo : undefined;
-  let fromAnchor = (line.calculative.worldAnchors?.length >= 2)?line.calculative.canvas.store.pens[line.calculative.worldAnchors?.[0].connectTo]?.anchors.find(i=>i.id === line.calculative.worldAnchors?.[0].anchorId): undefined; // num
-  pen.onConnectLine?.(pen,{line,lineAnchor,pen,anchor,fromPen,fromAnchor});
-  return true;
-}
-
-/**
- * 从 pen.connectedLines 中删除 lineId 和 lineAnchor
- */
-export function disconnectLine(
-  pen: Pen,
-  anchor: Point,
-  line: Pen,
-  lineAnchor: Point
-) {
-  if (!pen || !anchor || !line || !lineAnchor) {
-    return;
-  }
-
-  if (!pen.connectedLines || !pen.connectedLines.length) {
-    return;
-  }
-
-  if (!line.lastConnected) {
-    line.lastConnected = {};
-  }
-  if (!line.lastConnected[pen.id]) {
-    line.lastConnected[pen.id] = deepClone(pen.connectedLines);
-  }
-  pen.connectedLines.forEach((item, index, arr) => {
-    if (
-      (item.lineId === line.id || item.lineId === line.id) &&
-      item.lineAnchor === lineAnchor.id &&
-      item.anchor === anchor.id
-    ) {
-      arr.splice(index, 1);
-    }
-  });
-
-  lineAnchor.connectTo = undefined;
-  lineAnchor.anchorId = undefined;
-  // 如果两条连线相互关联，则都取消关联
-  if (
-    pen.type &&
-    anchor.connectTo === line.id &&
-    anchor.anchorId === lineAnchor.id
-  ) {
-    disconnectLine(line, lineAnchor, pen, anchor);
-  }
-
-  pen.calculative.canvas.store.emitter.emit('disconnectLine', {
-    line,
-    lineAnchor,
-    pen,
-    anchor,
-  });
-
-  return true;
-}
-
-export function getAnchor(pen: Pen, anchorId: string) {
-  if (!pen || !anchorId) {
-    return;
-  }
-
-  return pen.calculative.worldAnchors?.find((item) => item.id === anchorId);
-}
-
-export function getFromAnchor(pen: Pen) {
-  if (!pen || !pen.calculative.worldAnchors) {
-    return;
-  }
-
-  return pen.calculative.worldAnchors[0];
-}
-
-export function getToAnchor(pen: Pen) {
-  if (!pen || !pen.calculative.worldAnchors) {
-    return;
-  }
-
-  return pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1];
-}
-
-export function setNodeAnimate(pen: Pen, now: number) {
-  if (pen.calculative.start === 0 || !pen.frames || !pen.frames.length) {
-    pen.calculative.start = undefined;
-    return 0;
-  }
-  if (!pen.calculative.duration) {
-    pen.calculative.duration = 0;
-    for (const f of pen.frames) {
-      pen.calculative.duration += f.duration;
-      for (const k in f) {
-        if (k !== 'duration' && !pen[k]) {
-          if (k === 'scale') {
-            pen[k] = 1;
-          }
-        }
-      }
-    }
-  }
-  if (!pen.animateCycle) {
-    pen.animateCycle = Infinity;
-  }
-
-  if (!pen.calculative.start) {
-    pen.calculative.start = now;
-    pen.calculative.frameIndex = 0;
-    pen.calculative.frameStart = pen.calculative.start;
-    pen.calculative.frameDuration = pen.frames[0].duration;
-    pen.calculative.frameEnd =
-      pen.calculative.frameStart + pen.calculative.frameDuration;
-    pen.calculative.cycleIndex = 1;
-    pen.calculative.x = pen.calculative.worldRect.x;
-    pen.calculative.y = pen.calculative.worldRect.y;
-    pen.calculative.initRect = deepClone(pen.calculative.worldRect);
-    if (pen.parentId) {
-      pen.calculative.initRelativeRect = {
-        x: pen.x,
-        y: pen.y,
-        width: pen.width,
-        height: pen.height,
-      };
-    }
-    if (pen.children?.length) {
-      const store = pen.calculative.canvas.store;
-      pen.calculative.childrenVisible = {};
-      pen.children.forEach((id) => {
-        pen.calculative.childrenVisible[id] = store.pens[id].visible;
-      });
-    }
-    pen.calculative.initRect.rotate = pen.calculative.rotate || 0;
-
-    initPrevFrame(pen);
-  } else {
-    let frameIndex = 0;
-    const cycleIndex = Math.ceil(
-      (now - pen.calculative.start) / pen.calculative.duration
-    );
-    // 播放结束
-    if (cycleIndex > pen.animateCycle) {
-      pen.currentAnimation = undefined;
-      pen.calculative.start = undefined;
-      setNodeAnimateProcess(pen, 1);
-      return 0;
-    }
-
-    const pos = (now - pen.calculative.start) % pen.calculative.duration;
-    let d = 0;
-    for (const frame of pen.frames) {
-      d += frame.duration;
-      if (pos > d) {
-        ++frameIndex;
-      } else {
-        break;
-      }
-    }
-    // 帧超出
-    if (!pen.frames[frameIndex]) {
-      return true;
-    }
-
-    pen.calculative.frameDuration = pen.frames[frameIndex].duration;
-    pen.calculative.frameStart =
-      pen.calculative.start + pen.calculative.duration * (cycleIndex - 1);
-    pen.calculative.frameEnd =
-      pen.calculative.frameStart + pen.calculative.frameDuration;
-
-    // 换帧
-    const frameChanged = frameIndex !== pen.calculative.frameIndex;
-    // 新循环播放
-    const cycleChanged = cycleIndex > pen.calculative.cycleIndex;
-
-    frameChanged && (pen.calculative.frameIndex = frameIndex);
-    cycleChanged && (pen.calculative.cycleIndex = cycleIndex);
-
-    if (frameChanged || cycleChanged) {
-      // 以初始位置为参考点。因为网页在后台时，不执行动画帧，网页恢复显示时，位置不确定
-      pen.calculative.x = pen.calculative.initRect.x;
-      pen.calculative.y = pen.calculative.initRect.y;
-      if (pen.children?.length && !pen.parentId) {
-        pen.calculative.canvas.rotatePen(
-          pen,
-          (pen.calculative.initRect.rotate || 0) - (pen.calculative.rotate||0),
-          pen.calculative.initRect
-        );
-      } else {
-        pen.calculative.rotate = pen.calculative.initRect.rotate || 0;
-      }
-      if (frameIndex > 0) {
-        pen.prevFrame = {};
-        const prevFrame = pen.frames[frameIndex - 1];
-        for (const k in prevFrame) {
-          pen.prevFrame[k] = prevFrame[k];
-        }
-        Object.assign(pen.prevFrame, {
-          rotate: prevFrame.rotate || 0,
-          x: prevFrame.x || 0,
-          y: prevFrame.y || 0,
-          scale: prevFrame.scale || 1,
-        });
-      } else {
-        initPrevFrame(pen);
-      }
-    }
-  }
-
-  const process =
-    ((now - pen.calculative.frameStart) / pen.calculative.frameDuration) % 1;
-  setNodeAnimateProcess(pen, process);
-
-  return true;
-}
-
-// 把前一个动画帧初始化为播放前状态
-export function initPrevFrame(pen: Pen) {
-  pen.prevFrame = {};
-  for (const k in pen) {
-    if (typeof pen[k] !== 'object' || k === 'lineDash') {
-      pen.prevFrame[k] = pen[k];
-    }
-  }
-  pen.prevFrame.rotate = 0;
-  pen.prevFrame.x = 0;
-  pen.prevFrame.y = 0;
-  pen.prevFrame.scale = 1;
-}
-
-// 根据process进度值（纯小数），计算节点动画属性
-export function setNodeAnimateProcess(pen: Pen, process: number) {
-  if (process < 0) {
-    return;
-  }
-
-  if (process > 1) {
-    process = 1;
-  }
-
-  const frame = pen.frames[pen.calculative.frameIndex];
-  for (const k in frame) {
-    if (k === 'duration') {
-      continue;
-    } else if (k === 'scale') {
-      pen.calculative.worldRect = deepClone(pen.calculative.initRect);
-      scaleRect(
-        pen.calculative.worldRect,
-        pen.prevFrame.scale,
-        pen.calculative.worldRect.center
-      );
-      const newScale =
-        pen.prevFrame.scale + (frame[k] - pen.prevFrame.scale) * process;
-      scaleRect(
-        pen.calculative.worldRect,
-        newScale / pen.prevFrame.scale,
-        pen.calculative.worldRect.center
-      );
-      pen.calculative.patchFlags = true;
-    } else if (k === 'x') {
-      const lastVal = getFrameValue(pen, k, pen.calculative.frameIndex);
-      pen.calculative.worldRect.x = pen.calculative.initRect.x + lastVal;
-      pen.calculative.worldRect.ex = pen.calculative.initRect.ex + lastVal;
-      translateRect(
-        pen.calculative.worldRect,
-        frame[k] * process * pen.calculative.canvas.store.data.scale,
-        0
-      );
-      pen.calculative.patchFlags = true;
-    } else if (k === 'y') {
-      const lastVal = getFrameValue(pen, k, pen.calculative.frameIndex);
-      pen.calculative.worldRect.y = pen.calculative.initRect.y + lastVal;
-      pen.calculative.worldRect.ey = pen.calculative.initRect.ey + lastVal;
-      translateRect(
-        pen.calculative.worldRect,
-        0,
-        frame[k] * process * pen.calculative.canvas.store.data.scale
-      );
-      pen.calculative.patchFlags = true;
-    } else if (k === 'rotate') {
-      if (pen.prevFrame[k] >= 360) {
-        pen.prevFrame[k] %= 360;
-      }
-      const lastVal = getFrameValue(pen, k, pen.calculative.frameIndex);
-      const offsetRotate =
-        ((pen.calculative.initRect.rotate + lastVal + frame[k] * process) %
-          360) -
-        (pen.calculative.rotate || 0);
-      if (pen.children?.length) {
-        pen.calculative.canvas.rotatePen(
-          pen,
-          offsetRotate,
-          pen.calculative.initRect
-        );
-      } else {
-        pen.calculative.rotate =
-          (pen.calculative.initRect.rotate + lastVal + frame[k] * process) %
-          360;
-      }
-      pen.calculative.patchFlags = true;
-    } else if (k === 'image') {
-      pen.image = frame['image'];
-      pen.calculative.image = undefined;
-      pen.calculative.canvas.loadImage(pen);
-      // if (pen.isBottom) {
-      //   pen.calculative.canvas.canvasImageBottom.init();
-      // } else {
-      //   pen.calculative.canvas.canvasImage.init();
-      // }
-      if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
-        pen.calculative.canvas.canvasImageBottom.init();
-      } else if (pen.canvasLayer === CanvasLayer.CanvasImage) {
-        pen.calculative.canvas.canvasImage.init();
-      }
-    } else if (isLinear(frame[k], k, pen)) {
-      if (pen.prevFrame[k] == null) {
-        if (k === 'globalAlpha') {
-          pen.prevFrame[k] = 1;
-        } else {
-          pen.prevFrame[k] = 0;
-        }
-      }
-
-      const current =
-        pen.prevFrame[k] + (frame[k] - pen.prevFrame[k]) * process;
-      pen.calculative[k] = Math.round(current * 100) / 100;
-    } else {
-      if (k === 'visible') {
-        if (pen.calculative.image) {
-          // if (pen.isBottom) {
-          //   pen.calculative.canvas.canvasImageBottom.init();
-          // } else {
-          //   pen.calculative.canvas.canvasImage.init();
-          // }
-          if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
-            pen.calculative.canvas.canvasImageBottom.init();
-          } else if (pen.canvasLayer === CanvasLayer.CanvasImage) {
-            pen.calculative.canvas.canvasImage.init();
-          }
-        } else if(pen.children?.length) {
-          const childs = getAllChildren(pen, pen.calculative.canvas.store);
-          pen.calculative.canvas.initImageCanvas(childs);
-        }
-      }
-      pen.calculative[k] = frame[k];
-      const v: any = {};
-      v[k] = frame[k];
-      setChildValue(pen, v);
-    }
-
-    if (k === 'text') {
-      calcTextLines(pen);
-    }
-  }
-}
-
-/**
- * 值类型为 number , pen.linear 为 false 时，且 key 不属于 noLinear 时，返回 true
- * @param value 值
- * @param key 键值
- * @param pen 画笔
- * @returns
- */
-function isLinear(value: unknown, key: string, pen: Pen): boolean {
-  // 不线性变化的属性
-  const noLinear = ['strokeType', 'bkType', 'showChild'] as const;
-  type NoLinear = (typeof noLinear)[number];
-  return (
-    typeof value === 'number' &&
-    pen.linear !== false &&
-    !noLinear.includes(key as NoLinear)
-  );
-}
-
-export function setLineAnimate(pen: Pen, now: number) {
-  if (pen.calculative.start === 0) {
-    pen.calculative.start = undefined;
-    return 0;
-  }
-
-  if (!pen.animateCycle) {
-    pen.animateCycle = Infinity;
-  }
-
-  if (!pen.animateSpan) {
-    pen.animateSpan = 1;
-  }
-
-  pen.calculative.animatePos +=
-    pen.animateSpan * (pen.calculative.canvas.store.data.scale || 1);
-  if (!pen.calculative.start) {
-    pen.calculative.start = Date.now();
-    pen.calculative.animatePos =
-      pen.animateSpan * (pen.calculative.canvas.store.data.scale || 1);
-    pen.calculative.cycleIndex = 1;
-  } else if (pen.calculative.animatePos > pen.length) {
-    // 播放到尾了
-    ++pen.calculative.cycleIndex;
-
-    // 播放结束
-    if (pen.calculative.cycleIndex > pen.animateCycle) {
-      pen.currentAnimation = undefined;
-      pen.calculative.start = undefined;
-      return 0;
-    }
-    pen.calculative.animatePos = pen.animateSpan;
-  }
-
-  return true;
-}
-
-export function setChildrenActive(pen: Pen, active = true) {
-  if (!pen.children || pen.childActive === false) {
-    return;
-  }
-  const store = pen.calculative.canvas.store;
-  pen.children.forEach((id) => {
-    const child: Pen = store.pens[id];
-    if (child) {
-      child.calculative.active = active;
-
-      setChildrenActive(child, active);
-    }
-  });
-}
-
-export function setHover(pen: Pen, hover = true) {
-  if (!pen) {
-    return;
-  }
-  const store = pen.calculative.canvas.store;
-  pen.calculative.hover = hover;
-  if(pen.childHover === false){
-    return;
-  }
-  if (pen.children) {
-    pen.children.forEach((id) => {
-      // 子节点没有自己的独立hover，继承父节点hover
-      if (
-        store.pens[id]?.hoverColor == undefined &&
-        store.pens[id]?.hoverBackground == undefined
-      ) {
-        setHover(store.pens[id], hover);
-      }
-    });
-  }
-}
-
-export function setElemPosition(pen: Pen, elem: HTMLElement) {
-  if (!elem) {
-    return;
-  }
-  const store = pen.calculative.canvas.store;
-  const worldRect = pen.calculative.worldRect;
-  elem.style.opacity = pen.globalAlpha + '';
-  elem.style.position = 'absolute';
-  elem.style.outline = 'none';
-  elem.style.left = worldRect.x + store.data.x + 'px';
-  elem.style.top = worldRect.y + store.data.y + 'px';
-  elem.style.width = worldRect.width + 'px';
-  elem.style.height = worldRect.height + 'px';
-  elem.style.display =
-    pen.calculative.inView != false
-      ? pen.calculative.cssDisplay || 'inline'
-      : 'none'; // 是否隐藏元素
-  !pen.calculative.rotate && (pen.calculative.rotate = 0);
-  elem.style.transform = `rotate(${pen.calculative.rotate}deg)`;
-  if (!pen.calculative.rotate) {
-    if (pen.calculative.flipX) {
-      elem.style.transform = `rotateY(180deg)`;
-    }
-    if (pen.calculative.flipY) {
-      elem.style.transform = `rotateX(180deg)`;
-    }
-    if (pen.calculative.flipX && pen.calculative.flipY) {
-      elem.style.transform = `rotateZ(180deg)`;
-    }
-  }
-  elem.style.zIndex =
-    pen.calculative.zIndex !== undefined ? pen.calculative.zIndex + '' : '5';
-  if (pen.calculative.zIndex > pen.calculative.canvas.maxZindex) {
-    pen.calculative.canvas.maxZindex = pen.calculative.zIndex;
-  }
-  if (
-    pen.locked === LockState.DisableEdit ||
-    pen.locked === LockState.DisableMove ||
-    store.data.locked
-  ) {
-    // gif 组合后，作为子节点可通过 lockedOnCombine 来决定自身的 locked 状态
-    elem.style.userSelect = 'initial';
-    elem.style.pointerEvents = 'initial';
-    if (pen.name === 'gif') {
-      elem.style.userSelect = 'none';
-      elem.style.pointerEvents = 'none';
-    }
-  } else {
-    // pen.locked LockState.Disable 不响应鼠标
-    elem.style.userSelect = 'none';
-    elem.style.pointerEvents = 'none';
-  }
-}
-
-export function setElemImg(pen: Pen, elem: HTMLElement) {
-  if (!elem) {
-    return;
-  }
-  //https://github.com/niklasvh/html2canvas
-  globalThis.html2canvas &&
-    globalThis.html2canvas(elem).then(function (canvas) {
-      // document.body.appendChild(canvas);
-      const img = new Image();
-      img.src = canvas.toDataURL('image/png', 0.1);
-      if (img.src.length > 10) {
-        pen.calculative.img = img;
-      }
-    });
-}
-
-/**
- * 每个画笔 locked
- * @param pens 画笔
- * @returns
- */
-export function getPensLock(pens: Pen[]): boolean {
-  return pens.every((pen) => pen.locked);
-}
-
-/**
- * 画笔们的 disabledRotate = true
- * 即 全部禁止旋转 返回 true
- * @param pens 画笔
- * @returns
- */
-export function getPensDisableRotate(pens: Pen[]): boolean {
-  return pens.every((pen) => pen.disableRotate);
-}
-
-export function rotatePen(pen: Pen, angle: number, rect: Rect) {
-  if (pen.type) {
-    pen.calculative.worldAnchors.forEach((anchor) => {
-      rotatePoint(anchor, angle, rect.center);
-    });
-    initLineRect(pen);
-    calcPenRect(pen);
-  } else {
-    if (pen.calculative.rotate) {
-      pen.calculative.rotate += angle;
-    } else {
-      pen.calculative.rotate = angle;
-    }
-    rotatePoint(pen.calculative.worldRect.center, angle, rect.center);
-    if (pen.parentId) {
-      pen.calculative.worldRect.x =
-        pen.calculative.worldRect.center.x -
-        pen.calculative.worldRect.width / 2;
-      pen.calculative.worldRect.y =
-        pen.calculative.worldRect.center.y -
-        pen.calculative.worldRect.height / 2;
-      pen.x = (pen.calculative.worldRect.x - rect.x) / rect.width;
-      pen.y = (pen.calculative.worldRect.y - rect.y) / rect.height;
-    }
-  }
-
-  pen.children?.forEach((id) => {
-    const child = pen.calculative.canvas.store.pens[id];
-    rotatePen(child, angle, rect);
-  });
-}
-
-function initLineRect(pen: Pen) {
-  if (!pen.calculative.worldAnchors?.length) {
-    return;
-  }
-  if (!isFinite(pen.x) || !isFinite(pen.x)) {
-    return;
-  }
-  if (pen.x == null || pen.y == null) {
-    return;
-  }
-  const rect = getLineRect(pen);
-  if (!pen.parentId) {
-    Object.assign(pen, rect);
-  }
-  const { fontSize, lineHeight } = pen.calculative.canvas.store.options;
-  if (!pen.fontSize) {
-    pen.fontSize = fontSize >= 0 ? fontSize : 12;
-    pen.calculative.fontSize =
-      pen.fontSize * pen.calculative.canvas.store.data.scale;
-  } else if(pen.fontSize < 0) {
-    pen.fontSize = 0;
-    pen.calculative.fontSize = 0;
-  }
-  if (!pen.lineHeight) {
-    pen.lineHeight = lineHeight;
-    pen.calculative.lineHeight = pen.lineHeight;
-  }
-  calcCenter(rect);
-  pen.calculative.worldRect = rect;
-  calcPadding(pen, rect);
-  calcTextRect(pen);
-  if (pen.calculative.worldAnchors) {
-    pen.anchors = pen.calculative.worldAnchors.map((pt) => {
-      return calcRelativePoint(pt, pen.calculative.worldRect);
-    });
-  }
-}
-
-/**
- * 画笔们的 disableSize = true
- * 即 全部不允许改变大小 返回 true
- * @param pens 画笔
- * @returns
- */
-export function getPensDisableResize(pens: Pen[]): boolean {
-  return pens.every((pen) => pen.disableSize || pen.pivot); //旋转中心点图元不允许改变大小
-}
-
-export function getFrameValue(pen: Pen, prop: string, frameIndex: number) {
-  if (!pen.frames || !prop) {
-    return 0;
-  }
-
-  let v = 0;
-  for (let i = 0; i < frameIndex; i++) {
-    if (pen.frames[i]) {
-      v += pen.frames[i][prop] || 0;
-    }
-  }
-
-  return v;
-}
-
-/**
- * 判断该画笔 是否是组合为状态中 展示的画笔
- */
-export function isShowChild(pen: Pen, store: Meta2dStore) {
-  let selfPen = pen;
-  while (selfPen && selfPen.parentId) {
-    const oldPen = selfPen;
-    selfPen = store.pens[selfPen.parentId];
-    const showChildIndex = selfPen?.calculative?.showChild;
-    if (showChildIndex != undefined) {
-      const showChildId = selfPen.children[showChildIndex];
-      if (showChildId !== oldPen.id) {
-        // toPng 不展示它
-        return false;
-      }
-    }
-  }
-  return true;
-}
-
-/**
- * 计算画笔的 inView
- * @param pen 画笔
- * @param calcChild 是否计算子画笔
- */
-export function calcInView(pen: Pen, calcChild = false) {
-  const { store, canvasRect } = pen.calculative.canvas as Canvas;
-  if (calcChild) {
-    pen.children?.forEach((id) => {
-      const child = store.pens[id];
-      child && calcInView(child, true);
-    });
-  }
-
-  pen.calculative.inView = true;
-  if (
-    !isShowChild(pen, store) ||
-    pen.visible == false ||
-    pen.calculative.visible == false
-  ) {
-    pen.calculative.inView = false;
-  } else {
-    const { x, y, width, height, rotate } = pen.calculative.worldRect;
-    const penRect: Rect = {
-      x: x + store.data.x,
-      y: y + store.data.y,
-      width,
-      height,
-      rotate,
-    };
-    calcRightBottom(penRect);
-    if (!rectInRect(penRect, canvasRect)) {
-      pen.calculative.inView = false;
-    }
-  }
-  // TODO: 语义化上，用 onValue 更合适，但 onValue 会触发 echarts 图形的重绘，没有必要
-  // 更改 view 后，修改 dom 节点的显示隐藏
-  // pen.onMove?.(pen);
-  pen.calculative.singleton?.div && setElemPosition(pen, pen.calculative.singleton.div);
-}
-
-/**
- * 绘制 rect ，上线后可查看 rect 位置
- */
-function inspectRect(
-  ctx: CanvasRenderingContext2D,
-  store: Meta2dStore,
-  pen: Pen
-) {
-  if (store.fillWorldTextRect) {
-    ctx.save();
-    ctx.fillStyle = '#c3deb7';
-    const { x, y, width, height } = pen.calculative.worldTextRect;
-    ctx.fillRect(x, y, width, height);
-    ctx.restore();
-  }
-}
-
-export function setGlobalAlpha(
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  pen: Pen
-) {
-  const globalAlpha = pen.calculative.globalAlpha;
-  if (
-    typeof globalAlpha === 'number' &&
-    globalAlpha < 1 &&
-    !isNaN(globalAlpha)
-  ) {
-    ctx.globalAlpha = globalAlpha;
-  }
-}
-
-/**
- * ctx 绘制图纸，并非 Path2D
- * @param ctx 画布上下文
- * @param pen 画笔
- */
-function ctxDrawCanvas(ctx: CanvasRenderingContext2D, pen: Pen) {
-  const canvasDraw =  drawFuncGenerator(ctx,pen) || globalStore.canvasDraws[pen.name];
-  if (canvasDraw) {
-    // TODO: 后续考虑优化 save / restore
-    ctx.save();
-    // TODO: 原有 return 终止后续操作，必要性不大
-    canvasDraw(ctx, pen);
-    ctx.restore();
-  }
-}
-function drawFuncGenerator(ctx: CanvasRenderingContext2D, pen: any) {
-  // 进行数据的预处理
-  const drawCommand:Array<any> = pen.drawCommand;
-  if(!drawCommand || pen.name === 'line')return ;
-  // 单位转换 将其他单位转换为px
-
-  // 执行自定义绘画函数
-  return (ctx: CanvasRenderingContext2D,pen: Pen)=> {
-    // TODO  绘制命令的转换 （能否兼容多种指令？？）
-    drawCommand.forEach((command)=> {
-      try {
-        command.steps = command.steps.flat(Infinity);
-        command.steps.reduce((calculate,step)=>{
-          const cs = commandTransfer(step,pen,calculate.x,calculate.y);
-          // 应当保证顺序的正确
-          try {
-            if(cs.c){
-              if(cs.c.startsWith('_')){
-                const prop = cs.c.split('_')[1];
-                // debugger;
-                (cs.p || ctx)[prop] = cs.v.value;
-                return {x:calculate.x,y:calculate.y};
-              }
-              let l = [];
-              for (const csKey in cs.v) {
-                l.push(cs.v[csKey]);
-              }
-              // ctx.beginPath();
-              (cs.p || ctx)[cs.c](...l);
-              ctx.moveTo(cs.startX || cs.v.x,cs.startY || cs.v.y);
-              // command.prop.NoFill === '0'?ctx.fill():'';
-              return {x:cs.startX || cs.v.x, y:cs.startY||cs.v.y};
-            }
-            return {x:calculate.x,y:calculate.y};
-          }catch (e) {
-            // pass
-            console.log(e,'error',cs);
-          }
-        },{});
-      }
-      catch (e) {
-      }
-    });
-    ctx.stroke();
-  };
-}
-
-function commandTransfer(command,pen,startX,startY){
-
-  // TODO 是否支持扩展更多的命令？用于兼容未来的其他解析格式？
-  //1. 进行简单的命令解析
-  // VISIO
-  const map = {
-    'visio':dealWithVisio,
-    'dxf':dealWithDXF
-  };
-  // CAD
-  return map[pen.parseType](command,pen,startX,startY);
-}
-
-function dealWithDXF(command,pen,startX,startY) {
-  const { x, y, width, height } = pen.calculative.worldRect;
-  const {originWidth,originHeight} = pen.dxfOrigin;
-  switch (command.c) {
-    case "beginPath":
-      return {
-        c:'beginPath',
-        v:{}
-      };
-    case "closePath":
-      return {
-        c:'closePath',
-        v:{}
-      };
-    case "moveTo":
-      return {
-        c:'moveTo',
-        v:{
-          x: command.v.x * (width / originWidth) + x,
-          y: command.v.y * (height / originHeight) + y
-        }
-      };
-    case "lineTo":
-      return {
-        c:'lineTo',
-        v:{
-          x: command.v.x * (width / originWidth) + x,
-          y: command.v.y * (height / originHeight) + y
-        }
-      };
-    case "arc":
-      return {
-        c:'ellipse',
-        v:{
-          x:command.v.x * (width / originWidth) + x,
-          y:(command.v.y * (height / originHeight)) + y,
-          rx:command.v.xr * (width / originWidth),
-          ry:command.v.yr * (height / originHeight),
-          rotation:command.v.rotation || 0,
-          startAngle:command.v.startAngle,
-          endAngle: command.v.endAngle,
-          a:command.v.aclockwise ?? true
-        }
-      };
-    case "ellipse":
-      return {
-        c:'ellipse',
-        v:{
-          x:command.v.x * (width / originWidth) + x,
-          y:(command.v.y * (height / originHeight)) + y,
-          rx:command.v.xr * (width / originWidth),
-          ry:command.v.yr * (height / originHeight),
-          rotation:command.v.rotation || 0,
-          startAngle:command.v.startAngle,
-          endAngle: command.v.endAngle,
-          a:command.v.aclockwise ?? true
-        }
-      };
-    case "_font":
-      return {
-        c:'_font',
-        v:{
-          value:command.v.fontSize * meta2d.store.data.scale + 'px ' + (command.v.fontFamily || meta2d.store.options.fontFamily)
-        }
-      };
-    case "_fillStyle":
-      return {
-        c:'_fillStyle',
-        v:{
-          value:pen.color || command.v.value
-        }
-      };
-      default:
-        const c = {
-          c:command.c,
-          v:{
-            ...command.v,
-            x:command.v.x * (width / originWidth) + x,
-            y:(command.v.y * (height / originHeight)) + y
-          }
-        };
-        !command.v.x && delete c.v.x;
-        !command.v.y && delete c.v.y;
-        return c;
-  }
-}
-function dealWithVisio(command,pen,startX,startY) {
-  const { x, y, width, height } = pen.calculative.worldRect;
-  const { width:originWidth, height:originHeight} = pen.origin;
-  switch (command.c) {
-    case "MoveTo":
-      return {
-          c:"moveTo",
-        v:{
-          x:+ command.v.X * (100) * (width / originWidth) + x,
-          y:+ command.v.Y * (100) * (height / originHeight) + y
-        }
-      };
-    case "RelMoveTo":
-      return {
-        c:"moveTo",
-        v:{
-          x:+ command.v.X * originWidth * (width / originWidth) + x,
-          y:+ command.v.Y * originHeight * (height / originHeight) + y
-        }
-      };
-    case "LineTo":
-      return {
-        c: "lineTo",
-        v:{
-          x:+ command.v.X * (100) * (width / originWidth) + x,
-          y:+ command.v.Y * (100) * (height / originHeight) + y
-        }
-      };
-    case "RelLineTo":
-      return {
-        c: "lineTo",
-        v:{
-          x:+ command.v.X * originWidth * (width / originWidth) + x,
-          y:+ command.v.Y * originHeight * (height / originHeight) + y
-        }
-      };
-    case "Ellipse":
-      let centerX1 = command.v.X;
-      let centerY1 = command.v.Y;
-      let longAxis = Math.abs(command.v.A - command.v.C);
-      let shortAxis = Math.abs(command.v.B - command.v.D);
-
-      return {
-        c: "ellipse",
-        v: {
-          x: centerX1 * (100) * (width / originWidth) + x,
-          y: centerY1 * (100) * (height / originHeight) + y,
-          radiuX: longAxis * (100) * (width / originWidth),
-          radiuY: shortAxis * (100) * (height / originHeight),
-          rotation: 0,
-          startAngle: 0,
-          endAngle: Math.PI *2,
-          anticlockwise: true
-        }
-      };
-    case "EllipticalArcTo":
-      const endX = command.v.X * 100 * (width / originWidth) + x; // 弧上结束顶点的 x 坐标
-      const endY = command.v.Y * 100 * (height / originHeight) + y; // 弧上结束顶点的 y 坐标
-      const ctrlX = command.v.A * 100 * (width / originWidth) + x; // 控制点的 x 坐标
-      const ctrlY = command.v.B * 100 * (height / originHeight) + y; // 控制点的 y 坐标
-      const angleDeg = command.v.C; // 主轴相对于 x 轴的角度 (度)
-      const axisRatio = command.v.D * (width / height) * (originHeight / originWidth); // 长轴和短轴的比率
-      //
-      const params = calculateEllipseParameters(startX,startY,endX,endY,ctrlX,ctrlY,axisRatio);
-// 开始绘制路径
-      !command.orign && (command.orign = {});
-      !command.orign.startA && ( command.orign.startA = calculateAngleInRadians(params.x0,params.y0,startX,startY));
-      !command.orign.endA && ( command.orign.endA = calculateAngleInRadians(params.x0,params.y0,endX,endY));
-      return {
-        c:"ellipse",
-        v:{
-          centerX: params.x0,
-          centerY: params.y0 ,
-          radiuX: params.a ,
-          radiuY: params.b,
-          // rotation:radiansToDegrees(angleDeg),
-          rotation:0,
-          startAngle:command.orign.startA,
-          endAngle: command.orign.endA,
-          // startAngle: 0,
-          // endAngle: Math.PI * 2,
-          // anticlockwise: startA > 0 && startA>endA
-          anticlockwise: + angleDeg < 0
-          // anticlockwise: Math.abs(endA - startA) < Math.PI
-        },
-        startX:endX,
-        startY:endY,
-      };
-    case "ArcTo":
-      let endX2 = command.v.X * 100 * width / originWidth + x;
-      let endY2 = command.v.Y * 100 * height / originHeight + y;
-      let h = command.v.A * 100 *  (width / height) * (originHeight / originWidth);
-      // 计算弦的中点
-      let xm = (startX + endX2) / 2;
-      let ym = (startY + endY2) / 2;
-
-      // 计算弦的长度
-      let d = Math.sqrt((endX2 - startX) ** 2 + (endY2 - startY) ** 2);
-
-      // 计算圆弧的半径
-      let R = (d ** 2) / (8 * h) + h / 2;
-
-      // 计算单位垂直向量
-      let ux = -(endY2 - startY) / d;
-      let uy = (endX2 - startX) / d;
-
-      // 计算两个可能的圆心
-      let xc1 = xm + ux * R;
-      let yc1 = ym + uy * R;
-      let xc2 = xm - ux * R;
-      let yc2 = ym - uy * R;
-
-      // 选择一个圆心
-      let xc = xc1;
-      let yc = yc1;
-
-      // 计算起点和终点到圆心的角度
-      let startAngle = Math.atan2(startY - yc, startX - xc);
-      let endAngle = Math.atan2(endY2 - yc, endX2 - xc);
-      return {
-        c:'arc',
-        v:{
-          x:xc,
-          y:yc,
-          radius:R,
-          startAngle:startAngle,
-          endAngle: endAngle,
-          aclockwise: true,
-        }
-      };
-    // case "RelCubBezTo":
-    //   return {
-    //     c:"bezierCurveTo",
-    //     v:{
-    //
-    //     }
-    //   };
-    default:
-      // console.log(command.c);
-      return {};
-  }
-}
-export function setChildValue(pen: Pen, data: IValue) {
-  for (const k in data) {
-    if (inheritanceProps.includes(k)) {
-      if(k == 'fontSize' && data[k] < 0){
-        data[k] = 0;
-      }
-      pen[k] = data[k];
-      if (['fontSize','lineWidth'].includes(k)) {
-        pen.calculative[k] = data[k] * pen.calculative.canvas.store.data.scale;
-        calcTextRect(pen);
-      } else {
-        pen.calculative[k] = data[k];
-      }
-    }
-  }
-  if (
-    pen.calculative.canvas.parent.isCombine(pen)
-    //&& pen.showChild === undefined
-  ) {
-    const children = pen.children;
-    children?.forEach((childId) => {
-      let _data = deepClone(data);
-      if(pen.calculative.childrenVisible){
-        if(pen.calculative.childrenVisible[childId]===false){
-          delete _data.visible;
-        }
-      }
-      const child = pen.calculative.canvas.store.pens[childId];
-      child && setChildValue(child, _data);
-    });
-  }
-}
-
-
-function calculateEllipseParameters(x1, y1, x2, y2, x3, y3, D) {
-  // Calculate x₀ using equation ⑥
-  let numeratorX0 = (x1 - x2) * (x1 + x2) * (y2 - y3) - (x2 - x3) * (x2 + x3) * (y1 - y2) + D*D * (y1 - y2) * (y2 - y3) * (y1 - y3);
-  let denominatorX0 = 2 * ((x1 - x2) * (y2 - y3) - (x2 - x3) * (y1 - y2));
-  let x0 = numeratorX0 / denominatorX0;
-
-  // Calculate y₀ using equation ⑦
-  let numeratorY0 = (x1 - x2) * (x2 - x3) * (x1 - x3) + D*D * ((x2 - x3) * (y1 - y2) * (y1 + y2) - (x1 - x2) * (y2 - y3) * (y2 + y3)) ;
-  let denominatorY0 = 2 * D*D * ((x2 - x3) * (y1 - y2) - (x1 - x2) * (y2 - y3));
-  let y0 = numeratorY0 / denominatorY0;
-
-  // Calculate 'a' using equation ⑧, substituting x₀ and y₀
-  let a = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(D * (y1 - y0), 2));
-
-  // Calculate 'b' using equation ⑨
-  let b = a / D;
-
-  return {x0, y0, a, b};
-}
-
-function calculateAngleInRadians(x1, y1, x2, y2) {
-  // 计算两个点的差值
-  let dx = x2 - x1;
-  let dy = y2 - y1;
-
-  // 使用 atan2 计算角度，结果为弧度
-  let angleRadians = Math.atan2(dy, dx);
-
-  // 如果角度为负值，加上2π
-  if (angleRadians < 0) {
-    angleRadians += 2 * Math.PI;
-  }
-  return angleRadians;
-}