怎么使用GoJs去除水印

这篇文章主要介绍“怎么使用GoJs去除水印”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用GoJs去除水印”文章能帮助大家解决问题。

gojs的引入

我们可以直接引入js的方法对gojs进行引入

<script src="go.min.js"></script>

还可以使用cdn的方式进行使用

<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

当然也可以通过npm进行安装

npm install gojs --save

本文档以引入gojs文件的方式，在vue中使用为例。因此我是在index中引入了gojs文件，因为方便去除水印，并且代码的同步。

然后我们就可以gojs进行使用啦，首先我们需要在使用的页面进行引入。

<script>
let $$ = go.GraphObject.make;//因为项目中使用到jquery,所以使用$$进行一个区分
export default {

然后在mounted中对this进行一个接收，以便我们在使用的时候出现this指向错误的问题。

mounted(){
    let _this = this
    this.$nextTick(()=>{
       this.init();//gojs实例化方法
    })
}

和很多可视化框架一样，我们首先要为我们的图形渲染提供一个容器，

<div 
    id="myDiagramDiv" 
    style="width:300px; 
    height:300px;">
</div>

然后我们对gojs进行实例化,通过容器的id进行绑定，并且为图形的布局方式设置一个树形布局。

init(){
    this.myDiagram = $$(go.Diagram, "myDiagramDiv",{
	layout: $$(go.TreeLayout)//布局方式,TreeLayout为树形布局
    });
}

这样，我们一个简单的画布就已经初始化完成了。然后我们在画布中加入一些相数据

this.myDiagram.model = new go.Model(
  [ 
    { key: "1" },
    { key: "1-1" },
    { key: "1-2" }
  ],
  [
    {form:"1",to:"1-1"},
    {form:"1",to:"1-2"},
  ]);

然后一个简单的树形布局的图形就出来了

在执行new go.Model的时候，其传入的两个参数分别为节点数据和连线数据，在这里我们称之为nodes和links，其中nodes中包括key（必须，节点的唯一标识）和其他字段（主要是存储一些节点的配置项，比如节点的number数据或者其他需要在节点内显示的文字和图表等），而links包括from（必须，连线的出发节点的key）和to（必须，连线的结尾节点的key）字段和其他字段（比如连线上的关系文字说明），其中节点通过key来标识，因此我们要求数据的key必须唯一。不然的话，link数据在匹配出发节点和结束节点的会匹配到nodes数据中key值相同后面的节点，而nodes数据中key值相同的面的数据节点会生成一个游离的节点，因此不符合我们的需求。并且因为属性布局的特殊结构，我们还可以parent字段来处理一下数据。

this.myDiagram.model = new go.TreeModel(
    [ // the nodeDataArray
        { key: "1" },
        { key: "1-1", parent: "1" },
        { key: "1-2", parent: "1" }
    ]);

可以根据自己的实际需求进行选择性进行哪种方式渲染方式。

去除水印

当然你应该也发现了，图像渲染的画布上会出现gojs的版本信息和介绍等等水印，而去除这些水印是需要氪金的，然而我们还有一些其他方法能对水印进行去除，我们在下载的go.min.js中全局搜索7eba17a4ca3b1a8346找到a.ir或者a.jv等，因为版本的不一样属性的名字也会发生改变

a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);

然后把这段代码替换为

a.ir=function(){return true;};

只要保证属性名一致就可以，然后重启我们的项目就可以清除水印啦。

关于“怎么使用GoJs去除水印”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。