topology可视化学习基础

Posted 2022-04-30 尔嵘

2D学习文档：快速上手 | 乐吾乐

2D演示地址：乐吾乐Topology

1.获取topology画布上的所有图元信息：

topology.data().pens

拖动一个元素到画布，浏览器控制台可以用上述命令去获取画布上的所有图元的基本信息

[
anchors: (4) […, …, …, …]
children: []
fontSize: 12
height: 40
id: "5e82c606"
image: "../../src/assets/images/dianqi/a29.svg"
key: "5e82c606"
lineHeight: 1.5
lineWidth: 1
locked: 0
name: "image"
rotate: 0
title: "image"
visible: true
width: 40
x: 348
y: 289
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)
]

2.获取（筛选出）画布上指定id的信息;

topology.find("id")

例如筛选id为 bccac74 的的信息

[
    anchors: (4) […, …, …, …]
calculative: canvas: Canvas2, name: 'image', height: 77.28000000000002, width: 84.00000000000001, image: '../../src/assets/images/dianqi/xxdr.svg', …
children: []
fontSize: 12
height: 77.28000000000002
id: "bccac74"
image: "../../src/assets/images/dianqi/xxdr.svg"
key: "bccac74"
lineHeight: 1.5
lineWidth: 1
locked: 0
name: "image"
rotate: 0
title: "image"
visible: true
width: 84.00000000000001
x: 442
y: 68.35999999999999
]