1. 坐标系统
坐标分三类:
TIP
- 屏幕坐标(Screen):以Canvas的左上角为原点:0,0
- 世界坐标 (World) :以Canvas的中心为原点:0, 0
- 对象本地坐标(Local):以对象的中心为原点:0,0
2. 定位示例
js
// 坐标
node.setXY(0, 0);
// 尺寸
node.resize(100, 50);
// 根据上面坐标和尺寸,得出:左上角坐标( -50, -25), 右下角(50, 25)
// 如下图所示:
js
// 可以通过 left、top、right、bottom配合x、y读取和设置
node.left = 0;
console.log(node.x); // 50
console.log(node.right); // 100
node.bottom = 0;
console.log(node.y); // -25
console.log(node.top); // -50
// left、top、right、bottom 只是x、y的访问器
// node.left 等价于: node.x - node.width / 2;
// node.bottom 等价于: node.y + node.height / 2;
3. 父子关系
Node和Link都有parent 和 children 属性
js
layer.removeAllChild(); // 清空
layer.children.length == 0; // true
let node = new Node();
layer.addChild(node); // node.parent === layer -> true
layer.chidlren[0] === node; // true node 在 layer.chidlren集合里
//...
layer.addChild(node2);
layer.addChild(link3);
// 此时node、node2 和 link3 的 parent相同都是:layer对象
示例:
4. Link对象的parent属性
Link的parent属性可能会自动变换(例如所连接的节点父对象不同,或存在多层嵌套的时候)