一、流程圖效果

最近一段時間在研究go.js,它是一款前端開發畫流程圖的一個外掛，也是一個難點，要說為什麼是難點，首先，它是依賴畫布canvas知識開發。其次，要依賴於內部API開發需求，開發專案需求的時候就要花費大量的時間去熟悉go.js的API，然後才能進行開發。話不多說，我就先把我最近做的專案案例效果圖展示一下：

看到效果圖大家可能會想這個挺簡單的，會想沒什麼難點，其實真正開發的時候才會知道的、才會領悟到。

二、為什麼選go.js流程圖外掛去開發專案？

在專案開發一期的時候我用的不是go.js,而用的是一款輕便的流程外掛jsplumb.js,它也集成了各種功能性API，但是在開發二期的時候它的內部功能已經滿足不了需求了，所以我就開始在網上查詢流程外掛，看了很多外掛，比如：G6，D3 等這些視覺化流程外掛都是不能滿足需求。要說為什麼不能滿足需求,原因如下：

一、首先，看到效果圖裡的內建多點和其他模組單點連線問題，其他外掛是無法這個滿足需求的，可能我沒有深入去了解其他的流程外掛吧，但是go.js裡內建點連線可以讓開發者很快的理解程式碼邏輯，不用耗費大量的時間去想點與點的連線。

二、程式碼上的資料結構問題，其他外掛裡的API資料欄位繁瑣量多，不夠清晰明瞭，而go.js裡的資料結構就兩個重要欄位，一是所有模組的欄位集合二是連線欄位集合，根據需求可以隨意加欄位。

三、專案開發

（一）、首先直接使用go.js，畫布中是有水印的

其實這個問題不大，替換一行程式碼就可以去除水印

引入go.js後，直接在編輯器中全域性搜尋7eba17a4ca3b1a8346，找到類似這樣結構的程式碼

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

注：不同的版本程式碼不是完全相同的，可能是a.jv（屬性名是會變的） =‘xxxxx’，將這行程式碼替換成

a.ir=function(){return true;}; //a.屬性名 要保持一致

去除水印的效果

（二）、畫布的基本設定

this.diagram = $(go.Diagram, "chart-diagram",
				{
					// 畫布初始位置
					initialContentAlignment: go.Spot.LeftSide, // 居中顯示
					"undoManager.isEnabled": true, // 支援 Ctrl-Z 和 Ctrl-Y 操作
					// 初始座標
					// initialPosition: new go.Point(0, 0),
					//allowSelect:false,  ///禁止選中
					// "toolManager.hoverDelay": 100, //tooltip提示顯示延時
					// "toolManager.toolTipDuration": 10000, //tooltip持續顯示時間
					//  isReadOnly:true,//只讀

					//禁止水平拖動畫布
					//禁止水平滾動條
					allowHorizontalScroll: false,
					// 禁止垂直拖動畫布
					//禁止垂直滾動條
					allowVerticalScroll: false,
					allowZoom: true,//畫布是否可以縮放
					"grid.visible": false, //顯示網格
					// allowMove: true, //允許拖動
					// allowDragOut:true,
					allowDelete: true,//禁止刪除節點
					allowCopy: true,//禁止複製
					// 禁止撤銷和重做
					// "undoManager.isEnabled": false,
					// 畫布比例
					// scale:1.5，
					// minScale:1.2,//畫布最小比例
					// maxScale:2.0,//畫布最大比例
					// 畫布初始化動畫時間
					// "animationManager.duration": 600,
					// 禁止畫布初始化動畫
					"animationManager.isEnabled": false,
					// autoScale:go.Diagram.Uniform,//自適應

					// autoScale:go.Diagram.UniformToFill,//自適應
					//    "draggingTool.dragsLink": false,//拖動線
					// autoScale:go.Diagram.None,//預設值不自適應
					// 畫布邊距padding
					// padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
					// validCycle: go.Diagram.CycleDestinationTree，//只允許有一個父節點
					//節點模組動畫  S
					// "animationManager.initialAnimationStyle":go.Animation.EaseOutExpo,
					// "animationManager.initialAnimationStyle": go.Animation.EaseInOutQuad,
					"animationManager.initialAnimationStyle": go.AnimationManager.None,
					// "animationManager.initialAnimationStyle":go.AnimationManager.AnimateLocations,
					//節點模組動畫   D
					// validCycle: go.Diagram.CycleNotUndirected，

					// validCycle: go.Diagram.CycleNotDirected，
					// validCycle: go.Diagram.CycleSourceTree，
					//ismodelfied:true //禁止拖拽
					// 禁止滑鼠拖動區域選中
					// "dragSelectingTool.isEnabled" : false,
					//允許使用delete鍵刪除模組
					"commandHandler.deletesTree": true,
					// "hasHorizontalScrollbar":false,//去除水平滾動條
					// "hasVerticalScrollbar":false,//去除豎直滾動條
					// "canStart":false,
					// allowClipboard: true,
					// "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有滑鼠滾輪事件放大和縮小，而不是向上和向下滾動
					// layout: $(go.TreeLayout,
					// 	{ angle: 90, layerSpacing: 80 }),
				}
			);

先寫到這，下週繼續寫，如有不足 可以私信單聊共享技術經驗。。。。。。。。。。。。。。