流程图控件GoJS教程：调整GraphObjects的大小

本篇文章将以图文的形式为你介绍调整GraphObjects的大小的方法。

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);

请注意，常规40×40形状的大小为41×41。附加尺寸是由于用于勾勒出形状的笔的粗细（Shape.strokeWidth）。旋转或增大刻度会使40×40形状实际占用更多空间。

总结一下：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正版授权的朋友可以咨询官方客服。

标签：

来源：慧都