加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

mxgraph--自定义工具栏toolbar,toolsbar

(2014-03-27 11:31:12)
分类： mxGraph

 js画图开发库--mxgraph--[toolbar-工具栏.html] 

 
http://dl.iteye.com/upload/attachment/0080/5983/aa703513-eaa1-3f1b-835d-82990ffff5c0.png
 

 

 

  1. <</span>html xmlns=http://www.w3.org/1999/xhtml>  
  2.     <</span>head>  
  3.     <</span>meta http-equiv=Content-Type content="text/html;charset=utf-8">  
  4.     <</span>title>工具栏</</span>title>  
  5.   
  6.       
  7.     <</span>script type="text/javascript">  
  8.         mxBasePath = '../src';  
  9.     </</span>script>  
  10.   
  11.       
  12.     <</span>script type="text/javascript" src="../src/js/mxClient.js"></</span>script>  
  13.       
  14.       
  15.     <</span>script type="text/javascript">  
  16.         //  程序在此方法中启动   
  17.         function main()  
  18.         {  
  19.             //定义新连接的图标  
  20.             mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);  
  21.           
  22.             // 检测浏览器兼容性  
  23.             if (!mxClient.isBrowserSupported())  
  24.             {  
  25.                 mxUtils.error('Browser is not supported!', 200, false);  
  26.             }  
  27.             else  
  28.             {  
  29.                 // 创建工具栏容器  
  30.                 var tbContainer = document.createElement_x('div');  
  31.                 tbContainer.style.position = 'absolute';  
  32.                 tbContainer.style.overflow = 'hidden';  
  33.                 tbContainer.style.padding = '2px';  
  34.                 tbContainer.style.left = '0px';  
  35.                 tbContainer.style.top = '26px';  
  36.                 tbContainer.style.width = '24px';  
  37.                 tbContainer.style.bottom = '0px';  
  38.                   
  39.                 document.body.appendChild(tbContainer);  
  40.               
  41.                 // 创建工具栏监听工具  
  42.                 var toolbar = new mxToolbar(tbContainer);  
  43.                 toolbar.enabled = false  
  44.                   
  45.                 // 在图形中创建容器   
  46.                 container = document.createElement_x('div');  
  47.                 container.style.position = 'absolute';  
  48.                 container.style.overflow = 'hidden';  
  49.                 container.style.left = '24px';  
  50.                 container.style.top = '26px';  
  51.                 container.style.right = '0px';  
  52.                 container.style.bottom = '0px';  
  53.                 container.style.background = 'url("editors/images/grid.gif")';  
  54.   
  55.                 document.body.appendChild(container);  
  56.                   
  57.                 // 解决IE浏览器忽略的样式  
  58.                 if (mxClient.IS_QUIRKS)  
  59.                 {  
  60.                     document.body.style.overflow = 'hidden';  
  61.                     new mxDivResizer(tbContainer);  
  62.                     new mxDivResizer(container);  
  63.                 }  
  64.       
  65.                 // 在容器中创建图形和模型  
  66.                 var model = new mxGraphModel();  
  67.                 var graph = new mxGraph(container, model);  
  68.   
  69.                 //在图中，启用新的连接  
  70.                 graph.setConnectable(true);  
  71.                 graph.setMultigraph(false);  
  72.   
  73.                 // 按下回车和空格键停止编辑  
  74.                 var keyHandler = new mxKeyHandler(graph);  
  75.                 var rubberband = new mxRubberband(graph);  
  76.                   
  77.                 var addVertex = function(icon, w, h, style)  
  78.                 {  
  79.                     var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);  
  80.                     vertex.setVertex(true);  
  81.                   
  82.                     addToolbarItem(graph, toolbar, vertex, icon);  
  83.                 };  
  84.                   
  85.                 addVertex('editors/images/rectangle.gif', 100, 40, '');  
  86.                 addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');  
  87.                 addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');  
  88.                 addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');  
  89.                 addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');  
  90.                 addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');  
  91.                 addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');  
  92.                 toolbar.addLine();  
  93.                   
  94.                 var button = mxUtils.button('Create toolbar entry from selection', function(evt)  
  95.                 {  
  96.                     if (!graph.isSelectionEmpty())  
  97.                     {  
  98.                         // 创建一个副本，并保存它的状态  
  99.                         var cells = graph.getSelectionCells();  
  100.                         var bounds = graph.getView().getBounds(cells);  
  101.                           
  102.                         // 添加、删除功能  
  103.                         var funct = function(graph, evt, cell)  
  104.                         {  
  105.                             graph.stopEditing(false);  
  106.               
  107.                             var pt = graph.getPointForEvent(evt);  
  108.                             var dx = pt.x - bounds.x;  
  109.                             var dy = pt.y - bounds.y;  
  110.                               
  111.                             var clones = graph.importCells(cells, dx, dy);  
  112.                             graph.setSelectionCells(clones);  
  113.                         }  
  114.               
  115.                         // 创建拖动预览图标  
  116.                         var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);  
  117.                         mxUtils.makeDraggable(img, graph, funct);  
  118.                     }  
  119.                 });  
  120.               
  121.                   
  122.                 button.style.position = 'absolute';  
  123.                 button.style.left = '2px';  
  124.                 button.style.top = '2px';  
  125.                   
  126.                 document.body.appendChild(button);  
  127.             }  
  128.         }  
  129.           
  130.         function addToolbarItem(graph, toolbar, prototype, image)  
  131.         {  
  132.             // 添加、删除功能  
  133.             var funct = function(graph, evt, cell)  
  134.             {  
  135.                 graph.stopEditing(false);  
  136.   
  137.                 var pt = graph.getPointForEvent(evt);  
  138.                 var vertex = graph.getModel().cloneCell(prototype);  
  139.                 vertex.geometry.x = pt.x;  
  140.                 vertex.geometry.y = pt.y;  
  141.                       
  142.                 graph.addCell(vertex);  
  143.                 graph.setSelectionCell(vertex);  
  144.             }  
  145.   
  146.             // 创建拖动预览图标  
  147.             var img = toolbar.addMode(null, image, funct);  
  148.             mxUtils.makeDraggable(img, graph, funct);  
  149.         }  
  150.   
  151.     </</span>script>  
  152. </</span>head>  
  153.   
  154.   
  155. <</span>body onload="main();">  
  156. </</span>body>  
  157. </</span>html>  

 

 


原文：http://chwshuang.iteye.com/blog/1797903

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有