gojs入门笔记

gojs定义分三大块

1. 画布定义，常用API

   var $= go.GraphObject.make;//简洁定义GOJS 对象方便使用
   myDiagram =$(go.Diagram, "绑定画布的DivId",{
       //画布定义
       initialContentAlignment: go.Spot.Center//居中
   });
   //添加画布的全局监听事件(属于画布定义,也能以"事件name":function(e){},写在画布定义中)
   myDiagram.addDiagramListener("事件name",function(e) {});

2. 节点模板定义，常用API

   //单种节点模板定义,
   myDiagram.nodeTemplate =
       $(go.Node,"Horizontal",//节点子元素布局定义
           $(go.Panel,//节点面板定义
              "Auto", //节点面板子元素布局定义
              $(go.Shape,//节点形状
                   //形状的基础属性设置，如下背景颜色
                   { fill: "#1F4963" }
                   ,new go.Binding("fill", "color")//
               ),
               {doubleClick : function(e, node){
                             // 双击事件,输出节点数据
                             console.log(node.part.data);
                             },
                  cursor:"pointer"//改变鼠标样式变成小手
               }
           )//Panel块
       );
   //多种节点多种定义
   myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***))
   myDiagram.nodeTemplateMap.add("B种节点",$(go.Node,***))

3. 线模板定义    

   myDiagram.linkTemplate =$(go.Link,{});
   

PS:本章主要写一下基础概念，为后面这三大块的常用API做铺垫,推荐一篇非常好的入门笔记点击打开链接

gojs操作画布常用API更多

	API	用例
增	addNodeData(节点对象); addLinkData(线对象);	var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";//节点坐标 node["text"] = "节点名称"; myDiagram.model.addNodeData(node);
删	removeNodeData(节点对象) removeLinkData(线对象);	//首先拿到这个节点的对象,这里直接通过节点的Key获取， //也可以通过各种事件的返回的对象中获取 var nodeData = myDiagram.model.findNodeDataForKey('key'); //删除单个节点 myDiagram.model.removeNodeData(nodeData);
改	参数: data:  nodeData或linkData propname：属性名 val:修改的值 setDataProperty(data, propname, val);	//首先拿到这个节点的data对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //然后对这个对象的属性进行更改，如果没有则新增这个属性 myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
查	根据key获取节点data对象 findNodeDataForKey('节点key'); 根据linkData模糊匹配线集合 (gojs1.68以上) findLinksByExample(linkData)	//根据Key获取节点数据对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //根据linkData，模糊匹配线集合,linkData可以为部分属性组成 //如from:-1或to:-1,或者from:-1,to:-1 var links=myDiagram.findLinksByExample({"from":-1, "to":-2}); while (links.next()) { //遍历输出所有线数据对象 console.log(links.value.data); }