Graphics Reference
In-Depth Information
To repair our application, we will set up a
display transformation
to
mathematically adjust the entire scene's geometry from the abstract application
coordinate system to the WPF canvas system in a way that (a) makes the clock
completely visible and (b) makes it the right size.
First, consider the need to resize. Our clock's diameter is 20 units in our
abstract system. We would like that to map to 1 inch on the WPF canvas; thus,
we want it to map to 96 WPF units. Consequently, we want to multiply each
graph-paper coordinate by 96/20, or 4.8, on both axes. To request that the canvas
perform this scale transformation, we attach a
RenderTransform
5
to the canvas
to specify a geometric operation that we want to be applied to all objects in the
scene:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Canvas ... >
<!- THE SCENE ->
<Ellipse ... />
<!- DISPLAY TRANSFORMATION ->
<Canvas.RenderTransform>
<!- The content of a RenderTransform is a TransformGroup
acting as a container for ordered transform elements. ->
<TransformGroup>
<!- Use floating-point scale factors:
1.0 to represent 100%, 0.5 to represent 50%, etc. ->
<ScaleTransform ScaleX="4.8" ScaleY="4.8"
CenterX="0" CenterY="0"/>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
Note that when you specify a 2D scale operation, you must specify the center
point, which is the point on the plane that is stationary—all other points move
away from (or toward) the center point as a result of the scale. Here, we use the
origin (0, 0) as the center point.
The effect of our new revision (V.02 in the laboratory) is depicted in
Figure 2.13. Clearly, we have solved the size problem, but still only one quad-
rant of the circle is present on the visible portion of the canvas.
Thus, we want to add another transform to our canvas, to move our scene to
ensure full visibility. We will use a translate transformation:
1
<TranslateTransform X="..." Y="..."/>
How many units do we need to translate? Since our scale transform has
ensured that our circle has a 1-inch diameter on the WPF canvas, and we're seeing
only one-half of the circle on each dimension, we need to move the circle a half-
inch down and a half-inch toward the right (i.e., 48 canvas units on each axis) to
ensure full visibility.
5. WPF's use of the term “RenderTransform” for a transformation is somewhat mis-
leading since it implies it is used only to control display. A better name would be
“GeometricTransform” since this element type performs 2D geometric transforma-
tions to achieve a wide variety of purposes, for both modeling and display control,
as is demonstrated throughout this chapter.
