GoJS爬坑之旅

2018-07-05

GoJS

GoJS是什么
使用GoJS绘制的一些图形

我进入项目组后参加了第一次项目会议，在会议上项目经理为每个项目成员都分配了任务，我的任务是使用GoJS实现一个拖拽效果，这也是我第一次听说GoJS，在网上查阅相关的资源后发现GoJS的资料比较少，而且绝大多数资源都是英文的，这也为我学习及使用这个框架带来了不小的困难，好在项目经理看出这块做起来比较难后来又加了一个人，现在这块由我和一个同事两个人共同开发。

GoJS是什么

通过查看GoJS官网可知GoJS是一款基于JavaScript的图表绘制组件，使用GoJS可以绘制流程图、UML图、家族关系图、树形图等。

使用GoJS绘制的一些图形

使用GoJS绘制流程图

下图是使用GoJS绘制的一个流程图，这也是官方提供的示例中的一个，也可以访问https://gojs.net/latest/samples/flowchart.html查看流程图效果，同时还可以访问https://gojs.net/latest/samples/index.html查看GoJS官方提供的所有示例

使用GoJS绘制一个简单的图表

引入GoJS文件

根据GoJS官网上的介绍可知，引入GoJS的方式有三种，分别是：下载GoJS文件将GoJS文件放在项目中使用并在项目中引用、通过CDN引入GoJS、通过npm包引入GoJS，这里我们使用最简单的方式，使用第一种方式，根据GoJS下载页中的提示下载go.js文件，GoJS下载页中提示用户可以选中下载go-debug.js文件或下载go.js文件,其中go-debug.js用于开发环境，因为使用go-debug.js时会在控制台中打印一些调试信息便于调试，go.js文件用户生产环境，这里我们直接下载go.js文件，下载好后创建一个HTML文件直接引入就可以了

编写实现代码

下面是一段简单的GoJS代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoJS绘制的一个简单的图表</title>
    <script src="./go.js"></script>
    <script>
        function init() {

            //表示在id为"myDiagramDiv"的标签上绘制GoJS图表
  var diagram = new go.Diagram("myDiagramDiv");

            diagram.model = new go.GraphLinksModel(
                [
                    //绘制一个节点，节点的key值为"Hello"，其中GoJS中的key值不会重复，是GoJs中的标识
  { key: "Hello" },

                    //绘制一个节点，节点的key值为"World!"，GoJS中的key值不会重复，是GoJs中的标识
  { key: "World!" }
                ],
                [
                    //在key值为"Hello"的节点与key值为"World!"的节点之间绘制一条连线
  { from: "Hello", to: "World!" }
                ]
            );
        }
    </script>
</head>
<body onload="init()">
    <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>
</body>
</html>

执行结果，因为GoJS是收费的，可以免费使用，但是不支付授权费在左上角会有一个水印，并且有些功能不能使用

破解GoJS

除了支付授权费还可以通过破解的方式去除左上角的水印，破解方式是使用打开go.js文件或者go-debug.js文件并注释掉go.js文件或者go-debug.js中的下面这段代码

b[w.Kg("7ca11abfd022028846")]=w.Kg("398c3597c01238");for(var c=["5da73c80a36755dc038e4972187c3cae51fd22","32ab5ff3b26f42dc0ed90f22432913b54ae6247590da4bb21c324ba3a84e385776","54a702f3e53909c447824c6706603faf4cfb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387","74bf19bce72555874c86"],d=1;5>d;d++)b[w.Kg("7ca11abfd7330390")](w.Kg(c[d-1]),10,15*d+0);b[w.Kg("7ca11abfd022028846")]=w.Kg("39f046ebb36e4b");for(d=1;5>d;d++)b[w.Kg("7ca11abfd7330390")](w.Kg(c[d-
1]),10,15*d+0);if(4!==c.length||"5"!==c[0][0]||"7"!==c[3][0])w.p=function(a,b){var c=new da(a,b,2);Object.freeze(c);a[b]=c;var d=a.fv;d instanceof ma||(d=new ma("string",da),a.fv=d);d.add(b,c);return c};

破解成功后可以看到图表上已经没有水印

使用GoJS实现一个拖拽效果

下图是我使用GoJS实现的一个简单的拖拽效果，整个拖拽界面由两部分组成，左侧菜单和右侧画布，左侧菜单中包含篮子、苹果、桃子、土豆、肉，用户根据需要将食物添加到对应篮子中，例如：苹果只能拖入放苹果的篮子中，桃子只能拖入放桃子的篮子中等，当将食物拖入与食物不匹配的篮子中时，食物不能添加到篮子中，当将食物添加到对应的篮子中后会给食物编号，例如第一个苹果命名为苹果1，第二苹果命名为苹果2，当删除食物时会对篮子中已有的食物重新编号
没将物品拖到对应篮子中时的效果

将物品拖入了对应篮子中的效果

项目地址：https://meishadevs.github.io/JavaScriptDemo/拖拽效果
项目源码：https://github.com/meishadevs/JavaScriptDemo/tree/master/拖拽效果

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：【文章转载自meishadevs：http://meishadevs.com/blog/GoJS爬坑之旅/】

上一篇：数据库中的视图简介

下一篇：idea中导入maven项目