精华内容
下载资源
问答
  • mxGraph

    2017-12-21 17:41:05
    mxGraph

    mxGraph

    Scalable Vector Graphics
    展开全文
  • mxgraph

    2020-05-13 10:10:39
    mxgraph浅入了解 参考文献:https://www.cnblogs.com/xuxg/articles/3246206.html 1.了解 (1)如何判断需要引入mxgraph产品:过程图、工作流和BPM的可视化图表、流程图、交通或水流量、 数据库和WWW的可视化、...

    mxgraph

    参考文献:https://www.cnblogs.com/xuxg/articles/3246206.html 

    1.了解

    (1)如何判断需要引入mxgraph产品:过程图、工作流和BPM的可视化图表、流程图、交通或水流量、 数据库和WWW的可视化、网络和电信显示、映射应用和地理信息系统、UML图、电子线路、金融、 超大规模集成电路和社会网络、数据挖掘、生化、生态循环、实体和因果关系和组织图表。

    (2)如何选取自己需要mxgraph产品的哪一个库:mxGraph分为在客户端的JavaScript库和在服务器端两种支持的语言之一的.NET或Java库

    (3)选取产品的javasript库,底层使用哪种技术实现:mxGraph使用在浏览器上的客户端的JavaScript功能。而在JavaScript代码层面上,在浏览器中使用了基本的矢量图形语言来显示图形, (对于大多数符合标准的浏览器使用SVG技术,而在IE中使用了的VML技术)

    2.安装

    (1)mxgraph以zip包的形式发布;解压之后可以看到不同的开发库;

    donet:服务端.net代码;

    java:Java服务器端类;

    JavaScript:客户端功能。

     (2)也可以通过使用npm进行安装

    npm install mxGraph -- save

    3.使用

    目录如下

    代码解析如下

    (1)导入

    源码中部分实现代码

    mxBasePath指定mxgraph的根路径,防止库路径改变引起的引入路径错误问题;该指定需在引入mxClient之前

    (2)判断对浏览器的支持性

    (3)mxutils底下封装的消息弹窗示例

    mxUtils.alert();mxUtils.popup();mxUtils.prompt();mxUtils.confirm();mxUtils.error();

    (4)创建容器,平铺整个画布,方便我们验证

    (5)mxclient底下封装了mxDivResizer对样式重置,处理IE怪异模式底下的样式问题

    ------大概看了一下源码,是对页面宽高的重新计算,没有深究是处理怎么样的怪异模式显示问题

    (6)mxEvent底下封装了阻止出发容器里面的默认事件,源码核心preventDefault,禁止浏览器默认的右键菜单啦

    (7)开始绘图,示例一个mxGraph进行绘制,源码中有队svg和vml支持性的判断,核心有createGraphView,createHtml类等

    (8)mxgraph的模型-mxGraphModel (/model/mxgraphModel.js)

    是mxgraph的核心类,对于图形的添加,修改,清除,在该类中实现。对于模型的每一个变化,请调用beginUpdate(), 作出适当的调用更改模型,然后调用endUpate()方法来完成的变化,通知发送变化的事件出去。

    model常用的api

    add(parent, child, index)
    remove(cell)
    setCollapsed(cell, collapsed)
    setGeometry(cell, geometry)
    setRoot(root)
    setStyle(cell, style)
    setTerminal(cell, terminal, isSource)
    setTerminals(edge,source,target)
    setValue(cell, value)
    setVisible(cell, visible)
    也就是说使用上述api时,需要使用调用beginUpdate()和endUpdate()

    mxGraphModel.beginUpdate() - 启动一个事务或子事务处理。

    mxGraphModel.endUpdate() - 完成一个事务或子事务处理。

    mxGraph.addVertex() - 添加一个新顶点到指定的父单元(对于cell的操作)。

    mxGraph.addEdge() - 添加一个边缘到指定的父单元(对于cell的操作)。

    (9)单元对象-mxCell

    插入单元:var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'defaultVertex;fillColor=blue');

    mxGraph.setCellStyle(style, cells) – 封装在开始/结束的更新中, 指定一组单元的格式。

    mxGraph.getCellStyle(cell)

    mxGraph.setCellStyle(style, cells) – 封装在开始/结束的更新中, 指定一组单元的格式。

    mxGraph.getCellStyle(cell)

    (10)组结构

    mxGraph.groupCells(group, border, cells) – 在开始/结束更新之间,把指定的单元加入到指定的组

    mxGraph.ungroupCells(cells) – 把特定的单元从它的父单元中移除, 并把它们加入到它们父单元的父单元。操作之后的空组会被删除。这些操作都是在开始/结束更新之间发生。

    (11)初始化的API

    画布大小

    wnd.setMaximizable(true);

    wnd.setResizable(true);

    wnd.setVisible(true);

    wnd.setScrollable(true);

    图像大小

    graph.zoomIn();

    graph.zoomOut();

    // 禁用浏览器默认的右键菜单栏

    mxEvent.disableContextMenu(container);

    // 在已有容器内构造一个graph

    var graph = new mxGraph(container);

    // 鼠标框选

    new mxRubberband(graph);

    // 在图形中创建默认组件

    var parent = graph.getDefaultParent();

    // 只可预览不可选中拖动连接

    graph.setEnabled(false);

    // 容器大小自适应

    graph.setResizeContainer(true);

    // 动态改变样式

    graph.getView().updateStyle = true;

    // 可否重复连接

    graph.setMultigraph(false);

    // 禁止改变元素大小

    graph.setCellsResizable(false);

    // 允许连线的目标和源是同一元素

    graph.setAllowLoops(true);

     4.源码框架解析

     1.mxgraph的javascript库分为8个类;顶级引入的是mxClient类,包括其他的类

    mxClient.include(mxClient.basePath+'/js/util/...

    mxClient.include(mxClient.basePath+'/js/shape/...

    mxClient.include(mxClient.basePath+'/js/layout/...

    mxClient.include(mxClient.basePath+'/js/model/...

    mxClient.include(mxClient.basePath+'/js/view/...

    mxClient.include(mxClient.basePath+'/js/handler/...

    mxClient.include(mxClient.basePath+'/js/editor/...

    mxClient.include(mxClient.basePath+'/js/io/...

    父类引入子类得方法如下:

    (1)图编辑器包:editor(主要类是mxEditor);

    (2)事件监听:handler(用于框架选择:mxRubberband;工具提示:mxTooltipHandler;单元修改:mxGraphHandler);

    (3)布局处理:layout(实现树形布局算法:mxCompactTreeLayout;)

    mxShape的子类mxPolyline如下继承:

    (4)各种形状包:shape(shape包提供各种形状,这些形状是mxShape的子类)

     (5,6)图像的处理:view,model(核心类:mxGraph)

    /*********************************************引用start************************************************/

    mxGraph指的是包含了mxCells并缓存mxGraphView中单元格的状态的mxGraphModel。根据mxStylesheet中定义的外观,使用mxCellRenderer绘制单元格。撤消历史记录在mxUndoManager中实现。要在图表上显示图标,可以使用mxCellOverlay。验证规则使用mxMultiplicity定义
    /*********************************************引用end************************************************/

      (7) 其他类需要用到的实用方法:util(复制粘贴的mxClipboard;跨浏览器事件处理:mxEvent;通用功能:mxUtils;国际化:mxResource;)

    (8)将JavaScript对象转换为XML:io

     

    最后为了方便大家的沟通与交流请加QQ群: 625787746

    请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140

    展开全文
  • Mxgraph

    2019-04-29 10:13:30
    1. Hello World! Creating an HTML page that links the mxGraph client JavaScript... Creating a container to place the mxGraph into, Adds the required cells to that graph. <script type="text/javas...

    1. Hello World!
     

    • Creating an HTML page that links the mxGraph client JavaScript,
    • Creating a container to place the mxGraph into,
    • Adds the required cells to that graph.
    <script type="text/javascript">mxBasePath = 'javaScript/src'</script>
        <script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

    mxBasePath:这是一个JavaScript变量,定义了css、图像、资源和js目录所在的目录。它是JavaScript代码,需要放在脚本标记中。这必须在加载mxClient.js的行之前,并且后面不应该有斜杠。

    mxClient.js:这是到mxGraph库的路径。如果HTML文件在本地执行,则路径可能是计算机的本地路径或公共Internet路径。如果html页面是从web服务器下载的,那么路径通常是公共Internet路径

    Creation of the container:在代码的底部,在body元素中,定义了加载web页面时调用的函数(onload的值)。它将div容器作为参数传递,该参数在下面定义。这个div是mxGraph组件将放在其中的容器。在本例中,应用了网格背景,就像在绘图应用程序中常用的那样。在创建容器时,除了背景和容器的宽度和高度之外,没有描述图形可视化的其他部分。
    注意,如果不希望出现滚动条,应该始终使用overflow:hidden样式

    The entry function: 在本例中,文件的主要代码是在页面加载时执行的条目方法。这是JavaScript代码,必须在JavaScript脚本元素中。任何mxGraph应用程序的第一行都应该检查是否支持浏览器,如果不支持,则退出。如果支持浏览器,则在div容器中创建一个mxGraph,并在开始/结束更新调用之间向图添加三个单元格。

     

    if (!mxClient.isBrowserSupported())
             {
                mxUtils.error('Browser is not supported!', 200, false);//检查浏览器是否支持MxGraph
             }
             else{
    }
      // Creates the graph inside the given container 
                var graph = new mxGraph(container); 在<div>嵌入graph容器
    • js是一个JavaScript文件,它结合了mxGraph的所有JavaScript源代码。从web服务器下载时,由于每个文件所需的请求/确认的开销,将所有JavaScript作为一个文件获得要比作为许多单独的文件快得多。速度的增加通常至少是x2,尽管它随着服务器的容量而变化,服务器可以在一个客户机上打开并行套接字。
    • JavaScript代码及其依赖项都放在head元素中。
    • 默认情况下,Internet Explorer启用了安全选项,当试图从本地文件系统运行JavaScript时,这些选项会导致用户提示。可以在options菜单中禁用此功能,但是请注意,从本地文件系统运行不是mxGraph的部署场景,这只会在开发期间发生
    • 您的应用程序可以在HTML文件中编写并链接到应用程序中,也可以在单独的JavaScript源代码中编写并链接到HTML中,就像示例中的mxClient.js文件一样

    2 mxGraph Deployment and Debugging

    有两个版本的mxclient.js文件,一个用于生产使用,另一个用于开发/调试。javascript/src/js/mxClient.js是产品版本,javascript/debug/js/mxClient.js是开发版本。第一个版本删除了所有换行,以确保文件尽可能小。这有破坏大多数JavaScript调试器的副作用。在开发过程中,建议您使用包含换行符的调试版本,以便在支持的浏览器中进行调试

    两个mxClient.js文件都是mxGraph的整个JavaScript源文件,为了减小文件大小,删除了所有的空格和注释。在调试时,如果需要调试到mxGraph库本身,则使用单独的源文件更容易。mxGraph的源代码版本包含javascript/devel目录中的source.zip文件中的完整源代码。将其解压缩到mxBasePath并删除完整的mxClient.js文件的负载,可以更容易地调试mxGraph。注意,源zip中的mxclient.js文件是一个引导文件,它加载所有其他JavaScript源代码

    通过压缩代码,可以进一步提高客户机源代码的下载速度。所有现代浏览器都支持接收和解压服务器端压缩的传输,所有优秀的web服务器都支持检测那些不支持它的浏览器,并将未压缩的版本作为回退发送。

    例如,在Apache web服务器上有一个mod_deflate模块,它的使用细节可以通过标准搜索找到。jgraph.com服务器使用这个模块,在任何受支持的浏览器中都没有出现任何问题的报告。
    压缩的使用将mxClient.js文件大小从大约600KB减小到大约130KB。在大多数现代网络中,用户不会注意到这种差异,但是在某些情况下,更小的版本可能更好。

    展开全文
  • MxGRAPH

    2014-05-27 12:48:14
    MXgraph:  点击打开链接
    展开全文
  • mxgraph进阶(五)搭建mxGraph简单应用

    万次阅读 多人点赞 2016-12-31 13:59:57
    mxgraph进阶(五)搭建mxGraph简单应用使用前准备  mxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。  mxBasePath = 'javascript/src/';  </script> //mxClient.js包含该类库的全部所需...
  • mxgraph进阶(四)mxGraph再启程

    万次阅读 2016-12-21 19:21:07
    mxGraph再启程前言  小论文Constructing User Interaction Behaviors Net from System Log. (AICE 2016)依然实现,为了能够顺利毕业。马导师希望自己能够再写一篇高...整理好思路,mxGraph再起航。   回顾自己之前
  • Web绘图——mxGraph项目实战(精华篇)需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次,每个动作另附有一个...
  • mxgraph.MXGRAPH..MXGRAPH..

    2011-05-03 21:33:09
    MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..
  • mxgraph的初步介绍与开发入门前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次。为此,自己想到了mxGraph,遂...
  • mxGraph压缩包

    2016-01-13 13:27:38
    mxGraph压缩包,包含mxGraph2.4和mxGraph1.10的文档。虽然文档是1.10的,但是对mxGraph2.4依旧可用。
  • mxgraph editor

    2018-03-09 11:32:27
    mxgraph editor,可以拖拽图标画业务链,工作流,实现拓扑图
  • mxgraph源文件

    2014-09-02 16:51:00
    mxgraph源文件
  • mxGraph插件

    2018-05-26 13:30:24
     view视图和model模型包实现了由mxGraph表示的图形组件。它是一个mxGraphModel,包含mxcell,以及mxGraphView中缓存单元格的状态。根据mxStylesheet.样式表中定义的外观,使用mxcell渲染器来绘制单元格。撤销历史在...
  • vue-mxgraph-samples 在 vue2 中使用 mxgraph 的一些用例 / used mxgraph in vue2 核心文件 用于封装 mxgraph 的核心文件 let mxgraphFactory = require('mxgraph') const factory = new mxgraphFactory({ ...
  • NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https://github.com/jsGraph/mxgraph https://github.com/process-analytics/mxgraph mxGraph ...
  • mxgraph破解

    热门讨论 2013-10-24 13:28:25
    mxgraph破解版本,直接导入myeclipse下即可运行!想要学习的朋友建议看一下api,mxgraph的api相对来说较为简单,目前没有中文版的奥!压缩包里面是两个版本,一个是破解的全部文件,一个是自己学习的例子,都可以...
  • mxGraph 拓扑图插件

    千次阅读 2017-12-11 15:26:37
    mxgraph
  • 这是mxGraph的现代化版本。 官方的mxGraph在 。 但是,它到现在为止已经停产。 目标 重新格式化为ES6模块以启用树状摇动 偏爱继承而不是继承 用功能组件替换类组件 删除对IE10及以下版本的支持 删除与提取有关的...
  • vue中使用mxgraph杂谈记

    千次阅读 2020-04-19 19:22:26
    mxgraph
  • mxgraph流程图实例

    2021-01-05 17:10:02
    mxgraph流程图使用demo
  • mxgraph.zip

    2020-06-29 10:36:43
    本demo是运用mxgraph.js 和node api 读取xml文件,并解析出来显示,业务上常用这个画流程图和topo状态图;主要适用于,现在的图形可视化操作
  • mxgraph例子

    2015-07-13 09:00:39
    mxgraph的例子 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, ...
  • mxgraph-svg2shape 一套将SVG文件转换为mxGraph资源的工具。 该存储库基于: SVG to XML mxGraph stencil definition translation tool. This was created for internal use, so there are lots of things ...
  • mxGraphModel.xmind

    2020-04-15 15:04:33
    这是mxGraphModel的逻辑图。mxGraph中的一种存储图的模型,或者数据结构。
  • mxGraph API

    2018-11-16 12:05:04
    mxGraph API

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,234
精华内容 493
关键字:

mxgraph