# 窗户 Item 示例
# 源代码
查看源代码：/persagy-web-big/src/items/floor/SWindowItem.ts
# 代码说明
# 数据说明
Windows:[
{
Location: {X:0,Y:0,Z:0}, // 位置
ModelId: '', // 模型id
Name: '', // 名称
OutLine: [
[{X:0,Y:0,Z:0},...], // 外轮廓
... // 内轮廓
], // 轮廓线
Owner: '', // 拥有者的RevitId
SourceId: '', // 对应Revit模型id
WallId: '', // 所属墙
Width: 200, // 宽度
Thick: 200, // 厚度
},
...
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 计算边界矩阵
不能在绘制的时候计算,因为绘制是高频调用方法,尽量不要在绘制方法中做大量计算工作;
计算方法一般在数据变化的时候做,如果只是展示的话,则只需要在构造函数中计算一次;
# Y轴取反
revit 使用的坐标系与 canvas 使用的坐标系 Y 轴是相反的; revit 坐标使用的是数学坐标系, Y 轴方向是向上的, canvas 坐标使用的绘图坐标系, Y 轴方向是向下的;
数据是通过 revit 模型导出
# 绘制示例
查看代码
<template>
<div>
<canvas id="wall" width="800" height="400" tabindex="0" />
</div>
</template>
<script lang="ts">
import {SGraphScene, SGraphView} from "@persagy-web/graph/";
import {SWindowItem} from "@persagy-web/big/lib/items/floor/SWindowItem";
import { Component, Vue } from "vue-property-decorator";
@Component
export default class WindowCanvas extends Vue {
view: SGraphView | undefined;
outline1 = [[{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}]];
mounted(): void {
this.init();
}
init(): void{
this.view = new SGraphView('wall');
const scene = new SGraphScene();
this.view.scene = scene;
// 只模拟了轮廓数据
// @ts-ignore
const item = new SWindowItem(null,{OutLine:this.outline1});
scene.addItem(item);
this.view.fitSceneToView();
this.view.scalable = false;
}
}
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35