GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖。
點(diǎn)擊下載GoJS最新試用版
GraphObject的大小由GraphObject.desiredSize， GraphObject.minSize，GraphObject.maxSize和GraphObject.stretch屬性的值確定。在包含面板測(cè)量和排列對(duì)象之后，對(duì)象的實(shí)際大小由幾個(gè)只讀屬性給出：GraphObject.naturalBounds，GraphObject.measuredBounds和GraphObject.actualBounds。
該GraphObject.width性質(zhì)是完全一樣的Size.width的分量GraphObject.desiredSize。同樣，GraphObject.height屬性對(duì)應(yīng)于desiredSize的高度。GraphObject.desiredSize的默認(rèn)值是(NaN, NaN)- 意味著必須計(jì)算大小。可以將寬度設(shè)置為實(shí)數(shù)并保持高度NaN，反之亦然。
用戶還可以通過ResizingTool：ResizingTool簡介更改零件中對(duì)象的大小。
DesiredSize，MinSize和MaxSize
當(dāng)GraphObject.desiredSize屬性設(shè)置為實(shí)數(shù)時(shí)，它將其作為其自然大小。如果未設(shè)置desiredSize屬性但存在GraphObject.stretch值，則會(huì)獲得可用空間的大小。如果未設(shè)置desiredSize并且沒有拉伸，則根據(jù)對(duì)象的類型和對(duì)象的其他屬性，對(duì)象更喜歡其自然大小。
但有效寬度和有效高度，無論是由desiredSize還是計(jì)算得出，都由GraphObject.maxSize和GraphObject.minSize約束。在發(fā)生沖突時(shí)，最小大小優(yōu)先于最大大小。
表格面板中GraphObject的大小也可能受到列的寬度和對(duì)象所在行的高度的約束。
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" })
)
));
測(cè)量尺寸和實(shí)際尺寸
每個(gè)GraphObject還有一個(gè)GraphObject.measuredBounds，它描述了對(duì)象的大小，以及GraphObject.actualBounds，它描述了一個(gè)對(duì)象的位置和大小。這些只讀屬性會(huì)考慮任何非零GraphObject.angle或非單一GraphObject.scale。這些測(cè)量值位于包含Panel的坐標(biāo)系中。
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);
請(qǐng)注意，常規(guī)40x40形狀的大小為41x41。附加尺寸是由于用于勾勒出形狀的筆的粗細(xì)（Shape.strokeWidth）。旋轉(zhuǎn)或增大刻度會(huì)使40x40形狀實(shí)際占用更多空間。
總結(jié)一下：GraphObject.desiredSize（又名GraphObject.width和GraphObject.height）和GraphObject.naturalBounds位于對(duì)象的本地坐標(biāo)系中。的GraphObject.minSize，GraphObject.maxSize，GraphObject.margin，GraphObject.measuredBounds，和GraphObject.actualBounds都在含有面板的坐標(biāo)系，或者在文檔如果不存在這樣的面板，因?yàn)樗且粋€(gè)坐標(biāo)部分。
拉伸GraphObjects
當(dāng)您指定一個(gè)GraphObject.stretch比其他值GraphObject.None，對(duì)象將伸展或收縮以填充可用空間。但是，GraphObject.maxSize和GraphObject.minSize屬性仍然限制大小。
但是設(shè)置GraphObject.desiredSize（或等效地，GraphObject.width和/或GraphObject.height）將導(dǎo)致忽略任何拉伸值。
在以下示例中，左列被約束為寬度為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設(shè)置，任何GraphObject.stretch被忽略。如果GraphObject.maxSize與該值沖突，則優(yōu)先。如果GraphObject.minSize與這些值沖突，則優(yōu)先。寬度值受限于獨(dú)立于高度值。
拉伸和對(duì)齊
一個(gè)的尺寸GraphObject一個(gè)在面板是由許多因素決定的。所述GraphObject.stretch屬性指定的寬度和/或高度是否應(yīng)占用所有專家小組給它的空間。如果未拉伸寬度和/或高度以填充給定空間，則GraphObject.alignment屬性控制對(duì)象放置的位置（如果它小于可用空間）。也可以在垂直對(duì)齊的同時(shí)拉伸寬度，就像在沿X軸對(duì)齊時(shí)也可以垂直拉伸一樣。
GraphObject的對(duì)齊值（如果未由GraphObject.alignment的值給出）可以繼承。如果對(duì)象位于表格面板中，則該值可以從行的RowColumnDefinitions和對(duì)象所在的列繼承。最后，該值可以從Panel.defaultAlignment屬性繼承。
如果指定填充拉伸（水平或垂直或兩者）和對(duì)齊，則將忽略對(duì)齊。基本上，如果一個(gè)對(duì)象的大小與它可用的大小完全相同，那么它只有一個(gè)位置，因此所有對(duì)齊都是相同的。
形狀的對(duì)齊
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" })
)
));
當(dāng)元素大于可用空間時(shí)，GraphObject.alignment屬性仍然控制元素的位置。但是元素將被剪裁以適合。
為了使以下示例中的內(nèi)容更加清晰，我們使形狀筆劃更粗，并添加了一個(gè)邊距來分隔形狀。
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正版授權(quán)的朋友可以。
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
20次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線