`

js画图--mxgraph--helloword.html 第一个示例

阅读更多

helloword

 

第一个例子~!

 

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>Hello, World! example for mxGraph</title>
	<!-- 如果不是在同一个目录的库,就设置根目录'mxBasePath' -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>
	<!-- 加载和初始化库'mxClient.js' -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>

	<!-- 示例代码 -->
	<script type="text/javascript">
		//程序从这里开始。创建了一个示例图中的DOM节点与指定的ID。调用此函数时从onLoad事件处理程序的文件(见下文)
		function main(container)
		{
			//检查浏览器是否支持
			if (!mxClient.isBrowserSupported()) {
				//如果浏览器不支持,显示错误信息。
				mxUtils.error('Browser is not supported!', 200, false);
			} else {
				//能够实现在SVG中清晰呈现矩形,即:去锯齿效果
				mxRectangleShape.prototype.crisp = true;
				
				//在给定的容器中创建的图形
				var graph = new mxGraph(container);

				//还可以将图形设置成自适应大小
				//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();
				}
			}
		};
	</script>
</head>
<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">
	<!-- 创建带网格壁纸和曲线的一个容器 -->
	<div id="graphContainer" 
		style="position:relative;overflow:hidden;width:321px;height:241px;background:url('../examples/editors/images/grid.gif');cursor:default;">
	</div>
</body>
</html>

 

 

 

 

 

  • 大小: 4.5 KB
分享到:
评论

相关推荐

    mxgraph.MXGRAPH..MXGRAPH..

    MXGRAPH通常指的是一个开源的JavaScript图形库,用于创建可交互的图表和流程图,但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息,我可以提供如下内容: MXGRAPH是一个强大的图形编辑框架,主要用于创建富...

    mxGraph开发入门指南.pdf

    mxGraph是一个基于JavaScript的图形绘制库,广泛用于创建交互式的图表和图形应用程序。它支持Web应用程序,允许用户在网页上动态创建和编辑图表,例如流程图、组织结构图、网络图等。mxGraph具有许多特性,包括跨...

    mxgraph开发包

    `mxGraph` 是一个强大的、可扩展的JavaScript图形库,主要用于创建交互式的图表和流程图。它由JGraph公司开发,支持Java和JavaScript环境,同时兼容HTML5。mxGraph的核心特性包括图形绘制、布局算法、事件处理和丰富...

    mxGraph绘图软件js库(版本1.9.1.3,破解版)

    十分强大的js绘图工具,适用于设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。这是破解过的源js库。

    在线画图wwwdrawio网站的源码基于mxGraph开发

    mxGraph是一个用JavaScript编写的开源图形库,专门用于在Web应用中实现交互式的图形编辑。它提供了丰富的API,可以绘制复杂的图形结构,支持多种图形操作,如拖放、连接、缩放和平移。mxGraph的核心特性包括: 1. *...

    mxGraph中文文档.md

    mxgraph.js中文文档是一个官方的api,翻译来源于sunflower(github: https://github.com/SunInfoFE),提供给更多的开发者参考和共享源码资源!

    js画图框架--mxgraph--入门

    **JS画图框架——mxGraph 入门指南** 在网页应用中,图形界面设计和交互已经成为不可或缺的一部分。JavaScript,作为最广泛使用的客户端脚本语言,自然也提供了多种库和框架来实现这一目标。其中,mxGraph 是一个...

    vue-mxgraph-example-master (2).zip

    在这个名为“vue-mxgraph-example-master (2).zip”的压缩包中,我们看到一个结合了Vue.js与mxGraph的入门实例项目。mxGraph是一个功能强大的JavaScript库,用于创建可交互的图形编辑器,支持绘制流程图、网络拓扑图...

    mxGraph:在HTML页面中制作流程图的JS插件

    mxGraph是一款强大的JavaScript库,专为在Web应用中创建交互式和可编辑的图形界面而设计,特别是用于绘制流程图、组织结构图、网络拓扑图等。它以其丰富的功能集、灵活性和高性能而在IT领域受到广泛欢迎。下面将详细...

    mxgraph editor

    **mxgraph Editor** 是一款基于JavaScript的开源图形编辑器,专为绘制流程图、工作流、拓扑图等图表设计。它使用了mxGraph库,一个功能强大的图形渲染和操作库,提供了丰富的图形编辑功能。 **mxGraph核心概念:** ...

    mxGraph绘图插件

    总的来说,mxGraph是一个功能全面、易于集成的JavaScript绘图库,无论你是想要构建一个简单的流程图应用还是一个复杂的图形编辑工具,它都能提供必要的工具和支持。通过深入理解和熟练掌握mxGraph,你可以在Web应用...

    mxGraph JS 绘图组件

    mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流  程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用  javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...

    huiger123-mxgraph-master.zip

    mxGraph是一款强大的JavaScript图形库,主要用于创建交互式和可自定义的图表、流程图和模型。这个开源项目,"huiger123-mxgraph-master.zip",包含了mxGraph的源代码,允许开发者深入理解其内部工作原理并进行扩展。...

    mxGraph1.9.1.1 mxclient.js破解文件下载

    mxGraph1.9.1.1 mxclient.js破解文件下载 1.找到mxclient.js文件中的这句代码 注释 if ((eval&#40;'/156/145/167/40/104/141/164/145/50/51/56/147/145/164/124/151/155/145/50/51'&#41; / 1000) - 1270532723 &gt;...

    mxGraph 1.4.0.0

    mxGraph 是一个强大的JavaScript图形库,它允许开发者在Web应用程序中创建交互式图表、流程图和其他可视化内容。这个资源提供的是mxGraph的1.4.0.0版本,包括针对Internet Explorer(ie)和Firefox两个浏览器优化的...

    mxGraph\mxclient-1.8.0.3破解

    mxGraph1.8.0.3破解版mxclient,分IE ,FF 和chrome三个部分,不同浏览器加载不同的js文件,手动尝试过,1.8.0.5官方的例子都可以正常运行。

    mxgraph-demo-源码.rar

    mxGraph 是一个强大的 JavaScript 图形库,它允许开发者在 Web 浏览器中创建和编辑图形界面。这个名为 "mxgraph-demo-源码" 的压缩包包含了 mxGraph 的示例源代码,为我们提供了一个深入理解 mxGraph 功能和实现原理...

    mxgraph Demo汉化(简单实例)

    mxgraph 是一个强大的JavaScript图形库,它允许开发者创建交互式图表、流程图和其他图形界面。这个"mxgraph Demo汉化(简单实例)"是专为初学者设计的,旨在帮助那些想要了解或深入学习mxgraph的朋友们提供一个中文...

Global site tag (gtag.js) - Google Analytics