How to use @antv/matrix-util - 10 common examples

export function scaleInY(
  shape: IShape | IGroup,
  animateCfg: AnimateCfg,
  coordinate: Coordinate,
  shapeModel: ShapeDrawCFG
) {
  const box = shape.getBBox();
  const x = (box.minX + box.maxX) / 2;
  const points = shapeModel.points as Point[];
  // 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
  const y = points[0].y - points[1].y <= 0 ? box.maxY : box.minY;

  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 1, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 1, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );

// x 数值如果为负值，那么应该从右往左生长
  const x = points[0].y - points[1].y > 0 ? box.maxX : box.minX;
  const y = (box.minY + box.maxY) / 2;

  shape.applyToMatrix([x, y, 1]);

  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 0.01, 1],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 100, 1],
        ['t', x, y],
      ]),
    },
    animateCfg
  );
}

const x = (box.minX + box.maxX) / 2;
  const points = shapeModel.points as Point[];
  // 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
  const y = points[0].y - points[1].y <= 0 ? box.maxY : box.minY;

  shape.applyToMatrix([x, y, 1]);
  const matrix = transform(shape.getMatrix(), [
    ['t', -x, -y],
    ['s', 1, 0.01],
    ['t', x, y],
  ]);
  shape.setMatrix(matrix);

  shape.animate(
    {
      matrix: transform(shape.getMatrix(), [
        ['t', -x, -y],
        ['s', 1, 100],
        ['t', x, y],
      ]),
    },
    animateCfg
  );
}

export const getControlPoint = (
  startPoint: IPoint,
  endPoint: IPoint,
  percent: number = 0,
  offset: number = 0
): IPoint => {
  const point: IPoint = {
    x: (1 - percent) * startPoint.x + percent * endPoint.x,
    y: (1 - percent) * startPoint.y + percent * endPoint.y,
  };

  let tangent: number[] = [];
  vec2.normalize(tangent, [endPoint.x - startPoint.x, endPoint.x - startPoint.y]);

  if (tangent.length === 0) {
    tangent = [0, 0];
  }
  const perpendicular = [-tangent[1] * offset, tangent[0] * offset]; // 垂直向量
  point.x += perpendicular[0];
  point.y += perpendicular[1];
  return point;
};

public getSideVector(offset) {
    const isVertical = this.get('isVertical');
    const factor = this.get('factor');
    // if (Util.isArray(offset)) {
    //   return offset.map(value => value * factor);
    // }
    if (!Util.isNumber(offset)) {
      return [0, 0];
    }
    const start = this.get('start');
    const end = this.get('end');
    const axisVector = this.getAxisVector();
    const normal = vec2.normalize([], axisVector);
    let direction = false;
    if ((isVertical && start.y < end.y) || (!isVertical && start.x > end.x)) {
      direction = true;
    }
    const verticalVector = vec2.vertical([], normal, direction);
    return vec2.scale([], verticalVector, offset * factor);
  }

const factor = this.get('factor');
    // if (Util.isArray(offset)) {
    //   return offset.map(value => value * factor);
    // }
    if (!Util.isNumber(offset)) {
      return [0, 0];
    }
    const start = this.get('start');
    const end = this.get('end');
    const axisVector = this.getAxisVector();
    const normal = vec2.normalize([], axisVector);
    let direction = false;
    if ((isVertical && start.y < end.y) || (!isVertical && start.x > end.x)) {
      direction = true;
    }
    const verticalVector = vec2.vertical([], normal, direction);
    return vec2.scale([], verticalVector, offset * factor);
  }

import { Tooltip } from '@antv/component';
import * as matrixUtil from '@antv/matrix-util';
import * as _ from '@antv/util';
import Element from '../../element/base';
import { getShapeFactory } from '../../element/shape/base';
import { DataPointType } from '../../interface';
import View from '../view';
const Vector2 = matrixUtil.vec2;

