js画图开发库--mxgraph--[Guides-导航线.html]
?js画图开发库--mxgraph--[Guides-导航线.html]?
?
导航线设置
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>导航线</title><!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 --><script type="text/javascript">mxBasePath = '../src';</script><!-- 引入支持库文件 --><script type="text/javascript" src="../src/js/mxClient.js"></script><!-- 示例代码 --><script type="text/javascript">//程序在此启动function main(container){// 检测浏览器兼容性if (!mxClient.isBrowserSupported()){mxUtils.error('Browser is not supported!', 200, false);}else{// 启用导航线mxGraphHandler.prototype.guidesEnabled = true; // Alt 按下禁用导航线 mxGraphHandler.prototype.useGuidesForEvent = function(me) { return !mxEvent.isAltDown(me.getEvent()); }; // 导航先颜色（默认红色）mxConstants.GUIDE_COLOR = '#FF0000'; // 导航线宽度mxConstants.GUIDE_STROKEWIDTH = 1;// 导航线自动连接到目标mxEdgeHandler.prototype.snapToTerminals = false;// 导航线去锯齿效果mxRectangleShape.prototype.crisp = true;// 在容器中创建图形var graph = new mxGraph(container);graph.setConnectable(true);graph.gridSize = 30;// 更改默认内置样式var style = graph.getStylesheet().getDefaultEdgeStyle();style[mxConstants.STYLE_ROUNDED] = true;style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;graph.alternateEdgeStyle = 'elbow=vertical';// 启动浏览器默认右键下拉列表new mxRubberband(graph);// 创建默认窗体var parent = graph.getDefaultParent();// 开启更新事务graph.getModel().beginUpdate();var v1;try{v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);var v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);var e1 = graph.insertEdge(parent, null, '', v1, v2);}finally{// 结束更新事务graph.getModel().endUpdate();} // 处理光标键 var nudge = function(keyCode) { if (!graph.isSelectionEmpty()){ var dx = 0; var dy = 0; if (keyCode == 37){ dx = -1;} else if (keyCode == 38) { dy = -1; } else if (keyCode == 39) { dx = 1; } else if (keyCode == 40) { dy = 1; } graph.moveCells(graph.getSelectionCells(), dx, dy);} };// 在键盘上注册初始焦点事件graph.container.focus(); // 处理按键事件 var keyHandler = new mxKeyHandler(graph); // 忽略输入按键。如果你想删除此行的回车键就可以停止编辑 keyHandler.enter = function() {}; keyHandler.bindKey(37, function(){nudge(37);}); keyHandler.bindKey(38, function() { nudge(38); }); keyHandler.bindKey(39, function() { nudge(39); }); keyHandler.bindKey(40, function() { nudge(40); });}};</script></head><!-- 页面载入时启动程序 --><body onload="main(document.getElementById('graphContainer'))"><!-- 创建带网格壁纸和曲线的一个容器 --><div id="graphContainer"style="overflow:hidden;width:821px;height:641px;background:url('editors/images/grid.gif');cursor:default;"></div></body></html>?
?
?