下載GoJS最新版本

樣式節(jié)點(diǎn)

通過創(chuàng)建由GraphObjects組成的模板以及在這些對(duì)象上設(shè)置屬性來設(shè)置節(jié)點(diǎn)的樣式。要?jiǎng)?chuàng)建一個(gè)Node，我們可以使用幾個(gè)構(gòu)建塊類：

• Shape，用于顯示帶顏色的預(yù)定義或自定義幾何體
• TextBlock，以各種字體顯示（可編輯的）文本
• Picture，顯示圖片
• Panel，用于容納其他物體的集合的容器，可以根據(jù)面板的類型（如桌子，垂直堆疊和拉伸容器）以不同的方式定位和調(diào)整尺寸

所有這些構(gòu)建塊都是從GraphObject抽象類派生的 ，因此我們隨便將它們稱為GraphObjects或?qū)ο蠡蛟亍Ｕ?qǐng)注意，GraphObject 不是 HTML DOM元素，因此創(chuàng)建或修改此類對(duì)象的開銷不會(huì)太大。

我們希望模型數(shù)據(jù)屬性影響我們的節(jié)點(diǎn)，這是通過數(shù)據(jù)綁定完成的。數(shù)據(jù)綁定允許我們通過自動(dòng)將這些GraphObjects上的屬性設(shè)置為從模型數(shù)據(jù)中獲取的值來更改節(jié)點(diǎn)中GraphObjects的外觀和行為。模型數(shù)據(jù)對(duì)象是純JavaScript對(duì)象。您可以選擇在模型中的節(jié)點(diǎn)數(shù)據(jù)上使用您喜歡的任何屬性名稱。

默認(rèn)的Node模板很簡(jiǎn)單：包含一個(gè)TextBlock的節(jié)點(diǎn)。TextBlock的text屬性和模型數(shù)據(jù)的key屬性之間存在數(shù)據(jù)綁定。在代碼中，模板看起來像這樣：

myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );
      

TextBlocks，Shapes和Pictures是GoJS的原始構(gòu)建塊。TextBlocks不能包含圖像; 形狀不能包含文本。如果希望節(jié)點(diǎn)顯示某些文本，則必須使用TextBlock。如果要繪制或填充某些幾何圖形，則必須使用“形狀”。

更一般地說，Node模板的框架看起來像這樣：

myDiagram.nodeTemplate =
  $(go.Node, "Vertical", // second argument of a Node/Panel can be a Panel type
    /* set Node properties here */
    { // the Node.location point will be at the center of each node
      locationSpot: go.Spot.Center
    },

    /* add Bindings here */
    // example Node binding sets Node.location to the value of Node.data.loc
    new go.Binding("location", "loc"),

    /* add GraphObjects contained within the Node */
    // this Shape will be vertically above the TextBlock
    $(go.Shape,
      "RoundedRectangle", // string argument can name a predefined figure
      { /* set Shape properties here */ },
      // example Shape binding sets Shape.figure to the value of Node.data.fig
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",  // string argument can be initial text string
      { /* set TextBlock properties here */ },
      // example TextBlock binding sets TextBlock.text to the value of Node.data.key
      new go.Binding("text", "key"))
  );

Panel中GraphObjects的嵌套可以任意深入，每個(gè)類都有自己獨(dú)特的屬性集可供探索，但這顯示了一般的想法。

現(xiàn)在我們已經(jīng)了解了如何制作Node模板，讓我們看一個(gè)實(shí)例。我們將制作組織圖中常見的簡(jiǎn)單模板 - 名稱旁邊的圖像。請(qǐng)考慮以下Node模板：

“Horizontal”面板類型的節(jié)點(diǎn)，意味著其元素將并排水平布局。它有兩個(gè)要素：

• 用于肖像的圖片，其中包含圖像源數(shù)據(jù)
• 名稱的TextBlock，綁定了文本數(shù)據(jù)

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have a light-blue background
    { background: "#44CCFF" },
    $(go.Picture,
      // Pictures should normally have an explicit width and height.
      // This picture has a red background, only visible when there is no source set
      // or when the image is partially transparent.
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" attribute of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
  // for this app we add the "name" and "source" properties
  { name: "Don Meow", source: "cat1.png" },
  { name: "Copricat", source: "cat2.png" },
  { name: "Demeter",  source: "cat3.png" },
  { /* Empty node data */  }
];
myDiagram.model = model;
      

該代碼生成此圖：

當(dāng)不存在所有信息時(shí)，我們可能希望顯示一些“默認(rèn)”狀態(tài)，例如，當(dāng)圖像未加載或名稱未知時(shí)。此示例中的“空”節(jié)點(diǎn)數(shù)據(jù)用于顯示節(jié)點(diǎn)模板可以在沒有綁定數(shù)據(jù)的任何屬性的情況下完美地工作。

購買GoJS正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！