GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖。
點擊下載GoJS最新試用版
GraphObject的大小由GraphObject.desiredSize， GraphObject.minSize，GraphObject.maxSize和GraphObject.stretch屬性的值確定。在包含面板測量和排列對象之后，對象的實際大小由幾個只讀屬性給出：GraphObject.naturalBounds，GraphObject.measuredBounds和GraphObject.actualBounds。
該GraphObject.width性質是完全一樣的Size.width的分量GraphObject.desiredSize。同樣，GraphObject.height屬性對應于desiredSize的高度。GraphObject.desiredSize的默認值是(NaN, NaN)- 意味著必須計算大小。可以將寬度設置為實數并保持高度NaN，反之亦然。
用戶還可以通過ResizingTool：ResizingTool簡介更改零件中對象的大小。
DesiredSize，MinSize和MaxSize
當GraphObject.desiredSize屬性設置為實數時，它將其作為其自然大小。如果未設置desiredSize屬性但存在GraphObject.stretch值，則會獲得可用空間的大小。如果未設置desiredSize并且沒有拉伸，則根據對象的類型和對象的其他屬性，對象更喜歡其自然大小。
但有效寬度和有效高度，無論是由desiredSize還是計算得出，都由GraphObject.maxSize和GraphObject.minSize約束。在發生沖突時，最小大小優先于最大大小。
表格面板中GraphObject的大小也可能受到列的寬度和對象所在行的高度的約束。
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 200 }),
$(go.RowColumnDefinition, { column: 1, width: 15 }),
$(go.Shape, "Rectangle",
{ row: 0, column: 0, fill: "green",
width: 100, height: 20 }),
$(go.TextBlock, { row: 0, column: 2,
text: "desiredSize: 100x20, no minSize, no maxSize" }),
$(go.Shape, "Rectangle",
{ row: 1, column: 0, fill: "red",
width: 100, height: 20,
minSize: new go.Size(150, 10) }),
$(go.TextBlock, { row: 1, column: 2,
text: "desired: 100x20, min: 150x10" }),
$(go.Shape, "Rectangle",
{ row: 2, column: 0, fill: "yellow",
width: 100, height: 20,
maxSize: new go.Size(50, 300) }),
$(go.TextBlock, { row: 2, column: 2,
text: "desired: 100x20, max: 50x300" }),
$(go.Shape, "Rectangle",
{ row: 3, column: 0, fill: "red",
width: 100, height: 20,
minSize: new go.Size(150, 10), maxSize: new go.Size(50, 300) }),
$(go.TextBlock, { row: 3, column: 2,
text: "desired: 100x20, min: 150x10, max: 50x300" })
)
));
測量尺寸和實際尺寸
每個GraphObject還有一個GraphObject.measuredBounds，它描述了對象的大小，以及GraphObject.actualBounds，它描述了一個對象的位置和大小。這些只讀屬性會考慮任何非零GraphObject.angle或非單一GraphObject.scale。這些測量值位于包含Panel的坐標系中。
function getSizeString(s) {
return s.width.toFixed(2) + "x" + s.height.toFixed(2);
}
var table =
$(go.Part, "Table",
$(go.Shape, { name: "A", row: 0, column: 1,
figure: "Club", fill: "green", background: "lightgray",
width: 40, height: 40,
}), // default angle is zero; default scale is one
$(go.Shape, { name: "B", row: 0, column: 2,
figure: "Club", fill: "green", background: "lightgray",
width: 40, height: 40,
angle: 30 }),
$(go.Shape, { name: "C", row: 0, column: 3,
figure: "Club", fill: "green", background: "lightgray",
width: 40, height: 40,
scale: 1.5 }),
$(go.Shape, { name: "D", row: 0, column: 4,
figure: "Club", fill: "green", background: "lightgray",
width: 40, height: 40,
angle: 30, scale: 1.5 }),
$(go.TextBlock, { row: 1, column: 1, margin: 4 },
new go.Binding("text", "naturalBounds", getSizeString).ofObject("A")),
$(go.TextBlock, { row: 1, column: 2, margin: 4 },
new go.Binding("text", "naturalBounds", getSizeString).ofObject("B")),
$(go.TextBlock, { row: 1, column: 3, margin: 4 },
new go.Binding("text", "naturalBounds", getSizeString).ofObject("C")),
$(go.TextBlock, { row: 1, column: 4, margin: 4 },
new go.Binding("text", "naturalBounds", getSizeString).ofObject("D")),
$(go.TextBlock, { row: 2, column: 1, margin: 4 },
new go.Binding("text", "measuredBounds", getSizeString).ofObject("A")),
$(go.TextBlock, { row: 2, column: 2, margin: 4 },
new go.Binding("text", "measuredBounds", getSizeString).ofObject("B")),
$(go.TextBlock, { row: 2, column: 3, margin: 4 },
new go.Binding("text", "measuredBounds", getSizeString).ofObject("C")),
$(go.TextBlock, { row: 2, column: 4, margin: 4 },
new go.Binding("text", "measuredBounds", getSizeString).ofObject("D")),
$(go.TextBlock, { row: 3, column: 1, margin: 4 },
new go.Binding("text", "actualBounds", getSizeString).ofObject("A")),
$(go.TextBlock, { row: 3, column: 2, margin: 4 },
new go.Binding("text", "actualBounds", getSizeString).ofObject("B")),
$(go.TextBlock, { row: 3, column: 3, margin: 4 },
new go.Binding("text", "actualBounds", getSizeString).ofObject("C")),
$(go.TextBlock, { row: 3, column: 4, margin: 4 },
new go.Binding("text", "actualBounds", getSizeString).ofObject("D")),
$(go.TextBlock, "naturalBounds:", { row: 1, column: 0, alignment: go.Spot.Left }),
$(go.TextBlock, "measuredBounds:", { row: 2, column: 0, alignment: go.Spot.Left }),
$(go.TextBlock, "actualBounds:", { row: 3, column: 0, alignment: go.Spot.Left })
);
diagram.add(table);
setTimeout(function() {
table.data = {}; // cause bindings to be evaluated after Shapes are measured
}, 500);
請注意，常規40x40形狀的大小為41x41。附加尺寸是由于用于勾勒出形狀的筆的粗細（Shape.strokeWidth）。旋轉或增大刻度會使40x40形狀實際占用更多空間。
總結一下：GraphObject.desiredSize（又名GraphObject.width和GraphObject.height）和GraphObject.naturalBounds位于對象的本地坐標系中。的GraphObject.minSize，GraphObject.maxSize，GraphObject.margin，GraphObject.measuredBounds，和GraphObject.actualBounds都在含有面板的坐標系，或者在文檔如果不存在這樣的面板，因為它是一個坐標部分。
拉伸GraphObjects
當您指定一個GraphObject.stretch比其他值GraphObject.None，對象將伸展或收縮以填充可用空間。但是，GraphObject.maxSize和GraphObject.minSize屬性仍然限制大小。
但是設置GraphObject.desiredSize（或等效地，GraphObject.width和/或GraphObject.height）將導致忽略任何拉伸值。
在以下示例中，左列被約束為寬度為200。
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 200 }),
$(go.RowColumnDefinition, { column: 1, width: 15 }),
$(go.Shape, "Rectangle",
{ row: 0, column: 0, fill: "green",
stretch: go.GraphObject.Fill }),
$(go.TextBlock, { row: 0, column: 2,
text: "stretch: Fill, no minSize, no maxSize" }),
$(go.Shape, "Rectangle",
{ row: 1, column: 0, fill: "red",
stretch: go.GraphObject.Fill,
minSize: new go.Size(150, 10) }),
$(go.TextBlock, { row: 1, column: 2,
text: "stretch: Fill, min: 150x10" }),
$(go.Shape, "Rectangle",
{ row: 2, column: 0, fill: "yellow",
stretch: go.GraphObject.Fill,
maxSize: new go.Size(50, 300) }),
$(go.TextBlock, { row: 2, column: 2,
text: "stretch: Fill, max: 50x300" }),
$(go.Shape, "Rectangle",
{ row: 3, column: 0, fill: "red",
stretch: go.GraphObject.Fill,
minSize: new go.Size(150, 10), maxSize: new go.Size(50, 300) }),
$(go.TextBlock, { row: 3, column: 2,
text: "stretch: Fill, min: 150x10, max: 50x300" }),
$(go.Shape, "Rectangle",
{ row: 4, column: 0, fill: "red",
width: 100, stretch: go.GraphObject.Fill }),
$(go.TextBlock, { row: 4, column: 2,
text: "desired width & stretch: ignore stretch" })
)
));
總之，如果GraphObject.desiredSize設置，任何GraphObject.stretch被忽略。如果GraphObject.maxSize與該值沖突，則優先。如果GraphObject.minSize與這些值沖突，則優先。寬度值受限于獨立于高度值。
拉伸和對齊
一個的尺寸GraphObject一個在面板是由許多因素決定的。所述GraphObject.stretch屬性指定的寬度和/或高度是否應占用所有專家小組給它的空間。如果未拉伸寬度和/或高度以填充給定空間，則GraphObject.alignment屬性控制對象放置的位置（如果它小于可用空間）。也可以在垂直對齊的同時拉伸寬度，就像在沿X軸對齊時也可以垂直拉伸一樣。
GraphObject的對齊值（如果未由GraphObject.alignment的值給出）可以繼承。如果對象位于表格面板中，則該值可以從行的RowColumnDefinitions和對象所在的列繼承。最后，該值可以從Panel.defaultAlignment屬性繼承。
如果指定填充拉伸（水平或垂直或兩者）和對齊，則將忽略對齊。基本上，如果一個對象的大小與它可用的大小完全相同，那么它只有一個位置，因此所有對齊都是相同的。
形狀的對齊
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 200 }),
$(go.RowColumnDefinition, { column: 1, width: 15 }),
$(go.Shape, "Rectangle",
{ row: 0, column: 0, fill: "lightblue",
width: 100, height: 20, alignment: go.Spot.Left }),
$(go.TextBlock, { row: 0, column: 2, text: "alignment: Left" }),
$(go.Shape, "Rectangle",
{ row: 1, column: 0, fill: "lightblue",
width: 100, height: 20, alignment: go.Spot.Center }),
$(go.TextBlock, { row: 1, column: 2, text: "alignment: Center" }),
$(go.Shape, "Rectangle",
{ row: 2, column: 0, fill: "lightblue",
width: 100, height: 20, alignment: go.Spot.Right }),
$(go.TextBlock, { row: 2, column: 2, text: "alignment: Right" }),
$(go.Shape, "Rectangle",
{ row: 3, column: 0, fill: "yellow",
height: 20, stretch: go.GraphObject.Horizontal }),
$(go.TextBlock, { row: 3, column: 2, text: "stretch: Horizontal" }),
$(go.Shape, "Rectangle",
{ row: 4, column: 0, fill: "yellow",
height: 20, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Right }),
$(go.TextBlock, { row: 4, column: 2,
text: "stretch: Horizontal, ignore alignment" })
)
));
當元素大于可用空間時，GraphObject.alignment屬性仍然控制元素的位置。但是元素將被剪裁以適合。
為了使以下示例中的內容更加清晰，我們使形狀筆劃更粗，并添加了一個邊距來分隔形狀。
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 200 }),
$(go.RowColumnDefinition, { column: 1, width: 15 }),
$(go.Shape, "Rectangle",
{ row: 0, column: 0, fill: "lightblue", strokeWidth: 2,
width: 300, height: 20, margin: 2, alignment: go.Spot.Left }),
$(go.TextBlock, { row: 0, column: 2, text: "big obj alignment: Left" }),
$(go.Shape, "Rectangle",
{ row: 1, column: 0, fill: "lightblue", strokeWidth: 2,
width: 300, height: 20, margin: 2, alignment: go.Spot.Center }),
$(go.TextBlock, { row: 1, column: 2, text: "big obj alignment: Center" }),
$(go.Shape, "Rectangle",
{ row: 2, column: 0, fill: "lightblue", strokeWidth: 2,
width: 300, height: 20, margin: 2, alignment: go.Spot.Right }),
$(go.TextBlock, { row: 2, column: 2, text: "big obj alignment: Right" })
)
));
=====================================================
想要購買GoJS正版授權的朋友可以。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線