Graphics Reference
In-Depth Information
to construct our clock using one. But the “real world” must be reckoned with
when it's time to display such a scene, and at that point the abstract system must
be mapped to the display's physical coordinate system. We'll describe that map-
ping shortly, but first let's start the process of geometric specification. We will use
the abstract coordinate system shown in Figure 2.7.
(0,0)
x
Which primitive should we draw first? By default, the order of specification
does matter, so an element E, constructed after element D, will (partially) occlude
D if they overlap. 2 The term “two-and-a-half dimensional” is sometimes used
to describe this stacking effect.
Thus, we should work from back (farthest from the viewer) to front (closest to
the viewer), so let's start with the circular clock face.
y
Figure 2.7: Abstract coordinate
system.
Figure 2.8 shows a simple single-circle design for the face. We've arbitrarily
chosen a radius of ten graph-paper units, because that size is convenient on this
particular style of graph paper. This decision is truly arbitrary; there is no one
correct diameter for this clock, since the coordinate system is abstract.
The syntax for specifying a solid-color-filled circular ellipse is:
Top-left:
(
Width: 20
2
10,
2
10)
(0,0)
x
1
2
3
4
5
<Ellipse
Canvas.Left=...
Canvas.Top=...
Width=...
Height=...
Fill=...
/>
y
where Canvas.Left and Canvas.Top specify the x - and y -coordinates for the
upper-left corner of the primitive's bounding box, and Fill is either a standard
HTML/CSS color name or an RGB value in hexadecimal notation (#RRGGBB—
e.g., #00FF00 being full-intensity green).
We now are ready to construct a WPF application that places this primitive on
a canvas:
Figure 2.8: Defining the clock
face's geometry using our ab-
stract coordinate system.
1
2
3
4
5
6
<Canvas ... >
<Ellipse
Canvas.Left="-10.0" Canvas.Top="-10.0"
Width="20.0" Height="20.0"
Fill="lightgray" />
</Canvas>
(Note: In this and the remaining XAML code displays in this chapter, we high-
light the new or modified portion for your convenience.)
Although this specification is unambiguous, it's not obvious what this ellipse
will look like when displayed. What is the on-screen size of a circle of diameter
20 units, where our unit of measurement was determined by an arbitrary piece of
graph paper?
We suggest you run the lab software (available in the online resources), and
select V.01 to see the result of the execution of the above XAML. A screenshot
of the rendered result (shown in Figure 2.9, along with a mouse cursor for scale)
shows that the result is not acceptable for two reasons: The gray circle is too small
to act as a usable clock face, and we are only seeing one quadrant.
The schematic view shown in Figure 2.10 depicts this ellipse specification,
with the left side (light-pink box) representing the abstract geometric data that
Figure 2.9: Rendered result of
revision V.01 of our XAML clock
application, exhibiting problems
with both image size and posi-
tioning.
2. This default order-dependent stacking order can be overridden by the optional attribute
Canvas.ZIndex .
 
 
Search WWH ::




Custom Search