js画图开发库--mxgraph--[wires-电路图.html]

最新推荐文章于 2024-06-05 16:55:09 发布

iteye_17920

最新推荐文章于 2024-06-05 16:55:09 发布

阅读量2.6k

点赞数

分类专栏： mxgraph 文章标签： js画图开发库 mxgraph wires 电路图

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

版权

本文介绍了使用JavaScript绘图库mxgraph来开发电路图的方法，详细解析了如何利用wires模块构建电路图的各个组件和连接，展示了在网页中实现交互式电路图的流程。

摘要由CSDN通过智能技术生成

js画图开发库--mxgraph--[wires-电路图.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">
		// If connect preview is not moved away then getCellAt is used to detect the cell under
		// the mouse if the mouse is over the preview shape in IE (no event transparency), ie.
		// the built-in hit-detection of the HTML document will not be used in this case.
		mxConnectionHandler.prototype.movePreviewAway = false;
		mxConnectionHandler.prototype.waypointsEnabled = true;
		mxGraph.prototype.resetEdgesOnConnect = false;
		mxConstants.SHADOWCOLOR = '#C0C0C0';
		mxConnector.prototype.crisp = true;
		mxLine.prototype.crisp = true;
		var joinNodeSize = 7;
		var strokeWidth = 2;
		
		// 替换接口处图标
		mxConstraintHandler.prototype.pointImage = new mxImage('images/dot.gif', 10, 10);
		
		// 启用导航线
		mxGraphHandler.prototype.guidesEnabled = true;
		
	    // Alt键按下禁用导航线
	    mxGuide.prototype.isEnabledForEvent = function(evt)
	    {
	    	return !mxEvent.isAltDown(evt);
	    };
		
		// 是否自动连接目标
		mxEdgeHandler.prototype.snapToTerminals = true;
		
		// 程序启动
		function main(container)
		{
			var graph = new mxGraph(container);
			graph.view.scale = 1;
			graph.setPanning(true);
			graph.setConnectable(true);
			graph.setConnectableEdges(true);
			graph.setDisconnectOnMove(false);
			graph.foldingEnabled = false;
			
			//最大尺寸
			graph.maximumGraphBounds = new mxRectangle(0, 0, 800, 600)
			graph.border = 50;

			// 禁用下拉菜单
			graph.panningHandler.isPopupTrigger = function() { return false; };
			
			// 启用回车键停止编辑（用shift输入的换行）
			graph.setEnterStopsCellEditing(true);

			// 使用浏览器默认菜单
			new mxRubberband(graph);
			
			// 执行无子单元格的连接点的替代解决方案。 如所示portrefs.html例如以允许为每个端口的呼入/呼出的方向，这可以扩展。
			graph.getAllConnectionConstraints = function(terminal)
			{
			   var geo = (terminal != null) ? this.getCellGeometry(terminal.cell) : null;

			   if ((geo != null ? !geo.relative : false) &&
				   this.getModel().isVertex(terminal.cell) &&
				   this.getModel().getChildCount(terminal.cell) == 0)
			   {
					return [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
				    	new mxConnectionConstraint(new mxPoint(1, 0.5), false)];
			    }

				return null;
			};

			// 约束连接
			graph.connectionHandler.isConnectableCell = function(cell)
			{
				if (this.graph.getModel().isEdge(cell))
				{
					return true;
				}
				else
				{
					var geo = (cell != null) ? this.graph.getCellGeometry(cell) : null;
					
					return (geo != null) ? geo.relative : false;
				}
			};
			mxEdgeHandler.prototype.isConnectableCell = function(cell)
			{
				return graph.connectionHandler.isConnectableCell(cell);
			};
			
			// 添加提示
			graph.setTooltips(true);
			
			var getTooltipForCell = graph.getTooltipForCell;
			graph.getTooltipForCell = function(cell)
			{
				var tip = '';
				
				if (cell != null)
				{
					var src = this.getModel().getTerminal(cell, true);
					
					if (src != null)
					{
						tip += this.getTooltipForCell(src) + ' ';
					}
					
					var parent = this.getModel().getParent(cell);
					
					if (this.getModel().isVertex(parent))
					{
						tip += this.getTooltipForCell(parent) + '.';
					}
	
					tip += getTooltipForCell.apply(this, arguments);
					
					var trg = this.getModel().getTerminal(cell, false);
					
					if (trg != null)
					{
						tip += ' ' + this.getTooltipForCell(trg);
					}
				}

				return tip;
			};

			// 在黑色背景和明亮的风格间切换
			var invert = false;
			
			if (invert)
			{
				container.style.backgroundColor = 'black';
				
				// 白色就地编辑文本
				mxCellEditorStartEditing = mxCellEditor.prototype.startEditing;
				mxCellEditor.prototype.startEditing = function (cell, trigger)
				{
					mxCellEditorStartEditing.apply(this, arguments);
					
					if (this.textarea != null)
					{
						this.textarea.style.color = '#FFFFFF';					
					}
				};
				
				mxGraphHandler.prototype.previewColor = 'white';
			}
			
			var labelBackground = (invert) ? '#000000' : '#FFFFFF';
			var fontColor = (invert) ? '#FFFFFF' : '#000000';
			var strokeColor = (invert) ? '#C0C0C0' : '#000000';
			var fillColor = (invert) ? 'none' : '#FFFFFF';
			
			var style = graph.getStylesheet().getDefaultEdgeStyle();
			delete style['endArrow'];
			style['strokeColor'] = strokeColor;
			style['labelBackgroundColor'] = labelBackground;
			style['edgeStyle'] = 'wireEdgeStyl

最低0.47元/天解锁文章

iteye_17920

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
js画图开发库--mxgraph--[wires-电路图.html]

js画图开发库--mxgraph--[wires-电路图.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=utf-8...
复制链接

扫一扫