TypeScript common.Matrix类代码示例

 const layerChildren = layer.children.map((l: GroupLayer | PathLayer | ClipPathLayer): Layer => {
   if (l instanceof GroupLayer) {
     const flattenedTransform = Matrix.flatten([
       layerTransform,
       ...LayerUtil.getCanvasTransformsForGroupLayer(l),
     ]);
     const { sx, sy } = flattenedTransform.getScaling();
     const degrees = flattenedTransform.getRotation();
     const { tx, ty } = flattenedTransform.getTranslation();
     const newLayer = l.clone();
     newLayer.pivotX = 0;
     newLayer.pivotY = 0;
     newLayer.translateX = tx;
     newLayer.translateY = ty;
     newLayer.rotation = degrees;
     newLayer.scaleX = sx;
     newLayer.scaleY = sy;
     return newLayer;
   }
   const path = l.pathData;
   if (!path || !l.pathData.getPathString()) {
     return l;
   }
   const clonedLayer = l.clone();
   clonedLayer.pathData = path
     .mutate()
     .transform(layerTransform)
     .build();
   return clonedLayer;
 });

/**
 * Builds a list of path info objects for the specified clip path element.
 */
function buildPathInfosForClipPath(node: SVGClipPathElement) {
  // TODO: make sure that transforms from parent clip-paths aren't inherited...
  const clipPathTransforms = getNodeTransforms(node).reverse();

  const pathInfos: PathInfo[] = [];
  if (node.childNodes) {
    for (let i = 0; i < node.childNodes.length; i++) {
      const childNode = node.childNodes.item(i) as Element;
      if (childNode instanceof SVGPathElement && childNode.getAttribute('d')) {
        const pathStr = childNode.getAttribute('d');
        const pathTransforms = getNodeTransforms(childNode).reverse();
        const transforms = [...pathTransforms, ...clipPathTransforms];
        const refClipPathId = getReferencedClipPathId(childNode);
        pathInfos.push({
          refClipPathId,
          path: new Path(
            new Path(pathStr)
              .mutate()
              .transform(Matrix.flatten(transforms))
              .build()
              .getPathString(),
          ),
        });
      }
    }
  }
  return pathInfos;
}

 /**
  * Merges the specified group layer into its children layers.
  * TODO: make it possible to merge groups that contain animation blocks?
  */
 flattenGroupLayer(layerId: string) {
   const vl = this.getVectorLayer();
   const layer = vl.findLayerById(layerId) as GroupLayer;
   if (!layer.children.length) {
     return;
   }
   const layerTransform = Matrix.flatten(LayerUtil.getCanvasTransformsForGroupLayer(layer));
   const layerChildren = layer.children.map((l: GroupLayer | PathLayer | ClipPathLayer): Layer => {
     if (l instanceof GroupLayer) {
       const flattenedTransform = Matrix.flatten([
         layerTransform,
         ...LayerUtil.getCanvasTransformsForGroupLayer(l),
       ]);
       const { sx, sy } = flattenedTransform.getScaling();
       const degrees = flattenedTransform.getRotation();
       const { tx, ty } = flattenedTransform.getTranslation();
       const newLayer = l.clone();
       newLayer.pivotX = 0;
       newLayer.pivotY = 0;
       newLayer.translateX = tx;
       newLayer.translateY = ty;
       newLayer.rotation = degrees;
       newLayer.scaleX = sx;
       newLayer.scaleY = sy;
       return newLayer;
     }
     const path = l.pathData;
     if (!path || !l.pathData.getPathString()) {
       return l;
     }
     const clonedLayer = l.clone();
     clonedLayer.pathData = path
       .mutate()
       .transform(layerTransform)
       .build();
     return clonedLayer;
   });
   const layerChildrenIds = new Set(layerChildren.map(l => l.id));
   const parent = LayerUtil.findParent(vl, layerId).clone();
   const children = [...parent.children];
   children.splice(_.findIndex(parent.children, l => l.id === layerId), 1, ...layerChildren);
   parent.children = children;
   const actions: Action[] = [
     new SetVectorLayer(LayerUtil.updateLayer(vl, parent)),
     ...this.buildCleanupLayerIdActions(layerId),
   ];
   const newAnimation = this.getAnimation().clone();
   // TODO: show a dialog if the user is about to unknowingly delete any blocks?
   newAnimation.blocks = newAnimation.blocks.filter(b => b.layerId !== layerId);
   // TODO: also attempt to merge children group animation blocks?
   newAnimation.blocks = newAnimation.blocks.map(b => {
     if (!(b instanceof PathAnimationBlock) || !layerChildrenIds.has(b.layerId)) {
       return b;
     }
     const block = b.clone();
     block.fromValue = block.fromValue
       .mutate()
       .transform(layerTransform)
       .build();
     block.toValue = block.toValue
       .mutate()
       .transform(layerTransform)
       .build();
     return block;
   });
   actions.push(new SetAnimation(newAnimation));
   this.store.dispatch(new BatchAction(...actions));
 }