const TYPE_SHOW_MARKERS = ['line', 'area', 'path']; // 默认展示 tooltip marker 的几何图形
const TYPE_SHOW_CROSSHAIRS = ['line', 'area']; // 默认展示十字瞄准线的几何图形

// TODO FIXME this is HARD CODING
const IGNORE_TOOLTIP_ITEM_PROPERTIES = ['marker', 'showMarker'];

const _indexOfArray = (items, item) => {
  let rst = -1;
  _.each(items, (sub, index: number) => {
    let isEqual = true;
    for (const key in item) {
      if (item.hasOwnProperty(key) && IGNORE_TOOLTIP_ITEM_PROPERTIES.indexOf(key) === -1) {
        if (!_.isObject(item[key]) && item[key] !== sub[key]) {
          isEqual = false;
          break;

radius,
            0,
            1,
            1,
            2 * coordCenter.x - start.x,
            2 * coordCenter.y - start.y,
          ],
          [ 'A', radius, radius, 0, 1, 1, start.x, start.y ],
        ];
      }
    } else {
      // 只适用于start和end，yScale值相同，需要判断scale结果

      // 求向量 center -> start 和 center -> end 的顺时针角度
      // 即等于求 start -> center 和 end -> center 的逆时针角度
      const dAngle = vec2.angleTo(
        [ coordCenter.x - start.x, coordCenter.y - start.y ],
        [ coordCenter.x - end.x, coordCenter.y - end.y ],
        0,
      );
      const largeArc = dAngle > Math.PI ? 1 : 0;
      path = [
        [ 'M', start.x, start.y ],
        [ 'A', radius, radius, 0, largeArc, 1, end.x, end.y ],
      ];
    }

    const arcShape = group.addShape('path', {
      zIndex: this.get('zIndex'),
      attrs: _.assign({ path }, this.get('style')),
    });
    arcShape.name = 'annotation-arc'; // 用于事件以及动画识别

const labelOffset = Util.get(this.get('label'), 'offset', 5);
      titleOffset += labelLength + labelOffset;
    }
    // }
    const textStyle = title.textStyle;
    const cfg = Util.mix({}, textStyle);
    if (title.text) {
      const vector = this.getAxisVector(); // 坐标轴方向的向量
      if (autoRotateTitle && Util.isNil(title.rotate)) {
        // 自动旋转并且用户没有设置 title.rotate
        let angle = 0;
        if (!Util.isNumberEqual(vector[1], 0)) {
          // 所有水平坐标轴，文本不转置
          const v1 = [1, 0];
          const v2 = [vector[0], vector[1]];
          angle = vec2.angleTo(v2, v1, true);
        }

        cfg.rotate = angle * (180 / Math.PI);
      } else if (!Util.isNil(title.rotate)) {
        // 用户设置了旋转角度就以用户设置的为准
        cfg.rotate = (title.rotate / 180) * Math.PI; // 将角度转换为弧度
      }

      const sideVector = this.getSideVector(titleOffset);
      let point;
      const position = title.position;
      if (position === 'start') {
        point = {
          x: this.get('start').x + sideVector[0],
          y: this.get('start').y + sideVector[1],
        };

public zoom(ratio: number,  center?: Point): void {
    const group: Group = this.get('group')
    let matrix: Matrix = clone(group.getMatrix())
    const minZoom: number = this.get('minZoom')
    const maxZoom: number = this.get('maxZoom')

    if (!matrix) { 
      matrix = mat3.create(); 
    }

    if(center) {
      mat3.translate(matrix, matrix, [ -center.x, -center.y ])
      mat3.scale(matrix, matrix, [ ratio, ratio ])
      mat3.translate(matrix, matrix, [ center.x, center.y ])
    } else {
      mat3.scale(matrix, matrix, [ ratio, ratio ])
    }

    if (minZoom && matrix[0] < minZoom) {
      return;
    }
    if (maxZoom && matrix[0] > maxZoom) {
      return;
    }

    group.setMatrix(matrix);
    this.emit('viewportchange', { action: 'zoom', matrix });
    this.autoPaint();
  }