mxGraph学习一—— helloworld例子解读

最新推荐文章于 2024-10-26 12:10:15 发布

weixin_37705284

最新推荐文章于 2024-10-26 12:10:15 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： mxgraph 文章标签： mxGraph mx 泳道图

本文链接：https://blog.youkuaiyun.com/weixin_37705284/article/details/88310661

mxGraph从helloworld开始学习

helloword文件在源码的路径：
mxgraph-master\javascript\examples\helloworld.html

mxGraph中的Hello World，是一个简单的客户端的例子，显示了两个相连的“Hello”和“世界”的顶点标签。这个例子演示了以下几件事：

创建一个嵌入了mxGraph客户端JavaScript的HTML页面；
创建了一个容器（即一个div节点）来装载mxGraph；
在图形mxGraph中加入所需的元素-顶点和边。

<!--
  Copyright (c) 2006-2018, JGraph Ltd
  
  Hello, World! example for mxGraph. This example demonstrates using
  a DOM node to create a graph and adding vertices and edges.
  该例子描述了如何使用一个节点，创建一个图片，并添加顶点和边
-->
<html>
<head>
	<title>Hello, World! example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory
	如果不在相同路径，需要设置basepath为开发库的路径。
	maxBasepath用来定义css、图片、资源和js的使用目录。
	必须加载在mxClient.js之前，而且不应该斜线 -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- Loads and initializes the library 加载并初始化开发库，mxGraph库的路径-->
	<!--mxClient.js是一个包含所有的mxGraph源代码的JavaScript文件。
	从Web服务器下载时， 获得包含所有的JavaScript的单个文件，
	要比分成多个独立文件要快得多，这是由于每个文件 都具有独立的请求/确认开销。
	无论服务器对于一个客户的并行接口的能力差异有多大，速度的 提升通常至少是两倍以上。-->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of t