Demo  |   文档  |   博客  |   支持库  |   论坛  |   关于  |   EN
  • 首页
  • 产品
  • 解决方案
  • 下载
  • 合作
  • TWAVER DOCUMENT CENTER
    • 开发指南 – TWaver Doodle
      • 产品概述
      • 场景编辑器
      • 机柜面板编辑器
      • 设备面板编辑器
      • 组件模板编辑器
146 views. Last update: March 24, 2016
  1. TWAVER DOCUMENT CENTER
  2. 开发指南 – TWaver Doodle
  3. 场景编辑器
Print

IN THIS PAGE

  • 1 功能介绍
  • 2 组成部份
    • 2.1 工具栏
      • 2.1.1 对齐方式
      • 2.1.2 分布方式
      • 2.1.3 Import DXF:
      • 2.1.4 Export:导出数据
      • 2.1.5 Save Scene:保存数据
      • 2.1.6 Clear:清除工作区所有内容
      • 2.1.7 2D/3D:切换2D视图或3D视图
    • 2.2 组件栏
    • 2.3 工作区
    • 2.4 属性框
  • 3 系统集成

功能介绍

场景编辑器采用的是2D拖拽,3D呈现的方式。通过简单的拖拽,几分钟即可创建出机房场景。

组成部份

主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
sceneEditor

工具栏

  • 对齐方式

    • 上对齐:所有选中的元素最上面对齐在同一条水平线上。
      alignUp
    • 下对齐:所有选中的元素最下面对齐在同一条水平线上。
      alignDown
    • 左对齐:所有选中的元素最左边对齐在同一条竖直线上。
      alignLeft
    • 右对齐:所有选中的元素最右边对齐在同一条竖直线上。
      alignRight
    • 水平对齐:所有选中的元素中间位置对齐在平均中间位置的水平对齐同一条水平线上。
      alignHor
    • 垂直对齐:所有选中的元素中间位置对齐在平均中间位置的垂直对齐同一条竖直线上。
      alignVer
  • 分布方式

    • 水平分布:所有选中的元素X坐标,按输入的间距摆放。
      flowHor
    • 垂直分布:所有选中的元素Y坐标,按输入的间距摆放。
      flowVer
  • Import DXF:

    导入CAD文件。可以在CAD中编辑房间,门,机柜等模型。

  • Export:导出数据

    点击按钮,可以导出已经编辑完的结果。
    sceneEditorExport

  • Save Scene:保存数据

    。
    点击按钮,可以保存数据到localStorage中,key值为”scene”。

  • Clear:清除工作区所有内容

    。

  • 2D/3D:切换2D视图或3D视图

    。

组件栏

显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。

  1. 2d房间模型
  2. 2d机柜模型
  3. 2d环境模型

工作区

2D视图
sceneEditor2d
3D视图
sceneEditor3D

  • 从左边组件栏拖拽到工作区机房内
  • 鼠标点击选中组件,组件边框变黄为选中状态。
  • 点击选中后,上方黄色小点可以旋转组件
  • 按delete键,可以删除选中的组件。
  • ctrl + c复制选中节点, ctrl + c粘贴

属性框

显示当前选中设备可以编辑属性。

系统集成

  1. 指定make路径
  2. 取得显示编辑器的容器jquery对象
  3. 实例化doodle.SceneEditor对象
  4. 对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
  5. 分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
  6. 清楚所有,调用jsonBox.clear()方法
  7. 调用setMouseEditable方法,切换开启鼠标编辑(默认)和关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑
  8. 取得编辑结果,调用jsonBox.toJson()方法
  9. 加载编辑结果,调用jsonBox.fromJson(jsonData)方法,传入之前编辑的结果
  10. 3D视图中,双击机柜,加载机柜里面的设备
  11. 2D视图中,双击机柜,弹出机柜视图编辑器,摆放机柜里面的设备。
JavaScript
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
    //指定make路径
    make.Default.path = 'make/';
 
    //取得显示编辑器的容器jquery对象
    var parentView = $('.main');
 
    //实例化doodle.SceneEditor
    var sceneEditor = window.sceneEditor = new doodle.SceneEditor(parentView);
    var edit2d = sceneEditor.edit2d;
    var edit3d = sceneEditor.edit3d;
    var jsonBox = sceneEditor.jsonBox;
 
    $("#repeat").buttonset();
 
    //对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
    $('.alignBox').on('click', 'input', function (e) {
        var type = $(this).data('type');
        sceneEditor.align(type);
    });
 
    //分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
    $('#flowBox').on('click', 'input', function (e) {
        var type = $(this).data('type');
        var padding = prompt('请输入间距', 5);
        padding = parseFloat(padding);
        if (isNaN(padding)) {
            return;
        }
        sceneEditor.flow(type, padding);
    });
 
    $("#2d").click(function () {
        edit2d.show();
        edit3d.hide();
    });
    $("#3d").click(function () {
        edit2d.hide();
        edit3d.show();
    });
    window.onresize = function (e) {
        edit2d.layoutGUI();
        edit2d.accordionPane.refresh();
    }
 
    //load dxf file
    var data = localStorage.getItem(doodle.Utils.defaultSceneKey);
    if(data){
        jsonBox.fromJson(data);
        setTimeout(function () {
            edit2d.zoomOverview();
        }, 500);
    }else{
        doodle.Utils.loadFile('./dxf/room.dxf', function (text) {
            sceneEditor.loadFile(text);
        });
    }
 
    //import dxf
    var importDxfDialog = sceneEditor.createImportDialog('Import DXF', 'dxf');
 
    $("#importdxf").click(function () {
        importDxfDialog.show();
    });
 
    //export json
    $('#export').click(function () {
        var text = jsonBox.toJson();
        if (!text) {
            alert("没有数据");
            return;
        }
        var content = "<div>导出数据:<br><textarea>" + text + "</textarea></div>";
        $(content).dialog({
            "title": "导出json",
            "width": 400,
            "height": 500
        });
 
    });
 
    $('#clear').click(function () {
        jsonBox.clear();
    });
 
    $("#exportscene").click(function () {
        var data = jsonBox.toJson();
        localStorage.setItem(doodle.Utils.defaultSceneKey, data);
        alert("保存成功!");
    });
 
    //import json
    var importDialog = sceneEditor.createImportDialog('Import JSON', 'json', function (text) {
        edit2d.getJsonBox().clear();
        edit2d.getJsonBox().fromJson(text);
    });
    $("#import").click(function () {
        importDialog.show();
    });
详细请参考编辑器中的sceneEditor.js

146 views. Last update: March 24, 2016
Print