export function fromPathOpString(pathString: string, pathOpsString: string) {
  const A = pathOpsString.split(' ');
  const mutator = new Path(pathString).mutate();
  for (let i = 0; i < A.length; i++) {
    const op = A[i] as PathOp;
    switch (op) {
      case 'RV': // Reverse.
        mutator.reverseSubPath(+A[i + 1]);
        i += 1;
        break;
      case 'SB': // Shift back.
        mutator.shiftSubPathBack(+A[i + 1]);
        i += 1;
        break;
      case 'SF': // Shift forward.
        mutator.shiftSubPathForward(+A[i + 1]);
        i += 1;
        break;
      case 'S': // Split.
        const subIdx = +A[i + 1];
        const cmdIdx = +A[i + 2];
        const args = [+A[i + 3]];
        i += 3;
        while (!isNaN(+A[i + 1]) && i < A.length) {
          args.push(+A[i + 1]);
          i++;
        }
        mutator.splitCommand(subIdx, cmdIdx, ...args);
        break;
      case 'SIH': // Split in half.
        mutator.splitCommandInHalf(+A[i + 1], +A[i + 2]);
        i += 2;
        break;
      case 'US': // Unsplit.
        mutator.unsplitCommand(+A[i + 1], +A[i + 2]);
        i += 2;
        break;
      case 'CV': // Convert.
        mutator.convertCommand(+A[i + 1], +A[i + 2], A[i + 3] as SvgChar);
        i += 3;
        break;
      case 'UCV': // Unconvert.
        mutator.unconvertSubPath(+A[i + 1]);
        i += 1;
        break;
      case 'RT': // Revert.
        mutator.revert();
        break;
      case 'M': // Move subpath.
        mutator.moveSubPath(+A[i + 1], +A[i + 2]);
        i += 2;
        break;
      case 'AC': // Add collapsing sub path.
        mutator.addCollapsingSubPath({ x: +A[i + 1], y: +A[i + 2] }, +A[i + 3]);
        i += 3;
        break;
      case 'DC': // Delete collapsing sub paths.
        mutator.deleteCollapsingSubPaths();
        break;
      case 'SSSP': // Split stroked sub path.
        mutator.splitStrokedSubPath(+A[i + 1], +A[i + 2]);
        i += 2;
        break;
      case 'SFSP': // Split filled sub path.
        mutator.splitFilledSubPath(+A[i + 1], +A[i + 2], +A[i + 3]);
        i += 3;
        break;
      case 'DFSP': // Delete filled sub path.
        mutator.deleteFilledSubPath(+A[i + 1]);
        i += 1;
        break;
      case 'DFSPS': // Delete filled subpath segment.
        mutator.deleteFilledSubPathSegment(+A[i + 1], +A[i + 2]);
        i += 2;
        break;
      case 'DSSP': // Delete stroked sub path.
        mutator.deleteStrokedSubPath(+A[i + 1]);
        i += 1;
        break;
      case 'T': // Transform.
        const isTransformOpFn = (token: string) => {
          token = (token || '').toLowerCase();
          return new Set(['scale', 'rotate', 'translate']).has(token);
        };
        while (isTransformOpFn(A[i + 1])) {
          const transformOp = A[i + 1];
          let matrix: Matrix;
          switch (transformOp) {
            case 'scale':
              matrix = Matrix.scaling(+A[i + 2], +A[i + 3]);
              i += 3;
              break;
            case 'rotate':
              matrix = Matrix.rotation(+A[i + 2]);
              i += 2;
              break;
            case 'translate':
              matrix = Matrix.translation(+A[i + 2], +A[i + 3]);
              i += 3;
              break;
//.........这里部分代码省略.........

  const nodeToLayerFn = (node: Element, transforms: ReadonlyArray<Matrix>): Layer => {
    if (
      !node ||
      node.nodeType === Node.TEXT_NODE ||
      node.nodeType === Node.COMMENT_NODE ||
      node instanceof SVGDefsElement ||
      node instanceof SVGUseElement
    ) {
      return undefined;
    }

    const nodeTransforms = getNodeTransforms(node as SVGGraphicsElement);
    transforms = [...transforms, ...nodeTransforms];
    const flattenedTransforms = Matrix.flatten(transforms);

    // Get the referenced clip-path ID, if one exists.
    const refClipPathId = getReferencedClipPathId(node);

    const maybeWrapClipPathInGroupFn = (layer: Layer) => {
      if (!refClipPathId) {
        return layer;
      }
      const paths = (clipPathMap[refClipPathId] || []).map(p => {
        return new Path(
          p
            .mutate()
            .transform(flattenedTransforms)
            .build()
            .getPathString(),
        );
      });
      if (!paths.length) {
        // If the clipPath has no children, then clip the entire layer.
        paths.push(new Path('M 0 0 Z'));
      }
      const groupChildren: Layer[] = paths.map(p => {
        return new ClipPathLayer({
          name: makeFinalNodeIdFn(refClipPathId, 'mask'),
          pathData: p,
          children: [],
        });
      });
      groupChildren.push(layer);
      return new GroupLayer({
        name: makeFinalNodeIdFn('wrapper', 'group'),
        children: groupChildren,
      });
    };

    if (node instanceof SVGPathElement && node.getAttribute('d')) {
      const path = node.getAttribute('d');
      const attrMap: Dictionary<any> = {};
      const simpleAttrFn = (nodeAttr: string, contextAttr: string) => {
        if (node.hasAttribute(nodeAttr)) {
          attrMap[contextAttr] = node.getAttribute(nodeAttr);
        }
      };

      simpleAttrFn('stroke', 'strokeColor');
      simpleAttrFn('stroke-width', 'strokeWidth');
      simpleAttrFn('stroke-linecap', 'strokeLinecap');
      simpleAttrFn('stroke-linejoin', 'strokeLinejoin');
      simpleAttrFn('stroke-miterlimit', 'strokeMiterLimit');
      simpleAttrFn('stroke-opacity', 'strokeAlpha');
      simpleAttrFn('fill', 'fillColor');
      simpleAttrFn('fill-opacity', 'fillAlpha');
      simpleAttrFn('fill-rule', 'fillType');

      // Set the default values as specified by the SVG spec. Note that some of these default
      // values are different than the default values used by VectorDrawables.
      const fillColor =
        'fillColor' in attrMap ? ColorUtil.svgToAndroidColor(attrMap['fillColor']) : '#000';
      const strokeColor =
        'strokeColor' in attrMap ? ColorUtil.svgToAndroidColor(attrMap['strokeColor']) : undefined;
      const fillAlpha = 'fillAlpha' in attrMap ? Number(attrMap['fillAlpha']) : 1;
      let strokeWidth = 'strokeWidth' in attrMap ? Number(attrMap['strokeWidth']) : 1;
      const strokeAlpha = 'strokeAlpha' in attrMap ? Number(attrMap['strokeAlpha']) : 1;
      const strokeLinecap: StrokeLineCap =
        'strokeLinecap' in attrMap ? attrMap['strokeLinecap'] : 'butt';
      const strokeLinejoin: StrokeLineJoin =
        'strokeLinejoin' in attrMap ? attrMap['strokeLinecap'] : 'miter';
      const strokeMiterLimit =
        'strokeMiterLimit' in attrMap ? Number(attrMap['strokeMiterLimit']) : 4;
      const fillRuleToFillTypeFn = (fillRule: string) => {
        return fillRule === 'evenodd' ? 'evenOdd' : 'nonZero';
      };
      const fillType: FillType =
        'fillType' in attrMap ? fillRuleToFillTypeFn(attrMap['fillType']) : 'nonZero';

      let pathData = new Path(path);
      if (transforms.length) {
        pathData = new Path(
          pathData
            .mutate()
            .transform(flattenedTransforms)
            .build()
            .getPathString(),
        );
        strokeWidth = MathUtil.round(strokeWidth * flattenedTransforms.getScaleFactor());
      }
//.........这里部分代码省略.........

// TODO: give better error message when user attempts to import SVG w/o a namespace declaration
function loadVectorLayerFromSvgString(
  svgString: string,
  doesNameExistFn: (name: string) => boolean,
): VectorLayer {
  const usedIds = new Set<string>();
  const makeFinalNodeIdFn = (nodeId: string, prefix: string) => {
    const finalName = LayerUtil.getUniqueName(
      NameProperty.sanitize(nodeId || prefix),
      name => doesNameExistFn(name) || usedIds.has(name),
    );
    usedIds.add(finalName);
    return finalName;
  };

  const parser = new DOMParser();
  const { documentElement } = parser.parseFromString(svgString, 'image/svg+xml');
  if (!isSvgNode(documentElement)) {
    return undefined;
  }

  // TODO: handle clipPaths that have children path elements with clip-path attributes
  // TODO: handle clipPaths with clipPathUnits="objectBoundingBox"
  // TODO: confirm that clipPath transforms (and any referenced transforms) are handled correctly
  const clipPathMap = _.mapValues(buildPathInfosMap(documentElement), infos => {
    return infos.map(info => info.path);
  });

  const nodeToLayerFn = (node: Element, transforms: ReadonlyArray<Matrix>): Layer => {
    if (
      !node ||
      node.nodeType === Node.TEXT_NODE ||
      node.nodeType === Node.COMMENT_NODE ||
      node instanceof SVGDefsElement ||
      node instanceof SVGUseElement
    ) {
      return undefined;
    }

    const nodeTransforms = getNodeTransforms(node as SVGGraphicsElement);
    transforms = [...transforms, ...nodeTransforms];
    const flattenedTransforms = Matrix.flatten(transforms);

    // Get the referenced clip-path ID, if one exists.
    const refClipPathId = getReferencedClipPathId(node);

    const maybeWrapClipPathInGroupFn = (layer: Layer) => {
      if (!refClipPathId) {
        return layer;
      }
      const paths = (clipPathMap[refClipPathId] || []).map(p => {
        return new Path(
          p
            .mutate()
            .transform(flattenedTransforms)
            .build()
            .getPathString(),
        );
      });
      if (!paths.length) {
        // If the clipPath has no children, then clip the entire layer.
        paths.push(new Path('M 0 0 Z'));
      }
      const groupChildren: Layer[] = paths.map(p => {
        return new ClipPathLayer({
          name: makeFinalNodeIdFn(refClipPathId, 'mask'),
          pathData: p,
          children: [],
        });
      });
      groupChildren.push(layer);
      return new GroupLayer({
        name: makeFinalNodeIdFn('wrapper', 'group'),
        children: groupChildren,
      });
    };

    if (node instanceof SVGPathElement && node.getAttribute('d')) {
      const path = node.getAttribute('d');
      const attrMap: Dictionary<any> = {};
      const simpleAttrFn = (nodeAttr: string, contextAttr: string) => {
        if (node.hasAttribute(nodeAttr)) {
          attrMap[contextAttr] = node.getAttribute(nodeAttr);
        }
      };

      simpleAttrFn('stroke', 'strokeColor');
      simpleAttrFn('stroke-width', 'strokeWidth');
      simpleAttrFn('stroke-linecap', 'strokeLinecap');
      simpleAttrFn('stroke-linejoin', 'strokeLinejoin');
      simpleAttrFn('stroke-miterlimit', 'strokeMiterLimit');
      simpleAttrFn('stroke-opacity', 'strokeAlpha');
      simpleAttrFn('fill', 'fillColor');
      simpleAttrFn('fill-opacity', 'fillAlpha');
      simpleAttrFn('fill-rule', 'fillType');

      // Set the default values as specified by the SVG spec. Note that some of these default
      // values are different than the default values used by VectorDrawables.
      const fillColor =
        'fillColor' in attrMap ? ColorUtil.svgToAndroidColor(attrMap['fillColor']) : '#000';
//.........这里部分代码省略.........