146 views. Last update: March 24, 2016
IN THIS PAGE
功能介绍
场景编辑器采用的是2D拖拽,3D呈现的方式。通过简单的拖拽,几分钟即可创建出机房场景。
组成部份
主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
工具栏
-
对齐方式
-
分布方式
-
Import DXF:
导入CAD文件。可以在CAD中编辑房间,门,机柜等模型。
-
Export:导出数据
-
Save Scene:保存数据
。
点击按钮,可以保存数据到localStorage中,key值为”scene”。 -
Clear:清除工作区所有内容
。
-
2D/3D:切换2D视图或3D视图
。
组件栏
显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。
- 2d房间模型
- 2d机柜模型
- 2d环境模型
工作区
- 从左边组件栏拖拽到工作区机房内
- 鼠标点击选中组件,组件边框变黄为选中状态。
- 点击选中后,上方黄色小点可以旋转组件
- 按delete键,可以删除选中的组件。
- ctrl + c复制选中节点, ctrl + c粘贴
属性框
显示当前选中设备可以编辑属性。
系统集成
- 指定make路径
- 取得显示编辑器的容器jquery对象
- 实例化doodle.SceneEditor对象
- 对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
- 分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
- 清楚所有,调用jsonBox.clear()方法
- 调用setMouseEditable方法,切换开启鼠标编辑(默认)和关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑
- 取得编辑结果,调用jsonBox.toJson()方法
- 加载编辑结果,调用jsonBox.fromJson(jsonData)方法,传入之前编辑的结果
- 3D视图中,双击机柜,加载机柜里面的设备
- 2D视图中,双击机柜,弹出机柜视图编辑器,摆放机柜里面的设备。
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(); }); |