gojs共通API（中国語ドキュメント）

その他 2019-07-24 14:09:53 訪問数: null

共通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);
 一般的には、キャンバス上の要素をリフレッシュしてロードするために使用
ノードによってキーのノードを取得します 
myDiagram.model.findNodeDataForKey('key')
 
var node = myDiagram.model.findNodeDataForKey('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、オブジェクトは、直接、例えばVAR NEWDATAを= { "AAAA"、 "キー"： "テキスト" - 33、 "LOC"： "0"}手書きない、キャンバスJSONから除去することができる; VARノード= 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;
}
この例のメインアプリケーションシナリオは、ノードをダブルクリックしてノードの詳細を与える、ノード変更情報ウィンドウがポップアップし、
パレットから、トリガイベントのセクションの上にドラッグします 
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("非法");
                    }
               }
            }
        }
  

 

Canvasクラスは、基本的な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

おすすめ

転載: www.cnblogs.com/donve/p/11236931.html
おすすめ
wlnmp ワンクリック インストール パッケージ更新 240522
ChatGPT は大幅にダウンしており、ロシアのハッカーによってハッキングされたと噂されていました。
ランキング
3800年前、AIを使って恋愛漫画を描いた
APKのインストールも開始されていない、報告異常FileUriExposedException
jQueryを使って無効にし、マウスのスクロールミドルクリックイベント
組み込みLinux開発プラットフォームを0から構築する
Mesmo se HTTPS for usado, o histórico de navegação ainda pode ser detectado?
右win10ファイルまたはあまりにも画像を保存、ファイルエクスプローラ常にこだわって、通常の使用の前に2分
机房重构错误----必须声明标量变量和SQLHelper的使用
Python определяет положение строки в другом списке строк
SSL証明書をインストールするには、サイトの重要性
C++编程小实验
アーカイブ
もっと
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)

コードワールド

© 2018 codetd.com