js画图开发库--mxgraph--[control-缩放(放大、缩小).html]-优快云博客

本文介绍如何利用js画图开发库mxgraph，实现图形界面的控制缩放功能，包括放大和缩小操作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
js画图开发库--mxgraph--[control-缩放(放大、缩小).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 {
				//去锯齿效果
				mxRectangleShape.prototype.crisp = true;
				
				// 在容器中创建图形
				var graph = new mxGraph(container);
				graph.setPanning(true);
				
				// 删除图标
				var deleteImage = new mxImage('editors/images/overlays/forbidden.png', 16, 16);

				// 重写以添加一个删除按钮 
				mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
				mxCellRenderer.prototype.createControl = function(state) {
					mxCellRendererCreateControl.apply(this, arguments);
					
					var graph = state.view.graph;
					
					if (graph.getModel().isVertex(state.cell))
					{
						if (state.deleteControl == null)
						{
							var b = new mxRectangle(0, 0, deleteImage.width, deleteImage.height);
							state.deleteControl = new mxImageShape(b, deleteImage.src);
							state.deleteControl.dialect = graph.dialect;
							state.deleteControl.preserveImageAspect = false;
							
							this.initControl(state, state.deleteControl, false, function (evt)
							{
								if (graph.isEnabled())
								{
									graph.removeCells([state.cell]);
									mxEvent.consume(evt);
								}
							});
						}
					}
					else if (state.deleteControl != null)
					{
						state.deleteControl.destroy();
						state.deleteControl = null;
					}
				};
				
				// 辅助函数来计算元素边界
				var getDeleteControlBounds = function(state)
				{
					if (state.deleteControl != null)
					{
						var oldScale = state.deleteControl.scale;
						var w = state.deleteControl.bounds.width / oldScale;
						var h = state.deleteControl.bounds.height / oldScale;
						var s = state.view.scale;			

						return (state.view.graph.getModel().isEdge(state.cell)) ? 
							new mxRectangle(state.x + state.width / 2 - w / 2 * s,
								state.y + state.height / 2 - h / 2 * s, w * s, h * s)
							: new mxRectangle(state.x + state.width - w * s,
								state.y, w * s, h * s);
					}
					
					return null;
				};
				
				// 重写以更新大小状态
				mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
				mxCellRenderer.prototype.redrawControl = function(state)
				{
					mxCellRendererRedrawControl.apply(this, arguments);
					
					if (state.deleteControl != null)
					{
						var bounds = getDeleteControlBounds(state);
						var s = state.view.scale;
						
						if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds))
						{
							state.deleteControl.bounds = bounds;
							state.deleteControl.scale = s;
							state.deleteControl.redraw();
						}
					}
				};
				
				// 如果状态被破坏，重写中删除控制
				mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
				mxCellRenderer.prototype.destroy = function(state) {
					mxCellRendererDestroy.apply(this, arguments);

					if (state.deleteControl != null)
					{
						state.deleteControl.destroy();
						state.deleteControl = null;
					}
				};

				//设置容器自动调整大小
				//graph.setResizeContainer(true);
				
				// 拉伸选项
				new mxRubberband(graph);
				
				//  在对象中创建默认组件 
				var parent = graph.getDefaultParent();
								
				//开启模型的更新事务
				graph.getModel().beginUpdate();
				try
				{
					var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
					var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
					var e1 = graph.insertEdge(parent, null, '', v1, v2);
				}
				finally {
					// 更新事务结束 
					graph.getModel().endUpdate();
				}
				
				//是否已图形的中心进行放大，否则以元素为中心放大
				graph.centerZoom = false;
				
				//添加放大和缩小按钮
				document.body.appendChild(mxUtils.button('Zoom In（放大）', function() {
					graph.zoomIn();
				}));
				
				document.body.appendChild(mxUtils.button('Zoom Out（缩小）', function() {
					graph.zoomOut();
				}));
			}
		};
	</script>
</head>

<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">
	<!-- 创建带网格壁纸和曲线的一个容器 -->
	<div id="graphContainer"
		style="overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
	</div>
</body>
</html>