Skip to content

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,
});