流程圖控件GoJS教程：設置面板屬性（二）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖。
自動面板
自動面板適合面板其他元素周圍的“主要”元素。主要元素通常是Z順序中最后面的，即第一個元素，因此其他元素不會被它遮擋。通過將GraphObject.isPanelMain設置為true來聲明main元素; 但通常不存在這樣的元素，因此它使用面板的第一個元素。
通常，自動面板將測量非“主”元素，確定可以包圍所有元素的寬度和高度，并使“主”元素的大小或稍大。您沒有設置“main”元素的GraphObject.desiredSize（或GraphObject.width或GraphObject.height）。
自動面板是在對象周圍實現邊框的常用方法。使用Shape作為第一個/“main”元素 - 它成為邊框。所述Shape.figure通常為“矩形”或“RoundedRectangle”或“橢圓形”，如下所示。其他元素成為邊框內面板的“內容”。在下面的示例中，只有一個“content”元素，一個TextBlock。我們設置了GraphObject.background和Shape.fill屬性來幫助顯示對象的大小和位置。
自動面板中應包含兩個或多個元素。
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" })
));
如果將GraphObject.margin添加到相同三個面板中的每個面板中的TextBlock，則將在“main”元素內的“content”元素周圍添加一個小空間。
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" })
));
對于除“矩形”圖之外的大多數Shape，我們不希望“main”形狀與“content”元素的大小相同。例如，橢圓需要明顯大于內容，以避免內容溢出形狀的邊緣。這可以通過設置Shape.spot1和Shape.spot2屬性來控制，這些屬性確定內容應該去的區域。許多預定義的數字都有自己的spot1和spot2的默認值。
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" })
));
主Shape上的spot1和spot2屬性比在內容元素上指定GraphObject.margin更通用，更靈活。
約束尺寸自動面板
如果限制整個面板的大小，則可能有更少或更多的空間可用于容納“main”元素內的所有“content”元素。在以下示例中，每個聲部的總大小為60x60，導致“內容” TextBlock的寬度和高度受到限制，小于自然寬度，從而導致文本換行。但是，可能沒有足夠的高度來顯示整個內容元素，導致它們被剪裁。您可以看到在第三部分中文本被剪裁，因為橢圓內的可用區域比矩形內的可用區域少。
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" })
));
您不應該設置自動面板的“main”元素的大小（GraphObject.desiredSize或GraphObject.width或GraphObject.height）。
自動面板中應包含兩個或多個元素。
Spot面板
Spot Panel與Auto Panels類似，有一個“main”元素，還有“其他”元素沒有調整大小。“其他”元素基于具有Spot值的GraphObject.alignment屬性定位在“main”元素周圍。與Auto Panels不同，Spot Panels的主要特征是這些元素可能超出“main”元素的范圍。
這對于使主要形狀具有特定尺寸并將較小元件定位在相對于主要形狀的特定位置是有用的。請注意，在此示例中，TextBlocks位于四個角的中心，導致面板大于主要形狀，如淺灰色背景所示。
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 })
));
Spot Panel將其內容元素與GraphObject.alignment給出的一般位置對齊。如上所示，定位的內容元素中的精確點默認為Spot.Center。但是您可以將元素的GraphObject.alignmentFocus設置為使用不同的點。例如，如果使用相同的alignmentFocus作為對齊方式，則元素將位于主要元素的邊界內：
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 })
));
如果使用相反的alignmentFocus作為對齊，則元素將位于主元素的邊界之外：
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.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}）
））;
alignmentFocus offsetX / Y也可以用于偏移alignmentFocus點，與Link標簽的工作方式相同：
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' })
));
使用Spot Panels與子元素對齊
您可能會發現有必要將嵌套在Spot面板內的對象與該面板的主元素對齊。當您希望Spot面板的元素看起來具有自己的文本標簽或其他裝飾器時，通常會出現這種情況。
為此，您可以使用Panel.alignmentFocusName。在下面的示例中，Spot面板包含一個主元素和另一個Panel。我們希望將主要元素的角對齊此面板中的形狀，因此我們為其命名并在面板上設置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"))
)
)
);
使用Spot Panels拉伸
當Spot面板中的非主要元素伸展時，它會占據主元素的寬度和/或高度。這對于在Panel中對齊元素非常有用。
在下面的示例中，紅色主元素周圍有三個元素，它們伸展到它的邊長。主要元素是Part.resizeObject，當它改變大小時，拉伸元素將相應地改變大小。
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（））;
使用Spot Panel約束尺寸
如果限制整個面板的大小，面板可能會剪切其元素。例如，當整個面板必須為100x50時，主要元素在排列它們之后會有水平但不垂直的空間以及所有其他元素。
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 })
));
Spot Panels中應包含兩個或多個元素。
請記住，每個面板的元素都是按順序繪制的。通常，您希望主元素位于所有其他元素的后面，因此主元素將首先出現。但是，如果您希望main元素位于某些或所有其他元素的前面，則可以將main元素移動為面板的第一個元素，如果還將其GraphObject.isPanelMain屬性設置為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 })
));
請注意，顯式聲明為主要元素的不透明Shape現在可視地位于Spot Panel的非主要元素前面，因為它已被移動到面板中的最后一個元素。
如果不在所需的主元素上將GraphObject.isPanelMain設置為true，則在此示例中， Panel.findMainElement將返回第一個TextBlock。這將導致所有其他元素排列在TextBlock周圍。由于TextBlock很小且矩形Shape很大且不透明，因此Shape將覆蓋所有其他TextBlock，因此用戶可能看不到任何文本，具體取決于其他TextBlock的大小和對齊方式。
用Spot Panel剪裁
Spot Panels可以將Panel.isClipping設置為true，以將主Panel元素用作剪切區域而不是繪制的Shape。如果使用，則主元素必須是Shape，并且不會繪制其筆觸和填充。當Panel.isClipping為true時，Spot面板將自身調整為主要元素邊界和所有其他元素邊界的交集，而不是這些邊界的并集。
例：
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 }
)
)
)
);
Viewbox面板
Viewbox Panel僅包含一個重新調整以適合Panel大小的元素。
這對于獲取任意元素（尤其是Panel）并自動擠壓它以適應小的固定大小區域非常有用。通過在該元素上設置GraphObject.scale可以實現相同的功能，但使用Viewbox Panel可以自動執行計算。
在此圖中，有兩個相同的自動面板副本，每個副本包含一個圖片和一個由橢圓形狀包圍的標題TextBlock。左側的那個位于Viewbox面板內，被迫放入80x80區域; 右邊的那個是它的自然尺寸。請注意，您仍然可以縮小比例查看面板的所有元素，以便它可以放入Viewbox面板中。但由于嵌套面板比較寬，因此80x80 Viewbox側面有空白區域。
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")
)
));
更多教程內容，請點擊查看“流程圖控件GoJS教程：設置面板屬性（一）”
想要購買GoJS正版授權的朋友可以。
更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線