GoJs 自定義Node模板

個人認為方便的自定義模板是GoJs的強大功能之一,使用nodeTemplateMap可以很方便地定義各種類型的模板,只要在數據模型中指定模板的名稱(使用category),就可以顯示相應的圖形。nodeTemplateMap的使用方法如下:

myDiagram.nodeTemplateMap.add("End",
        part
      );

這里,part就是顯示的模板,比如,下面是一個part的定義,顯示狀態圖的開始節點:

var partStart=    $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Circle",
            {
              fill: "#52ce60", /* green */
              stroke: null,
              portId: "",
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
              cursor: "pointer"
            }),
          $(go.TextBlock, "開始",
            {
              font: "bold 16pt helvetica, bold arial, sans-serif",
              stroke: "whitesmoke"
            })
        );

對應的數據如下:

 {"id":-1, "loc":"155 -138", "category":"Start"}

數據中,category指定了模板類型,loc綁定到圖元的位置,這里是雙向綁定,也就是圖元位置的變化,會改變數據模型中的數據。

如果只定義通用的模板,可以使用:

myDiagram.nodeTemplate=part;

這種情況下,沒有指定category的數據都采用缺省模板顯示。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容