- 1、本文档共9页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
mxgraph说明文档
mxgraph介绍1.1 基本概念mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑流程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用javascript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。mxgraph支持拖动和克隆细胞,重新调整和改造,连接和断开,拖动和下降,从外部来源,编辑细胞中的标签和更多。mxGraph客户端是一个图形组件,并提供和网页集成的接口。客户端需要一个Web服务器提供所需的文件,也可以在本地文件系统上运行。后台可用于集成到现有存在的服务器所支持的语言中。涉及的一些基本概念:图:由顶点,也称为节点,以及边(节点之间的连接线)组成。顶点可以是图形、图像、矢量绘图、动画以及几乎所有可以在浏览器中操作的图形。交互:使用mxGraph的应用程序中,通过WEB应用程序的GUI改变图形模式。?mxGraph支持拖动、复制图元、重新调整大小、重新构造,连接和断开,从外部源的拖放和删除,编辑图元标签中的位置等等。将交互信息放在客户端,通过javascript实现布局:图形图元可以布置在一个简单的应用程序的任何地方,包括在彼此顶部。图元可通过边是彼此相互联系。mxGraph支持树、流向和层次的布局,来满足大多数布局的需求。2mxgraph使用2.1mxgraph文档目前官方的文档是需要付费的,文档中包括服务端代码,客户端功能以及介绍。文档的结构表:/doc文档根目录,保持此用户手册/dotnet.NET服务器端代码/phpphp代码/javaJava服务器端代码/javascriptJavaScript客户端功能/javascript/examplesmxGraph的HTML演示例子index.html开发库的基础介绍我们现在只使用mxgraph的客户端功能,也就是只关注javascript部分。2.2 使用说明官方文档/javascript/examples下的HTML演示例子,可以通过浏览器直接打开查看效果。把mxgraph应用到我们的项目中,首先需要把js源文件,配置文件,图片文件等加进去。具体步骤:新建文件夹,比如:mxgraph。把src,editors,images等文件夹放到相应的目录下。src文件下包括一些配置文件,图标,基础的样式文件,以及mxClient.js。mxClient.js是mxgraph的javascript部分的核心,提供了在绘图时需要用到的api的,src一般放到HTML文件的上一级目录。editors里包括图片,一些xml配置文件等。新建html文件,比如:test.html引入库文件。用以下代码来加载库文件。script type=text/javascript? mxBasePath = ../src/;/scriptscript type=text/javascript src=../src/js/mxClient.js/scriptmxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。它的值跟src文件夹的路径有关。所要加载的mxgraph相关库文件只有mxClient.js。编写body体。mxgraph是将html的页面元素div当做容器。所以HTML的body里一般是一些div来组成。通过js来给这些容器添加各种元素。比如:div id=main/div编写js。使用mxgraph最主要的工作是写js,下面给一个简单的例子。script type=text/javascriptvar container = document.getElementById(main);container.style.background = url(editors/images/grid.gif);var graph = new mxGraph(container);var parent = graph.getDefaultParent();// 画方块graph.insertVertex(parent, null, Hello, 50, 50, 80, 30);graph.insertVertex(parent, null, World, 200, 50, 80, 30);/script这部分代码的作用主要的是在容器里加入两个节点。页面效果:后面将对js部分做详细介绍。2.3 mxgraph库mxgraph对节点,边等对象提供了一套完整的封装,我们可以很容易根据提供的api,来得到图的信息以及节点之间的关系。mxgraph的底层是通过xml来存取图的信息。除此之外,mxgraph还提供了一套编辑的接口,我们可以很容易地对节点进行删除、复制等操作,添加样式以及编辑元素的信息。mxgrap
您可能关注的文档
- LinuxEXT3文件系统下成功恢复误删的文件.doc
- linuxtar打包压缩解压缩命令说明tar如何解压文件到指定的目录.doc
- libsndfile动态库在VS2015下的调用以及读取wav文件.docx
- Linux下ffmpeg转换工具配置(MP3和AMR格式文件互转).docx
- Linux下tar命令exclude选项排除指定文件或目录.doc
- Linuxmount命令挂载Windows共享文件夹.doc
- Linux下查看文件和文件夹大小的df和du命令.docx
- linux下的文件传输.docx
- linux中openssl生成证书和自签证书.doc
- Linux套接字与虚拟文件系统(二).doc
- 2023-2024学年广东省深圳市龙岗区高二(上)期末物理试卷(含答案).pdf
- 2023-2024学年贵州省贵阳市普通中学高一(下)期末物理试卷(含答案).pdf
- 21.《大自然的声音》课件(共45张PPT).pptx
- 2023年江西省吉安市吉安县小升初数学试卷(含答案).pdf
- 2024-2025学年广东省清远市九校联考高一(上)期中物理试卷(含答案).pdf
- 广东省珠海市六校联考2024-2025学年高二上学期11月期中考试语文试题.pdf
- 2024-2025学年语文六年级上册第4单元-单元素养测试(含答案).pdf
- 2024-2025学年重庆八中高三(上)月考物理试卷(10月份)(含答案).pdf
- 安徽省安庆市潜山市北片学校联考2024-2025学年七年级上学期期中生物学试题(含答案).pdf
- 贵州省部分校2024-2025学年九年级上学期期中联考数学试题(含答案).pdf
文档评论(0)