mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 10:01:09 +08:00
3.5 KiB
3.5 KiB
title | order |
---|---|
图形或图形分组的变换 | 3 |
G6 3.2
G6 3.2 及以下版本中,实现变换可通过以下方式。
transform(ts)
实例变换方法。参数以数组形式提供,按顺序执行。
例如画布上有以下的一个矩形实例。
const rect = group.addShape('rect', {
attrs: {
width: 100,
height: 100,
x: 100,
y: 100,
fill: '#9EC9FF',
stroke: '#5B8FF9',
lineWidth: 3,
},
// 在 G6 3.3 及之后的版本中,必须指定 name,可以是任意字符串,但需要在同一个自定义元素类型中保持唯一性
name: 'rect-shape',
});
得到的结果如下图所示:
对其进行如下操作:
rect.transform([
['t', 10, 10], // x 方向平移 10, y 方向平移 10
['s', 1.2], // 缩放 1.2 倍
['r', Math.PI / 4], // 旋转 45 度
]);
translate(x, y)
实例的相对位移方法。
move(x, y)
实例的相对位移方法。
rotate(radian)
根据旋转弧度值对图形进行旋转。
scale(sx, sy)
对图形进行缩放。
resetMatrix()
清除图形实例的所有变换效果。
getTotalMatrix()
获取应用到实例上的所有变换的矩阵。
G6 3.3
在 G6 3.3 及以上版本中,废弃了 Group / Canvas 上只适用于三阶矩阵的变换函数:
- 🗑 平移函数 translate;
- 🗑 移动函数 move;
- 🗑 缩放函数 scale;
- 🗑 旋转函数 rotate;
- 🗑 以 (0, 0) 点为中心的旋转函数 rotateAtStart。
在 G6 3.3 版本中要应用矩阵变换的效果,需要手动设置矩阵的值:
- 获取当前矩阵:getMatrix();
- 设置矩阵:setMatrix(matrix) 或 attr('matrix', matrix);
- 重置矩阵:resetMatrix()。
为了方面使用,我们提供了矩阵变换的工具方法:
import { ext } from '@antv/matrix-util';
const transform = ext.transform;
// 3*3 矩阵变换,用于二维渲染
transform(m, [
['t', 100, 50], // translate (100, 50)
['r', Math.PI], // rotate Math.PI
['s', 2, 2], // scale 2 times at x-axis and y-axis
]);
示例
以下方法实现了在自定义节点 example 中增加一个矩形,并将该矩形位移 (100, 50)
后,旋转 Math.PI / 4
,最后在 x 方向放大 2 倍,并在 y 方向缩小 2 倍:
import { ext } from '@antv/matrix-util';
const transform = ext.transform;
G6.registerNode('example', {
drawShape: (cfg, group) => {
const rect = group.addShape('rect', {
attrs: {
width: 100,
height: 100,
x: 100,
y: 100,
fill: '#9EC9FF',
stroke: '#5B8FF9',
lineWidth: 3,
},
// 在 G6 3.3 及之后的版本中,必须指定 name,可以是任意字符串,但需要在同一个自定义元素类型中保持唯一性
name: 'rect-shape',
draggable: true,
});
let matrix = rect.getMatrix();
// 图形或分组的初始矩阵时 null,为了避免变换一个 null 矩阵,需要将其初始化为单位矩阵
if (!matrix) matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
// 3*3 矩阵变换,用于二维渲染
const newMatrix = transform(matrix, [
['t', 100, 50], // translate
['r', Math.PI / 4], // rotate
['s', 2, 0.5], // scale
]);
rect.setMatrix(newMatrix);
},
});