GOJS 二次开发入门教程（三）

本章主要介绍nodeTemplate，怎么绘制画布上的图案

diagram.nodeTemplate =
    $(go.Node, "Auto",
        {
            //node节点的事件绑定或者一些属性设置   也可以不设置 
        }，
       //这里开始才是节点形状设置
    );

上面的部分是必须的。即$(go.Node,"Auto",);包起来。nodeTemplate的数据类型是Part。

diagram.nodeTemplate =
        $(go.Node, "Auto",
            //go.Shape 就是一个形状
          $(go.Shape, "RoundedRectangle",//RoundedRectangle 就是一个设置了border-radius 的长方形
            new go.Binding("fill", "color")),//给这个shape绑定了一个fill，也就是背景色，使用model里面的color属性值
          $(go.TextBlock,//TextBlock 代表是一个文本
            { margin: 3 },//文本margin
            new go.Binding("text", "key"))//绑定text，也就是文本内容，使用model里面的key属性值
        );

diagram.model = new go.GraphLinksModel(
      [ 
        { key: "Alpha", color: "lightblue" },//即上面绑定fill的属性值
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" }
      ],
      [ // a JavaScript Array of JavaScript objects, one per link
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" }
      ]);

效果图：

Alpha的背景色就是lightblue，文本就是alpha

go.Sharp

$(go.Shape, "RoundedRectangle")

这里还可以设置

$(go.Shape, "Rectangle"),
$(go.Shape, "RoundedRectangle"),
$(go.Shape, "Ellipse"),
$(go.Shape, "Diamond"),
$(go.Shape, "TriangleRight"),
$(go.Shape, "TriangleDown"),
$(go.Shape, "TriangleLeft"),
$(go.Shape, "TriangleUp"),
$(go.Shape, "MinusLine"),
$(go.Shape, "PlusLine"),
$(go.Shape, "XLine")

效果：

上面的new go.Binding ，所有属性都可以用这个方法。同样的fill也可以写死

$(go.Shape, "RoundedRectangle",new go.Binding("fill", "color")) //需要根据数据变化属性，每个节点颜色不一样 使用binding
$(go.Shape, "RoundedRectangle",{fill:"#ffffff"})//写死也就是所有节点的背景色都是白色
//fill：null，代表没有背景色，所以可能点击不到选不中。这个坑你自己试试就知道了，说不明白。但愿你遇到了能想起这句话

fill:背景填充色，可填 null，'#fff','rgba(255,255,255,1)','rgb(255,255,255)'
stroke：相当于border-color，但不等同，设置形状的线条颜色。可填写值同上
strokeWidth：number型 正负都可以，描边宽度
width：number型 非负。能不能设置小数没试过，你有兴趣可以自己试试
height：number型 非负。同上
minSize: new go.Size(150, 10) 
maxSize: new go.Size(50, 300) 
很多属性需要配合使用，单个使用可能就没有效果
还有很多属性不一一写出来了。有需要看看官方文档