js画图开发库--mxgraph--[Guides-导航线.html]

最新推荐文章于 2024-05-07 10:21:45 发布

iteye_17920

最新推荐文章于 2024-05-07 10:21:45 发布

阅读量365

点赞数

分类专栏： mxgraph 文章标签： js画图开发库 mxgraph Guides 导航线.html]

本文链接：https://blog.csdn.net/iteye_17920/article/details/82481988

版权

mxgraph 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

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 οnlοad="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>

iteye_17920

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js画图开发库--mxgraph--[Guides-导航线.html]

js画图开发库--mxgraph--[Guides-导航线.html] 导航线设置&lt;!Doctype html&gt;&lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content="text/html;charset=u...
复制链接

扫一扫