mxGraph起步

mxGraph是啥,自行百度吧,据说可以画流程之类的东西,粗浅的认识,官网https://www.jgraph.com/
下载地址github:https://github.com/jgraph/mxgraph
首先解压缩,然后把javascript\src文件夹拷贝出来2.11M或许这个是不需要的,
确实不需要,把javascript文件夹下的mxClient.min.js放到javascript\src\js里就够了,然后把src文件夹重命名为mx,大小为771K,
建立step-01.html文件

<html>
<head>
  <title>step-01</title>
  <script type="text/javascript">
    mxBasePath = './mx';
  </script>
  <script type="text/javascript" src="./mx/js/mxClient.min.js"></script>
  <script type="text/javascript">
    function main(container)
    {
      if (!mxClient.isBrowserSupported())
      {
        mxUtils.error('Browser is not supported!', 200, false);
      }
      else
      {
        mxUtils.error('这个浏览器不错!', 200, true);
      }
    }
  </script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
  <div id="graphContainer">
  </div>
</body>
</html>

关于mxUtils的文档,其它类似
http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxUtils-js.html
增加graphContainer的样式,需要去javascript\examples\editors\images里搬出grid.gif作为背景底纹
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('img/grid.gif');cursor:default;"

禁用浏览器右键菜单
mxEvent.disableContextMenu(container);
在容器中创建作图区
var graph = new mxGraph(container);
允许框选(只读是无效)
new mxRubberband(graph);
获取根节点
var parent = graph.getDefaultParent();
设置只读
graph.setEnabled(false);
画些东西进去
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Miku', 20, 20, 50, 30);
var v2 = graph.insertVertex(parent, null, 'Q!', 200, 150, 30, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
graph.getModel().endUpdate();
}

算是修正后的hello world吧

<html>
<head>
  <title>step-01</title>
  <script type="text/javascript">
    mxBasePath = './mx';
  </script>
  <script type="text/javascript" src="./mx/js/mxClient.min.js"></script>
  <script type="text/javascript">
    function main(container)
    {
      if (!mxClient.isBrowserSupported())
      {
        mxUtils.error('Browser is not supported!', 200, false);
      }
      else
      {
        mxUtils.error('这个浏览器不错!', 200, true);
        mxEvent.disableContextMenu(container);
        var graph = new mxGraph(container);
        graph.setEnabled(false);
        new mxRubberband(graph);
        var parent = graph.getDefaultParent();
        graph.getModel().beginUpdate();
        try
        {
          var v1 = graph.insertVertex(parent, null, 'Miku', 20, 20, 50, 30);
          var v2 = graph.insertVertex(parent, null, 'Q!', 200, 150, 30, 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('img/grid.gif');cursor:default;">
  </div>
</body>
</html>

参考:
https://www.cnblogs.com/ptko/p/7048514.html

标签: none

添加新评论