A detailed study on viewbox, viewport, stretch, and alignmentx/y in tilebrush

We know that tilebrush is a virtual base class in WPF. The drawingbrush, imagebrush, and visualbrush derived from it play an important role in WPF graphics programming. However, the two important attributes of tilebrush, viewbox and viewport, are often confusing. The alignmentx and Y alignmentx alignment methods are also confusing. This knowledge is too ambiguous on msdn, and it does not seem that there are any articles on the Internet that clearly and systematically describe the relationships between them. So this afternoon I sacrificed a great time and made some experiments to study this problem.

Silverlight removes the viewbox and viewport of tilebrush, and reduces the combat capability.

Before talking about it, I assume that you have read this article and understood the basic usage of these four things, for example, viewboxunits and other things. For more information, see [1. This article mainly analyzes how tilebrush uses viewbox, viewport, stretch, alignmentx/y to draw images.

First, refer to an image of msdn (reference from reference [2]):

The lower left corner shows the original material that our brush uses to draw (hereinafter referred to as the source image, although it is not necessarily from the image file ). The highlighted area in the upper left corner is the viewbox area. The four boxes on the right are the viewport area. Some people may think that the gray part on the right is not displayed. Otherwise, the light-emitting part on the right is only used to highlight the position of viewbox relative to viewport (by default, alignmentx/Y is set to center ).

Viewbox indicates a display area based on the source image. Please note that tilebrush does not cut off any content outside the viewbox in the source image. viewbox only serves as a prompt. The final display effect can be determined only when combined with the other three attributes.

Viewport indicates a canvas-based display area. The canvas here is the area that contains the tilebrush. If cliptobounds is enabled on the canvas (it is also removed in Silverlight), no matter what the viewport is, pixels beyond the canvas area are all harmonious and will not be drawn.

After viewbox and viewport are specified, stretch and alignmentx/y appear. The two determine the stretching method and relative position of viewbox relative to viewport.

Let's first look at the stretch, which determines the way the viewbox is stretched relative to the viewport. Stretch has four values:

1,None. When none is set, nothing happens and there is no scaling adjustment. If the viewbox and viewport are different in size, the position of viewbox relative to viewport is adjusted based on the value of alignmentx/y. See the thumbnail in the upper left corner on the right.

2,Fill. When fill is obtained, alignmentx/y loses its function. Then, the viewbox is stretched to fill the viewport. parts other than the viewbox area in the source image are invisible. See the thumbnail in the upper right corner.

3,Uniform. When uniform is used, the viewbox is stretched until one side of the viewbox reaches the border of the viewport. If the aspect ratio of viewbox and viewport is different, the position of viewbox relative to viewport is adjusted based on the value of alignmentx/y. See the thumbnail in the lower left corner.

4,Uniformtofill. When uniform is taken, the viewbox is stretched until the other side of the viewbox reaches the border of the viewport. If the aspect ratio of viewbox and viewport is different, the position of viewbox relative to viewport is adjusted based on the value of alignmentx/y. Parts outside the viewbox area of the source image are invisible. See the thumbnail in the lower right corner.

Let's take a look at alignmentx/y. Only when

1. Stretch is uniform or uniformtofill, and viewbox and viewport have different aspect ratio.

2. Stretch is none and viewbox and viewport have different sizes.

In both cases, alignmentx/Y is used to adjust the position of viewbox relative to viewport. Note that viewbox is equivalent to a handle of the source image. alignmentx/y also moves the source image while moving the viewbox.

In this way, the relationship between viewbox, viewport, stretch, and alignmentx/y in tilebrush is clear.

References:

[1] dragoninsea: WPF and Silverlight learning notes (19th): brush (1)

[2] msdn: tilebrush. viewbox Property

[3] msdn: tilebrush. alignmentx Property

This article from the shadow guitar blog, original address: http://www.cnblogs.com/lhxarcher/archive/2011/02/20/1959198.html

A detailed study on viewbox, viewport, stretch, and alignmentx/y in tilebrush