您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么使用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去除水印”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。