• <menu id="w2i4a"></menu>
  •
    logo GoJS教程 2019
    文檔首頁(yè)>>GoJS教程 2019>>流程圖控件GoJS教程：設(shè)置面板屬性（二）

    流程圖控件GoJS教程：設(shè)置面板屬性（二）

    GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖。

    點(diǎn)擊下載GoJS最新試用版

    自動(dòng)面板

    自動(dòng)面板適合面板其他元素周圍的“主要”元素。主要元素通常是Z順序中最后面的，即第一個(gè)元素，因此其他元素不會(huì)被它遮擋。通過(guò)將GraphObject.isPanelMain設(shè)置為true來(lái)聲明main元素; 但通常不存在這樣的元素，因此它使用面板的第一個(gè)元素。

    通常，自動(dòng)面板將測(cè)量非“主”元素，確定可以包圍所有元素的寬度和高度，并使“主”元素的大小或稍大。您沒(méi)有設(shè)置“main”元素的GraphObject.desiredSize（或GraphObject.width或GraphObject.height）。

    自動(dòng)面板是在對(duì)象周圍實(shí)現(xiàn)邊框的常用方法。使用Shape作為第一個(gè)/“main”元素 - 它成為邊框。所述Shape.figure通常為“矩形”或“RoundedRectangle”或“橢圓形”，如下所示。其他元素成為邊框內(nèi)面板的“內(nèi)容”。在下面的示例中，只有一個(gè)“content”元素，一個(gè)TextBlock。我們?cè)O(shè)置了GraphObject.background和Shape.fill屬性來(lái)幫助顯示對(duì)象的大小和位置。

    自動(dòng)面板中應(yīng)包含兩個(gè)或多個(gè)元素。

    diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(0, 0), background: "lightgray" },
          $(go.Shape, "Rectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(100, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(200, 0), background: "lightgray" },
          $(go.Shape, "Ellipse", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));

    13.png

    如果將GraphObject.margin添加到相同三個(gè)面板中的每個(gè)面板中的TextBlock，則將在“main”元素內(nèi)的“content”元素周圍添加一個(gè)小空間。

     diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(0, 0), background: "lightgray" },
          $(go.Shape, "Rectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { margin: 2, background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(100, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { margin: 2, background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(200, 0), background: "lightgray" },
          $(go.Shape, "Ellipse", { fill: "lightgreen" }),
          $(go.TextBlock, "some text", { margin: 2, background: "yellow" })
        ));

    14.png

    對(duì)于除“矩形”圖之外的大多數(shù)Shape，我們不希望“main”形狀與“content”元素的大小相同。例如，橢圓需要明顯大于內(nèi)容，以避免內(nèi)容溢出形狀的邊緣。這可以通過(guò)設(shè)置Shape.spot1和Shape.spot2屬性來(lái)控制，這些屬性確定內(nèi)容應(yīng)該去的區(qū)域。許多預(yù)定義的數(shù)字都有自己的spot1和spot2的默認(rèn)值。

    diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(0, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle",
            { fill: "lightgreen", spot1: new go.Spot(0, 0), spot2: new go.Spot(1, 1) }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(100, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle",
            { fill: "lightgreen",          spot1: new go.Spot(0, 0, 10, 0), spot2: new go.Spot(1, 1, -10, -10) }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(200, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle",
            { fill: "lightgreen",          spot1: new go.Spot(0, 0, 0, 20), spot2: new go.Spot(1, 1, 0, -20) }),
          $(go.TextBlock, "some text", { background: "yellow" })
        ));

    15.png

    主Shape上的spot1和spot2屬性比在內(nèi)容元素上指定GraphObject.margin更通用，更靈活。

    約束尺寸自動(dòng)面板

    如果限制整個(gè)面板的大小，則可能有更少或更多的空間可用于容納“main”元素內(nèi)的所有“content”元素。在以下示例中，每個(gè)聲部的總大小為60x60，導(dǎo)致“內(nèi)容” TextBlock的寬度和高度受到限制，小于自然寬度，從而導(dǎo)致文本換行。但是，可能沒(méi)有足夠的高度來(lái)顯示整個(gè)內(nèi)容元素，導(dǎo)致它們被剪裁。您可以看到在第三部分中文本被剪裁，因?yàn)闄E圓內(nèi)的可用區(qū)域比矩形內(nèi)的可用區(qū)域少。

    diagram.add(
        $(go.Part, "Auto",
          { width: 60, height: 60 },  // set the size of the whole panel
          { position: new go.Point(0, 0), background: "lightgray" },
          $(go.Shape, "Rectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { width: 60, height: 60 },  // set the size of the whole panel
          { position: new go.Point(100, 0), background: "lightgray" },
          $(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
          $(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
        ));
      diagram.add(
        $(go.Part, "Auto",
          { width: 60, height: 60 },  // set the size of the whole panel
          { position: new go.Point(200, 0), background: "lightgray" },
          $(go.Shape, "Ellipse", { fill: "lightgreen" }),
          $(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
        ));

    16.png

    您不應(yīng)該設(shè)置自動(dòng)面板的“main”元素的大?。?/span>GraphObject.desiredSize或GraphObject.width或GraphObject.height）。

    自動(dòng)面板中應(yīng)包含兩個(gè)或多個(gè)元素。

    Spot面板

    Spot Panel與Auto Panels類似，有一個(gè)“main”元素，還有“其他”元素沒(méi)有調(diào)整大小?！捌渌痹鼗诰哂蠸pot值的GraphObject.alignment屬性定位在“main”元素周圍。與Auto Panels不同，Spot Panels的主要特征是這些元素可能超出“main”元素的范圍。

    這對(duì)于使主要形狀具有特定尺寸并將較小元件定位在相對(duì)于主要形狀的特定位置是有用的。請(qǐng)注意，在此示例中，TextBlocks位于四個(gè)角的中心，導(dǎo)致面板大于主要形狀，如淺灰色背景所示。

      diagram.add(
        $(go.Part, "Spot",
          { background: "lightgray" },
          $(go.Shape, "Rectangle",
            { fill: "lightgreen", width: 100, height: 50 }),
          $(go.TextBlock, "TL", { background: "yellow", alignment: go.Spot.TopLeft }),
          $(go.TextBlock, "TR", { background: "yellow", alignment: go.Spot.TopRight }),
          $(go.TextBlock, "BL", { background: "yellow", alignment: go.Spot.BottomLeft }),
          $(go.TextBlock, "BR", { background: "yellow", alignment: go.Spot.BottomRight })
        ));

    17.png

    Spot Panel將其內(nèi)容元素與GraphObject.alignment給出的一般位置對(duì)齊。如上所示，定位的內(nèi)容元素中的精確點(diǎn)默認(rèn)為Spot.Center。但是您可以將元素的GraphObject.alignmentFocus設(shè)置為使用不同的點(diǎn)。例如，如果使用相同的alignmentFocus作為對(duì)齊方式，則元素將位于主要元素的邊界內(nèi)：

     diagram.add(
        $(go.Part, "Spot",
          { background: "lightgray" },
          $(go.Shape, "Rectangle",
            { fill: "lightgreen", width: 100, height: 50 }),
          $(go.TextBlock, "TL", { background: "yellow",
                                  alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft }),
          $(go.TextBlock, "TR", { background: "yellow",
                                  alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight }),
          $(go.TextBlock, "BL", { background: "yellow",
                                  alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft }),
          $(go.TextBlock, "BR", { background: "yellow",
                                  alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight })
        ));

    18.png

    如果使用相反的alignmentFocus作為對(duì)齊，則元素將位于主元素的邊界之外：

     diagram.add   （$（go.Part，“Spot”，
          { background：“l(fā)ightgray” }，
          $（go.Shape，“Rectangle”，
            { fill：“l(fā)ightgreen”，width：100，height：50 }），
          $ （go.TextBlock，“TL”，{ background：“yellow”，                        
                                          alignment：go.Spot.TopLeft，alignmentFocus：go.Spot.BottomRight}），
          $（go.TextBlock，“TR”，{background：“yellow”，                         
                                          alignment：go.Spot.TopRight，alignmentFocus：go.Spot.BottomLeft}），
          $（go.TextBlock，“BL”，{ background：“yellow”，                         
                                         alignment：go.Spot.BottomLeft，alignmentFocus：go.Spot.TopRight}），
          $（go.TextBlock，“BR”，{ background：“yellow”，
                                         alignment：go.Spot.BottomRight，alignmentFocus：go.Spot.TopLeft}）
        ））;

    19.png

    alignmentFocus offsetX / Y也可以用于偏移alignmentFocus點(diǎn)，與Link標(biāo)簽的工作方式相同：

     diagram.layout = $(go.GridLayout,
                           { wrappingColumn: 10, wrappingWidth: 900, isViewportSized: false });  var blue = "rgba(0,0,255,.2)";
      diagram.add(
        $(go.Part, "Vertical",
          { locationObjectName: 'main' },
          $(go.Panel, "Spot",
            $(go.Shape, "Rectangle",
              {  name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
              $(go.Shape, "Rectangle",
              { fill: "lightcoral", stroke: null, width: 30, height: 30,            alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight
              })
          ),
          $(go.TextBlock, "alignment: TopRight,\n alignmentFocus: TopRight",
            { font: '11px sans-serif' })
        ));

      diagram.add(
        $(go.Part, "Vertical",
          { locationObjectName: 'main' },
          $(go.Panel, "Spot",
            $(go.Shape, "Rectangle",
              { name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
              $(go.Shape, "Rectangle",
              { fill: "lightcoral", stroke: null, width: 30, height: 30,            alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomRight
              })
          ),
          $(go.TextBlock, "alignment: TopRight,\n alignmentFocus: BottomRight",
            { font: '11px sans-serif' })
        ));

      diagram.add(
        $(go.Part, "Vertical",
          { locationObjectName: 'main' },
          $(go.Panel, "Spot",
            $(go.Shape, "Rectangle",
              { name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
              $(go.Shape, "Rectangle",
              { fill: "lightcoral", stroke: null, width: 30, height: 30,            // BottomRight with offsetX = 15
                alignment: go.Spot.TopRight, alignmentFocus: new go.Spot(1, 1, 15, 0)
              })
          ),
          $(go.TextBlock, "alignment: TopRight,\n alignmentFocus: BottomRight with offsetX = 15",
            { font: '11px sans-serif' })
        ));

    20.png

    使用Spot Panels與子元素對(duì)齊

    您可能會(huì)發(fā)現(xiàn)有必要將嵌套在Spot面板內(nèi)的對(duì)象與該面板的主元素對(duì)齊。當(dāng)您希望Spot面板的元素看起來(lái)具有自己的文本標(biāo)簽或其他裝飾器時(shí)，通常會(huì)出現(xiàn)這種情況。

    為此，您可以使用Panel.alignmentFocusName。在下面的示例中，Spot面板包含一個(gè)主元素和另一個(gè)Panel。我們希望將主要元素的角對(duì)齊此面板中的形狀，因此我們?yōu)槠涿⒃诿姘迳显O(shè)置alignmentFocusName。

     diagram.add(
        $(go.Node, "Spot",      // Main shape
          $(go.Shape, { strokeWidth: 4, fill: 'lime' }),      // Instead of aligning this Panel, we want to align the shape inside of it, to the corner of the main shape
          $(go.Panel, "Horizontal",
              { background: 'rgba(255,0,0,0.1)', alignmentFocusName: 'shape', alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomLeft },
              $(go.TextBlock, "some\nlong label", { margin: 8 }),
              $(go.Shape, "RoundedRectangle", { width: 20, height: 20, name: 'shape', strokeWidth: 0, fill: 'red' },          new go.Binding("fill", "color"))
          )
        )
      );

    21.png

    使用Spot Panels拉伸

    當(dāng)Spot面板中的非主要元素伸展時(shí)，它會(huì)占據(jù)主元素的寬度和/或高度。這對(duì)于在Panel中對(duì)齊元素非常有用。

    在下面的示例中，紅色主元素周圍有三個(gè)元素，它們伸展到它的邊長(zhǎng)。主要元素是Part.resizeObject，當(dāng)它改變大小時(shí)，拉伸元素將相應(yīng)地改變大小。

      diagram.add   （$（go.Part，“Spot”，
          { resizable：true，         resizeObjectName：'MAIN' 
          }，
          $（go.Shape，“Rectangle”，{ name：'MAIN'，strokeWidth：0，width：80，身高：60，填充：'rgba（255,0,0，.8）' }），// red 
          $（go.Shape，“Rectangle”，{ stretch：go.GraphObject.Vertical，
            strokeWidth：0，width：20，fill：'rgba（0,255,0，.3）'，// green 
            alignment：go.Spot.Left，alignmentFocus：go.Spot.Right 
          }），
          $（go.Shape，“ Rectangle“，{ stretch：go.GraphObject.Vertical，strokeWidth：0，width：20，fill：'rgba（0,0,255，.3）'，// blue 
            alignment：go.Spot.Right，alignmentFocus：go.Spot .Left 
          }），
            
            
          $（go.Shape，“Rectangle”，{ stretch：go.GraphObject.Horizontal，strokeWidth：0，height：20，fill：'rgba（255,0,255，.3）'，// pink 
            alignment：go.Spot。 Bottom，alignmentFocus：go.Spot.Top 
          }）
        ））; 
      diagram.select（diagram.parts.first（））;

    22.png

    使用Spot Panel約束尺寸

    如果限制整個(gè)面板的大小，面板可能會(huì)剪切其元素。例如，當(dāng)整個(gè)面板必須為100x50時(shí)，主要元素在排列它們之后會(huì)有水平但不垂直的空間以及所有其他元素。

     diagram.add(
        $(go.Part, "Spot",
          { background: "lightgray",                    width: 100, height: 50 },  // it is unusual to set the size!
          $(go.Shape, "Rectangle", { fill: "lightgreen", width: 40, height: 40 }),
          $(go.TextBlock, "TL", { background: "yellow",
                                  alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.BottomRight }),
          $(go.TextBlock, "TR", { background: "yellow",
                                  alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomLeft }),
          $(go.TextBlock, "BL", { background: "yellow",
                                  alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.TopRight }),
          $(go.TextBlock, "BR", { background: "yellow",
                                  alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft })
        ));

    23.png

    Spot Panels中應(yīng)包含兩個(gè)或多個(gè)元素。

    請(qǐng)記住，每個(gè)面板的元素都是按順序繪制的。通常，您希望主元素位于所有其他元素的后面，因此主元素將首先出現(xiàn)。但是，如果您希望main元素位于某些或所有其他元素的前面，則可以將main元素移動(dòng)為面板的第一個(gè)元素，如果還將其GraphObject.isPanelMain屬性設(shè)置為true。

     diagram.add(
        $(go.Part, "Spot",
          { background: "lightgray" },
          $(go.TextBlock, "TL", { background: "yellow", alignment: go.Spot.TopLeft }),
          $(go.TextBlock, "TR", { background: "yellow", alignment: go.Spot.TopRight }),
          $(go.TextBlock, "BL", { background: "yellow", alignment: go.Spot.BottomLeft }),
          $(go.TextBlock, "BR", { background: "yellow", alignment: go.Spot.BottomRight }),      // NOTE: the main element isn't first, so it must be declared by setting isPanelMain to true
          $(go.Shape, "Rectangle",
            { isPanelMain: true },
            { fill: "lightgreen", width: 100, height: 50 })
        ));

    24.png

    請(qǐng)注意，顯式聲明為主要元素的不透明Shape現(xiàn)在可視地位于Spot Panel的非主要元素前面，因?yàn)樗驯灰苿?dòng)到面板中的最后一個(gè)元素。

    如果不在所需的主元素上將GraphObject.isPanelMain設(shè)置為true，則在此示例中， Panel.findMainElement將返回第一個(gè)TextBlock。這將導(dǎo)致所有其他元素排列在TextBlock周圍。由于TextBlock很小且矩形Shape很大且不透明，因此Shape將覆蓋所有其他TextBlock，因此用戶可能看不到任何文本，具體取決于其他TextBlock的大小和對(duì)齊方式。

    用Spot Panel剪裁

    Spot Panels可以將Panel.isClipping設(shè)置為true，以將主Panel元素用作剪切區(qū)域而不是繪制的Shape。如果使用，則主元素必須是Shape，并且不會(huì)繪制其筆觸和填充。當(dāng)Panel.isClipping為true時(shí)，Spot面板將自身調(diào)整為主要元素邊界和所有其他元素邊界的交集，而不是這些邊界的并集。

    例：

     diagram.layout = $(go.GridLayout);  // Without Panel.isClipping
      diagram.add(
        $(go.Part, "Spot",
          { scale: 2  },
          $(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
          $(go.Picture, "../samples/images/55x55.png",
            { width: 55, height: 55 }
           )
        )
      );  // Using Panel.isClipping
      diagram.add(
        $(go.Part, "Spot",
          { isClipping: true, scale: 2  },
          $(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
          $(go.Picture, "../samples/images/55x55.png",
            { width: 55, height: 55 }
           )
        )
      );  // Using Panel.isClipping and also having a surrounding panel
      diagram.add(
        $(go.Part, "Spot",
          { scale: 2 },
          $(go.Shape, "Circle", { width: 65, height: 65, strokeWidth: 0, fill: 'red' } ),
          $(go.Panel, "Spot",
            { isClipping: true  },
            $(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
            $(go.Picture, "../samples/images/55x55.png",
              { width: 55, height: 55 }
             )
          )
        )
      );

    25.png

    Viewbox面板

    Viewbox Panel僅包含一個(gè)重新調(diào)整以適合Panel大小的元素。

    這對(duì)于獲取任意元素（尤其是Panel）并自動(dòng)擠壓它以適應(yīng)小的固定大小區(qū)域非常有用。通過(guò)在該元素上設(shè)置GraphObject.scale可以實(shí)現(xiàn)相同的功能，但使用Viewbox Panel可以自動(dòng)執(zhí)行計(jì)算。

    在此圖中，有兩個(gè)相同的自動(dòng)面板副本，每個(gè)副本包含一個(gè)圖片和一個(gè)由橢圓形狀包圍的標(biāo)題TextBlock。左側(cè)的那個(gè)位于Viewbox面板內(nèi)，被迫放入80x80區(qū)域; 右邊的那個(gè)是它的自然尺寸。請(qǐng)注意，您仍然可以縮小比例查看面板的所有元素，以便它可以放入Viewbox面板中。但由于嵌套面板比較寬，因此80x80 Viewbox側(cè)面有空白區(qū)域。

    diagram.add(
        $(go.Part, go.Panel.Viewbox,  // or "Viewbox"
          { position: new go.Point(0, 0), background: "lightgray",        width: 80, height: 80 },
          $(go.Panel, "Auto",
            $(go.Shape, "Ellipse", { fill: "lightgreen" }),
            $(go.Panel, "Vertical",
              $(go.Picture, { source: "images/120x160.png" }),
              $(go.TextBlock, "a 120x160 kitten")
            )
          )
        ));
      diagram.add(
        $(go.Part, "Auto",
          { position: new go.Point(100, 0), background: "lightgray" },
          $(go.Shape, "Ellipse", { fill: "lightgreen" }),
          $(go.Panel, "Vertical",
            $(go.Picture, { source: "images/120x160.png" }),
            $(go.TextBlock, "a 120x160 kitten")
          )
        ));

    26.png

    更多教程內(nèi)容，請(qǐng)點(diǎn)擊查看“流程圖控件GoJS教程：設(shè)置面板屬性（一）”


    想要購(gòu)買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

    更多精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼

    圖片2.jpg

    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();