Controlling How Shapes Stretch and Shrink

You can use formulas to control the way a shape shrinks and grows in response to user actions in Microsoft® Visio®. Users generally resize a shape by moving its selection handles, but they might also edit a shape's vertices with the Pencil tool.

You can design a shape that uses different rules for stretching, depending on whether the user drags a width or a height handle. One such method is to use a height-based formula, so called because it preserves a shape's aspect ratio by defining its width in terms of its height. To do this for only part of a shape, you can place a height-based formula in the relevant cells in the Geometry section, depending on which part of the shape you want to control.

For details about using height-based formulas with a one-dimensional (1-D) shape, see Chapter 8, Working with 1-D Shapes, Connectors, and Glue.

In this section…

Height-based Formulas: an Example

Optimizing the Arrow Example

Height-based Formulas: an Example

The following example, an arrow drawn with the Line tool, shows how to use formulas to control the way the arrow shrinks and grows. The default formulas that Visio generates for the arrow cause it to resize proportionately when stretched either horizontally or vertically.

Resizing the original arrow changes the proportions of the shape.

1. Original arrow with default formulas

1. Resized width

1. Resized height

With default formulas, arrows of different lengths have different-sized arrowheads, which looks inconsistent. If you were using the arrow in a drawing, you would probably prefer its tail to stretch and shrink horizontally, but the arrowhead to remain a constant size. However, if the shape is stretched vertically, you would probably prefer the arrowhead to resize proportionately.

Because the arrowhead's width is proportionate to its height, a height-based formula can describe the base of the arrowhead (the line connecting vertices 3, 4, 6, and 7 in the following figure) as a fraction of the shape's height.

Each vertex corresponds to a row in the Geometry section.

1. All y-coordinates are by default multiples of Height.

1. All x-coordinates are by default multiples of Width.

1. Height * 0.5

1. Height * 0.5

Vertex 5 falls exactly halfway between the top and bottom of the shape, so its y-position can be calculated as Height * 0.5. If the x-distance from vertex 5 to the base of the arrowhead is defined in terms of the height, the arrowhead will resize proportionately when the shape is stretched vertically, but it will not change when the shape is stretched horizontally.

The formula that produces this behavior keeps the base of the arrowhead equal to the width of the shape minus the distance from vertex 5 to the base, or:

The x-coordinate of each vertex along the base of the arrowhead (vertices 3, 4, 6, and 7) must be calculated using this formula. For efficiency, it's possible to place the formula only in the cell for vertex 3 and refer the other cells to this value. The x-coordinate of vertex 3 corresponds to the X3 cell of the Geometry1 section.

Vertices and formulas that describe the geometry of the arrow

1. All points on the base of the arrowhead have the same x-coordinate: Width � Height * 0.5.

1. The base of the arrowhead is defined as a fraction of Height.

1. Height

1. Height * 0.75

1. Height * 0.5

1. Height * 0.25

1. Width

The following illustration shows the resulting geometry of the proportionate arrow.

Resulting geometry of the arrow

TOP

Optimizing the Arrow Example

The height-based formulas in the previous topic, Height-based Formulas: an Example, produce the desired behavior, and work perfectly well. However, because the arrow is symmetrical, you can further refine its custom formulas by using cell references to reduce the number of calculations, making the shape easier to customize.

For example, the Geometry1.Y1 and Geometry1.Y7 cells both contain the same formula:

This formula can also be expressed as:

The Geometry1.Y2 cell already contains the formula = Height * 0.25, so you can simply refer to the cell for that part of the formula you want instead of repeating the entire formula. The formula in Geometry1.Y1 and Geometry1.Y7 therefore becomes:

Now the arrow requires only two custom formulas, = Height * 0.5 and = Height * 0.25, to calculate its vertices. And you can alter the arrow's look by changing only one formula (= Height * 0.25).