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

## To help you get started, we’ve selected a few @antv/matrix-util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

antvis / G2 / src / geometry / animate / action.ts View on Github
``````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 &lt;= 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
);``````
antvis / G2 / src / geometry / animate / action.ts View on Github
``````// 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
);
}``````
antvis / G2 / src / geometry / animate / action.ts View on Github
``````const x = (box.minX + box.maxX) / 2;
const points = shapeModel.points as Point[];
// 数值如果为负值，那么应该从上往下生长，通过 shape 的关键点进行判断
const y = points[0].y - points[1].y &lt;= 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
);
}``````
antvis / G6 / src / util / path.ts View on Github
``````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;
};``````
antvis / G2 / packages / component / src / axis / line.ts View on Github
``````public getSideVector(offset) {
const isVertical = this.get('isVertical');
const factor = this.get('factor');
// if (Util.isArray(offset)) {
//   return offset.map(value =&gt; 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 &amp;&amp; start.y &lt; end.y) || (!isVertical &amp;&amp; start.x &gt; end.x)) {
direction = true;
}
const verticalVector = vec2.vertical([], normal, direction);
return vec2.scale([], verticalVector, offset * factor);
}``````
antvis / G2 / packages / component / src / axis / line.ts View on Github
``````const factor = this.get('factor');
// if (Util.isArray(offset)) {
//   return offset.map(value =&gt; 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 &amp;&amp; start.y &lt; end.y) || (!isVertical &amp;&amp; start.x &gt; end.x)) {
direction = true;
}
const verticalVector = vec2.vertical([], normal, direction);
return vec2.scale([], verticalVector, offset * factor);
}``````
antvis / G2 / packages / g2 / src / plot / controller / tooltip.ts View on Github
``````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;``````
antvis / G2 / packages / component / src / annotation / arc.ts View on Github
``````radius,
0,
1,
1,
2 * coordCenter.x - start.x,
2 * coordCenter.y - 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 ],
];
}

zIndex: this.get('zIndex'),
attrs: _.assign({ path }, this.get('style')),
});
arcShape.name = 'annotation-arc'; // 用于事件以及动画识别``````
antvis / G2 / packages / component / src / axis / line.ts View on Github
``````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],
};``````
antvis / G6 / src / graph / graph.ts View on Github
``````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 &amp;&amp; matrix[0] &lt; minZoom) {
return;
}
if (maxZoom &amp;&amp; matrix[0] &gt; maxZoom) {
return;
}

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

## @antv/matrix-util

A common util collection for antv projects

MIT