碼上歡樂
相關內容    簡體    繁體

gojs常用API (中文文檔)

本文轉載自   查看原文   2019-07-24 11:30   2626 

常用API   操作類API

  API 例子 應用場景
添加節點 
myDiagram.model.addNodeData(node);
 
var node = {};
    node["key"] = "節點Key";
    node["loc"] = "0 0";//節點坐標
    node["text"] = "節點名稱";
myDiagram.model.addNodeData(node);
 通過按鈕點擊，添加新的節點到畫布
刪除選中節點 
myDiagram.commandHandler.deleteSelection();
 
if (myDiagram.commandHandler.canDeleteSelection()) {
    myDiagram.commandHandler.deleteSelection();
    return;
}
 頁面上有個按鈕點擊，可以刪除選擇的節點和線
獲取當前畫布的json 
myDiagram.model.toJson()
 
var model= myDiagram.model.toJson();獲得整個畫布的json
//model=eval('('+model+')');若格式異常抓一下
var nodes=model.nodeDataArray;取出所有節點
var Links=model.linkDataArray;取出所有線
 獲取當前畫布的所有元素的json,用來保存
加載json刷新畫布 
myDiagram.model = go.Model.fromJson(model);
 
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);
 一般用來刷新和加載畫布上的元素
通過節點key獲取節點 
myDiagram.model.findNodeDataForKey('key')
 
var node = myDiagram.model.findNodeDataForKey('key');
 知道節點key ,拿到這個節點的詳細信息
更改節點屬性值 
myDiagram.model.setDataProperty(node, 'color', "#ededed");
 
var node = myDiagram.model.findNodeDataForKey('key');//首先拿到這個節點的對象
myDiagram.model.setDataProperty(node, 'color', "#ededed");//然后對這個對象的屬性進行更改
 更改節點的顏色，或者大小等
獲取獲得焦點的第一個元素，可為節點或者線 myDiagram.selection.first() 
var node=myDiagram.selection.first();
        console.log(node.data.key);
  
獲取所有獲得焦點的節點 myDiagram.nodes 
var items='';
  for(var nit=myDiagram.nodes;nit.next();){
        var node=nit.value;
       if(node.isSelected){
           items+=node.data.key+",";
         }
     }
 console.log(items);
  
遍歷整個畫布的節點信息寫法1   
for(var nit=myDiagram.nodes;nit.next();){
                    var node=nit.value;
                    var key=node.data.key;
                    var text=node.data.text;
                }
  
給節點添加線 
myDiagram.model.addLinkData({ from: "節點的Key", to: "連到另一節點的key" })
    
選中節點   
var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" };
            myDiagram.model.addNodeData(newdata);
            var newdat2= myDiagram.model.findNodeDataForKey('-3');
            console.log(newdat2);
            var node = myDiagram.findNodeForData(newdat2);
            console.log(node);
 myDiagram.select(node);//選中節點
  
特殊案例API用法 
myDiagram.findNodeForData(objNode)
myDiagram.findLinkForData(objLink)
 其中objNode或者objLink,只能從畫布的json 對象取出， 不能直接手寫例如 var newdata={"text":"AAAA","key":-33,"loc":"0 0"}; var node = myDiagram.findNodeForData(newdat2); 除了剛好是新建的節點外，，不然是獲取不到這個對象的，因為添加節點時，gojs會自動給節點或者線添加一個屬性   

常用事件定義API，和用法

應用場景 關鍵字 例子 例子描述
節點選中改變事件 selectionChanged: 回調的函數方法名 //該屬性要寫在$(go.Node,）內用大括號括起來，如右側例子 
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //節點選中改變事件，nodeSelectionChanged為回調的方法名
        $(go.Panel, "Auto",
           $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
        )
    );//go.Node的括號
 
//回調方法
function nodeSelectionChanged(node) {
      if(node.isSelected) {//
         //節點選中執行的內容
         console.log(node.data);//節點的屬性信息
         console.log(node.data.key);//拿到節點的Key,拿其他屬性類似
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, "fill", "#ededed");
      } else {
         //節點取消選中執行的內容
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");       
      }
}
節點選中的時候是一種顏色，取消選中是另一種顏色
節點雙擊事件 
doubleClick : function(e, node){
  //node為當前雙擊的節點的對象信息
 //該屬性要寫在$(go.node,）內用大括號括起來，如右側例子
}
 
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        $(go.Panel, "Auto",
           $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
           {doubleClick : function(e, node){// 雙擊事件
                             handlerDC(e, node);//雙擊執行的方法
                          }
           }
        )
    );//go.Node的括號
 
//雙擊執行的方法
function handlerDC(e, obj) {
     var node = obj.part;//拿到節點的json對象，后面要拿什么值就直接.出來
     var procTaskId = node.data.key;
     var procTaskName = node.data.text;
     var description = node.data.description;
     var procTmplId = node.data.tmplId;
}
該例子主要應用場景為，雙擊節點，得到節點的詳細信息，彈出窗口修改節點的信息，
從Palette拖過來節觸發的事件 
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        console.log(e);
    })
 
 myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        e.subject.each(function(n){
            //得到從Palette拖過來的節點
                 console.log(n.data.key);
         });
    }) 
  
