1. 几何图形
对几何图形做管理、抽象,几何图形对象在jtopo中的应用:
1. 当做Node节点对象的图形(Node的图形默认就是一个矩形)
2. 当做布局的形状来使用
3. 为动画、特效提供支持
2. 当做Node对象的内容
Node对象有一个方法: setShape();
js
import {Shape, Node} from '@jtopo/core';
// 这里用Shape类的静态方法polygon创建一个5边形
let shape = Shape.polygon(5);
// 将形状逆时针旋转-90度
shape.rotate(-Math.PI / 2);
// 将形状上下镜像
shape.scale(1, -1);
// 将上面的‘形状'应用到某个节点,
let polyNode = new Node(null, 0, 0, 50, 50);
polyNode.setShape(shape);
要点
1. 几何对象创建或者生成后,建议不要修改,尽量保持不变。
2. 一个几何实例对象可以被多个Node共享, 通常不需要创建多个完全一样的实例。
3. 当做自定义布局
js
let rows = 6;
let cols = 6;
let nodes = [];
for (var i = 0; i < rows * cols; i++) {
var node = new Node(null, 32, 32);
node.css({
fillStyle : randomColor()
};
nodes.push(node);
}
// 生成一个网格‘形状' (这里生成的是6x6网格的形状,可以是其它形状:三角形、五角型、Cos函数曲线也是可以的...)
let shape = Shape.outerGrid(rows, cols);
// 根据形状生成’Shape布局‘对象
let layout = stage.layoutSystem.shapeLayout(nodes, shape);
// 中心位置
layout.translate(0, 0);
// 设置布局的尺寸
layout.resize(500, 250);
// 对布局进行旋转操作
layout.rotate(Math.PI / 4);
// 执行布局,可以带动画参数
layout.doLayout({
effect: 'easeInQuart',
duration: 3000,
});