GoJs的文本繪圖模板TextBlock怎么使用

GoJs的文本繪圖模板TextBlock怎么使用

GoJs 是一個功能強大的 JavaScript 圖表庫，廣泛用于創建交互式圖表和圖形。在 GoJs 中，TextBlock 是一個常用的模板，用于在圖表中顯示文本內容。本文將詳細介紹如何使用 TextBlock 模板，并探討其常見屬性和用法。

1. TextBlock 的基本用法

TextBlock 是 GoJs 中的一個基本元素，用于在圖表中顯示文本。它可以直接添加到節點或鏈接中，也可以作為其他圖形的一部分。以下是一個簡單的示例，展示如何在節點中添加 TextBlock：

const $ = go.GraphObject.make;

const diagram = new go.Diagram("myDiagramDiv");

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
    $(go.TextBlock, 
      { 
        text: "Hello, GoJs!", 
        margin: 10, 
        stroke: "black", 
        font: "14px sans-serif" 
      })
  );

diagram.model = new go.GraphLinksModel([
  { key: 1 }
]);

在這個示例中，我們創建了一個簡單的節點模板，其中包含一個 TextBlock。TextBlock 的 text 屬性用于設置顯示的文本內容，margin 屬性用于設置文本與節點邊界的距離，stroke 屬性用于設置文本的顏色，font 屬性用于設置文本的字體。

2. TextBlock 的常用屬性

TextBlock 提供了許多屬性，用于控制文本的顯示效果。以下是一些常用的屬性：

• text: 設置或獲取文本內容。
• font: 設置文本的字體樣式，例如 "14px sans-serif"。
• stroke: 設置文本的顏色。
• margin: 設置文本與周圍元素的間距。
• textAlign: 設置文本的對齊方式，可選值包括 "left", "center", "right"。
• verticalAlignment: 設置文本的垂直對齊方式，可選值包括 "top", "middle", "bottom"。
• wrap: 設置文本是否自動換行，可選值包括 go.TextBlock.Wrap 和 go.TextBlock.None。
• maxLines: 設置文本的最大行數，超出部分將被截斷。
• editable: 設置文本是否可編輯。

3. 動態綁定文本內容

在實際應用中，文本內容通常是動態生成的。GoJs 提供了數據綁定的功能，可以將 TextBlock 的 text 屬性與模型數據綁定。以下是一個示例：

const $ = go.GraphObject.make;

const diagram = new go.Diagram("myDiagramDiv");

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
    $(go.TextBlock, 
      { 
        text: "", 
        margin: 10, 
        stroke: "black", 
        font: "14px sans-serif" 
      },
      new go.Binding("text", "name"))
  );

diagram.model = new go.GraphLinksModel([
  { key: 1, name: "Node 1" },
  { key: 2, name: "Node 2" }
]);

在這個示例中，我們使用 new go.Binding("text", "name") 將 TextBlock 的 text 屬性與模型數據中的 name 字段綁定。這樣，每個節點的文本內容將根據模型數據動態生成。

4. 文本樣式的高級控制

除了基本的文本樣式控制，TextBlock 還支持更高級的樣式設置。例如，可以使用 background 屬性為文本添加背景色，使用 borderWidth 和 borderColor 屬性為文本添加邊框。以下是一個示例：

const $ = go.GraphObject.make;

const diagram = new go.Diagram("myDiagramDiv");

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
    $(go.TextBlock, 
      { 
        text: "Styled Text", 
        margin: 10, 
        stroke: "black", 
        font: "14px sans-serif",
        background: "yellow",
        borderWidth: 1,
        borderColor: "black"
      })
  );

diagram.model = new go.GraphLinksModel([
  { key: 1 }
]);

在這個示例中，我們為 TextBlock 添加了背景色和邊框，使文本更加突出。

5. 文本的交互功能

TextBlock 還支持一些交互功能，例如文本的編輯和選擇。通過設置 editable 屬性，用戶可以在圖表中直接編輯文本內容。以下是一個示例：

const $ = go.GraphObject.make;

const diagram = new go.Diagram("myDiagramDiv");

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
    $(go.TextBlock, 
      { 
        text: "Editable Text", 
        margin: 10, 
        stroke: "black", 
        font: "14px sans-serif",
        editable: true
      })
  );

diagram.model = new go.GraphLinksModel([
  { key: 1 }
]);

在這個示例中，我們將 TextBlock 的 editable 屬性設置為 true，用戶可以通過雙擊文本進入編輯模式。

6. 總結

TextBlock 是 GoJs 中用于顯示文本的基本元素，具有豐富的屬性和功能。通過合理使用 TextBlock，可以在圖表中實現各種文本顯示效果，并支持動態數據綁定和交互功能。希望本文的介紹能幫助您更好地理解和使用 TextBlock 模板。

通過以上內容，您應該已經掌握了 TextBlock 的基本用法和一些高級功能。在實際開發中，您可以根據需求靈活運用這些功能，創建出更加豐富和交互性強的圖表。