Gojs學習-文本塊（TextBlocks）

字體和顏色

 diagram.add(
             $(go.Node, "Vertical",
               $(go.TextBlock, { text: "a Text Block" }),
               $(go.TextBlock, { text: "a Text Block", stroke: "red" }),
               $(go.TextBlock, { text: "a Text Block", background: "lightblue" }),
               $(go.TextBlock, { text: "a Text Block", font: "bold 14pt serif" })
             )); 

 

 

字體圖標

  < link  rel = “ stylesheet”  href = “ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” >

diagram.add(
            $(go.Node, "Auto",
              $(go.Shape, { fill: "lightgreen" }),
              $(go.Panel, "Horizontal",
                { margin: 8 },
                $(go.TextBlock,
                  { text: '\uf030', font: '10pt FontAwesome' }),
                $(go.TextBlock, "an example using FontAwesome",
                  { margin: new go.Margin(0, 0, 0, 2) })
              )
            ));

 

 

調整大小和裁剪

TextBlock 的自然大小剛好足以用給定的字體呈現文本字符串。但是，TextBlock的實際大小在任一維度上都可以更大或更小。較大的尺寸會出現沒有文字的區域；較小的尺寸會導致剪裁。

diagram.add(
                $(go.Node, "Vertical",
                  $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2 }),
                  $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
                                    width: 100, height: 33 }),
                  $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
                                    width: 60, height: 33 }),
                  $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
                                    width: 50, height: 22 }),
                  $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
                                    width: 40, height: 9 })
                ));

 

 

最大行數和溢出

您可以使用GraphObject.desiredSize（寬度和高度）來限制TextBlock的可用大小，但也可以使用TextBlock.maxLines限制最大行數。如果沒有足夠的空間來顯示所有文本，則可以決定如何使用TextBlock.overflow的具有不同值的剩余空間

diagram.add(
                $(go.Node, "Vertical",
                  //允許任意數量的行，無需剪切： 
                  $(go.TextBlock, { text: "a Text Block that takes 4 lines",
                                    font: '14pt sans-serif',
                                    background: "lightblue",
                                    overflow: go.TextBlock.OverflowClip /* the default value */,
                                    // No max lines
                                    margin: 2,
                                    width: 90 }),
                  //僅允許2行，OverflowClip：
                  $(go.TextBlock, { text: "a Text Block that takes 4 lines",
                                    font: '14pt sans-serif',
                                    background: "lightblue",
                                    overflow: go.TextBlock.OverflowClip / *默認值* /，,
                                    maxLines: 2,
                                    margin: 2,
                                    width: 90 }),
                 //僅允許2行，OverflowEllipsis：
                  $(go.TextBlock, { text: "a Text Block that takes 4 lines",
                                    font: '14pt sans-serif',
                                    background: "lightblue",
                                    overflow: go.TextBlock.OverflowEllipsis,
                                    maxLines: 2,
                                    margin: 2,
                                    width: 90 })
                ));    

 

 

文字對齊

所述TextBlock.textAlign屬性指定文字的水平對齊方式。

              diagram.add(
                $(go.Node, "Horizontal",
                  $(go.Panel, "Vertical",
                    { width: 150, defaultStretch: go.GraphObject.Horizontal },
                    $(go.TextBlock, { text: "textAlign: 'left'", background: "lightgreen", margin: 2,
                                      textAlign: "left" }),
                    $(go.TextBlock, { text: "textAlign: 'center'", background: "lightgreen", margin: 2,
                                      textAlign: "center" }),
                    $(go.TextBlock, { text: "textAlign: 'right'", background: "lightgreen", margin: 2,
                                      textAlign: "right" })
                  ),
                  $(go.Panel, "Vertical",
                    { width: 150, defaultStretch: go.GraphObject.None },
                    $(go.TextBlock, { text: "alignment: Left", background: "lightgreen", margin: 2,
                                      alignment: go.Spot.Left }),
                    $(go.TextBlock, { text: "alignment: Center", background: "lightgreen", margin: 2,
                                      alignment: go.Spot.Center }),
                    $(go.TextBlock, { text: "alignment: Right", background: "lightgreen", margin: 2,
                                      alignment: go.Spot.Right })
                  )
              ));

 

 TextBlock.verticalAlignment屬性控制的范圍內的字形的垂直對准。TextBlock.textAlign和TextBlock.verticalAlignment都不影響TextBlock的大小。

            diagram.add(
              $(go.Node, "Horizontal",
                $(go.TextBlock, { text: "verticalAlignment: Top", verticalAlignment: go.Spot.Top,
                                  width: 170, height: 60, background: "lightgreen", margin: 10 }),
                $(go.TextBlock, { text: "verticalAlignment: Center", verticalAlignment: go.Spot.Center,
                                  width: 170, height: 60, background: "lightgreen", margin: 10 }),
                $(go.TextBlock, { text: "verticalAlignment: Bottom", verticalAlignment: go.Spot.Bottom,
                                  width: 170, height: 60, background: "lightgreen", margin: 10 })
              ));

 

 

編輯

GoJS還支持用戶就地編輯文本。您只需要將TextBlock.editable屬性設置為true。

 diagram.add(
                $(go.Node,
                  $(go.TextBlock,
                    { text: "select and then click to edit",
                      background: "lightblue",
                      editable: true, isMultiline: false }) //isMultiline：false 不可換行
                ));
              diagram.add(
                $(go.Node,
                  $(go.TextBlock,
                    { text: "this one allows embedded newlines",
                      background: "lightblue",
                      editable: true })
                ));