當前畫布被拖動的節點 未測試，線保存 
myDiagram.addDiagramListener("Modified", function(e) {
        myDiagram.isModified = false;
 
        iter = myDiagram.selection.iterator;
        
        while (iter.next()) {
            var part = iter.value;
            if (part instanceof go.Link) {
               if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined )  ) {
                    myDiagram.model.setDataProperty(part.data, 'link-color', 'red');
                    console.log(part.data);
                    console.log("非法");
               } else if(part.data.from > 0 || part.data.from < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.from);
                    if (!node) {
                        console.log("非法");
                    }
               }else if(part.data.to > 0 || part.data.to < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.to);
                    if (!node) {
                        console.log("非法");
                    }
               }
            }
        }
  

 

畫布基本定義類API

     
定義gojs在全局的簡潔符號（扯淡不知道怎么描述） var $ = go.GraphObject.make;  
定義畫布的基本屬性 
myDiagram = $(go.Diagram, "myDiagram", //畫布綁定的Div的ID
            {
                  initialContentAlignment: go.Spot.Center, //畫布的位置設置（居中，靠左等）
                  allowDrop: true, // must be true to accept drops from the Palette
                  "LinkDrawn": showLinkLabel, //
                  "LinkRelinked": showLinkLabel,
                  "animationManager.duration": 600, //畫布刷新的加載速度
                  "undoManager.isEnabled": true,
                  //"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
                  allowZoom: true    //允許縮放，false為否
                  isReadOnly: false //是否禁用編輯 false否，    
true是
  //ismodelfied:true //禁止拖拽
 
                  
            });
 沒寫的注釋的就是忘了， 這里綁定畫布所用的div,並保存在myDiagram中，后續的節點設置均使用這個變量，意思是在這個畫布上定義節點和操作節點
     

 

畫布元素屬性定義類API

  api 例子
定義單種節點 myDiagram.nodeTemplate=$(go.Node,***) //***為對節點的定義   
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //節點選中改變事件，nodeSelectionChanged為回調的方法名
        $(go.Panel, "Auto",
            $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963", stroke: null }
            ),
            $(go.TextBlock,
                { font: "bold 13px Helvetica, bold Arial, sans-serif",//字體
                  editable：true,
                  stroke: "white",//顏色
                  margin: 3 },
                  new go.Binding("text", "key")
            )//go.TextBlock,的括號
       )//go.Panel 的括號
    );//go.Node的括號
定義多種節點(畫布上有多種節點) myDiagram.nodeTemplateMap.add("A種節點",$(go.Node,***)) 
//一種類型的節點
myDiagram.nodeTemplateMap.add("Start",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#79C900",
                     stroke: null
                 })
            )
        )//go.Node的括號
);
//另一種類型的節點
myDiagram.nodeTemplateMap.add("End",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#DC3C00",
                     stroke: null
                 })
            )
       )//go.Node的括號
);
 
//添加不同種類的節點
      var node = {};
      node["text"] = "2222";
      node["key"] = "33";
      node["loc"] = "0 0";
      node["category"] = "Start";//category
      myDiagram.model.addNodeData(node);
定義線 myDiagram.linkTemplate=$(go.Link,***);  

添加監聽事件

監聽節點生成事件 
//添加監聽節點生成事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        e.subject.each(function(n){
                console.log(n.data.key);
           });
    })
監聽線生成事件 
//添加監聽線生成事件
    myDiagram.addDiagramListener("LinkDrawn", function(e) {
           console.log(e.subject.data.to);
 
    })
監聽刪除事件 
//監聽節點刪除事件
    myDiagram.addDiagramListener("SelectionDeleted", function(e) {
            e.subject.each(function(n){
                console.log(n.data.key);
           });
    })

 

go.Shape屬性(形狀)

圓角矩形 RoundedRectangle  
 更多請查看API  gojs.net/latest/intr…  

通用屬性

stroke 邊框顏色 null為無邊框，可填"#87CEFA"，"red"等
margin 邊框間距  
visible 設置是元素是否可見 true為可見，false為不可見，
textAlign 文本位置 "center"居中
editable 文本是否可編輯 true，false
font 字體 "bold 8pt Microsoft YaHei, Arial, sans-serif"
fill 背景顏色 可填"#87CEFA"，"red"等
alignment 元素位置設置 go.Spot.BottomLeft/左下    go.Spot.BottomRight/右下   go.Spot.TopLeft/左上 go.Spot.TopRight/又上 alignment:go.Spot.TopRight
isMultiline 編輯時是否允許換行 默認true
maxLines:1, 設置文本顯示的最大行數  
minSize: 最小大小 new go.Size(10, 16)，控制了最大大小后，文本就會自動換行了
maxSize: 最大大小  

 

特殊情況解決方案

出現的問題 解決的方案
節點或者線刪除不了 檢查，畫布的全局設置是否禁用刪除，或者節點，和線的設置禁用刪除，關鍵字 isReadOnly，或者節點綁定的事件有問題
重復調用定義畫布報錯 不能重復定義被綁定的div,應該用重新加載數據的API

 原文鏈接：www.cnblogs.com


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 gojs常用API (中文文檔) webdriver API中文文檔 select2 api參數中文文檔 jQuery EasyUI DataGrid API 中文文檔 Backbone.js API中文文檔 gojs常用API JDK1.8 API 中文文檔 Java Api在線中文文檔 API中文文檔：Swagger詳解 Web3.js API 中文文檔
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM