js画图开发库--mxgraph--[tree-树形结构图.html]

最新推荐文章于 2023-08-19 11:40:05 发布

iteye_17920

最新推荐文章于 2023-08-19 11:40:05 发布

阅读量1.5k

点赞数

分类专栏： mxgraph 文章标签： js画图开发库 mxgraph tree 树形结构图

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

版权

本文介绍了如何利用js画图开发库mxgraph来构建和展示树形结构图，详细讲解了相关步骤和关键代码，帮助开发者实现交互式的图形界面。

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

js画图开发库--mxgraph--[tree-树形结构图.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 TreeNodeShape() { };

		TreeNodeShape.prototype = new mxCylinder();
		TreeNodeShape.prototype.constructor = TreeNodeShape;

		// 定义的上边缘部分的长度。
		TreeNodeShape.prototype.segment = 20;

		// 根据状态显示元素
		TreeNodeShape.prototype.apply = function(state)
		{
			mxCylinder.prototype.apply.apply(this, arguments);
			this.state = state;
		};
		
		TreeNodeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
		{
			var graph = this.state.view.graph;
			var hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
			
			if (isForeground)
			{
				if (hasChildren)
				{
					// 这里使用的是元素范围外边距
					path.moveTo(w / 2, h + this.segment);