92 views. Last update: March 22, 2016
功能介绍
组件模板编辑器是可视化修改组建属性、样式等信息的编辑工具。
组成部份
主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
工具栏
组件栏
显示make中注册的模型,类别为”基本模型”、”机柜模型”、”设备”和”板块”的所有模型。如何在make中注册设备,请参照make使用手册。
工作区
显示左边选中的组件或导入的组件3D视图。
属性框
显示当前选中组件可以编辑的属性。
系统集成
- 指定make路径
- 取得显示编辑器的容器jquery对象
- 实例化doodle.ModelEditor对象
- 调用importJsonObject方法导入数据
- 调用getJsonObject方法导出数据
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 |
//指定make路径 make.Default.path = './make/'; //取得显示编辑器的容器jquery对象 var parentView = $('.main'); //实例化doodle.ModelEditor对象 var modelEditor = window.modelEditor = new doodle.ModelEditor(parentView); //调用importJsonObject方法导入数据 $('#import').click(function () { console.log('导入内容'); importDialog.show(); }); //import json var importDialog = modelEditor.createImportDialog('Import JSON', 'json', function (text) { var object = JSON.parse(text); modelEditor.importJsonObject(text); }); //调用getJsonObject方法导出数据 $('#save').click(function () { var text = modelEditor.getJsonObject(); if (!text) { alert("没有数据"); return; } console.log(text); var content = "<div>导出数据:<br><textarea>" + text + "</textarea></div>"; $(content).dialog({ "title": "导出json", "width": 400, "height": 500 }); }); |