programming windows phone 7 phần 5 ppt

This namespace consists of an abstract class named Shape and six sealed classes that derive from Shape: Shape abstract Rectangle sealed Ellipse sealed Line sealed Polyline sealed Poly

Trang 1

The world of two-dimensional computer graphics is generally divided between vector

graphics and raster graphics—a graphics of lines and a graphics of pixels—a graphics of draw programs and a graphics of paint programs—a graphics of cartoons and a graphics of

photographs

Vector graphics is the visual realization of analytic geometry Two-dimensional coordinate

points in the form (x, y) define straight lines and curves In Silverlight, these curves can be arcs

on the circumference of an ellipse or Bezier curves, either in the customary cubic form or in a simplified quadratic form You can “stroke” these lines with a pen of a desired brush, width, and style A series of connected lines and curves can also define an enclosed area that can be filled with a brush

Raster graphics (which I’ll discuss in the next chapter) involves bitmaps In Silverlight it is very

easy to display a PNG or JPEG file using an Image element as I demonstrated as early as

Chapter 4 But as I’ll show you in the next chapter, it’s also possible to generate bitmaps

algorithmically in code using the WriteableBitmap class The worlds of raster graphics and vector graphics intersect when an ImageBrush is used to fill an area, or when vector graphics are used to generate an image on a WriteableBitmap

The Shapes Library

A Silverlight program that needs to draw vector graphics uses classes defined in the

System.Windows.Shapes namespace, commonly referred to as the Shapes library This

namespace consists of an abstract class named Shape and six sealed classes that derive from Shape:

Shape (abstract)

Rectangle (sealed) Ellipse (sealed) Line (sealed) Polyline (sealed) Polygon (sealed) Path (sealed)

Trang 2

The Shape class derives from FrameworkElement, which means that these objects get touch

input, participate in layout, and can have transforms In Silverlight there is insufficient

information to allow you to derive a class from Shape itself

You’ve already seen Rectangle and Ellipse, but these are really two oddball classes in the realm

of vector graphics because they don’t contain any coordinate points You can just stick an

Ellipse in a UserControl and it fills the whole control You can size the element, but positioning

it at an arbitrary point requires a Margin or Padding property, or a RenderTransform, or putting it on a Canvas and using the Left and Top attached properties

The other four classes of Shape are different; these allow you to position the elements with actual coordinate points Although I’ll discuss the Path class last, it is so versatile that it is

pretty much the only class you need for all your vector graphics jobs If you need to draw an

arc or a Bezier spline, you’ll be using the Path class

Shape defines 11 settable properties that are inherited by all its descendants:

• Fill of type Brush

• Stroke of type Brush

• StrokeThickness of type double

• StrokeStartLineCap and StrokeEndLineCap of type PenLineCap

• StrokeLineJoin of type PenLineJoin

• StrokeMiterLimit of type double

• StrokeDashArray of type DoubleCollection

• StrokeDashCap of type PenLineCap

• StrokeDashOffset of type double

• Stretch property of type Stretch

You’ve already seen the first three properties in connection with Rectangle and Ellipse The Fill property specifies the Brush used to fill the interior of the figure; the Stroke property is the Brush used to color the outline of the figure, and StrokeThickness is the width of that outline All the other properties can be used with Rectangle and Ellipse as well Although the two enumerations (PenLineCap and PenLineJoin) allude to a Pen, there is no Pen class in

Silverlight Conceptually, the properties beginning with the word Stroke together comprise an

object traditionally regarded as a pen

394

Trang 3

The Line class defines four properties of type double named X1, Y1, X2, and Y2 The line is drawn from the point (X1, Y1) to the point (X2, Y2) relative to its parent:

< Canvas Background ="LightCyan">

< Line X1 ="50" Y1 ="100"

X2 ="200" Y2 ="150"

Stroke ="Blue" />

</ Canvas >

Many of the examples in this program will be shown as a snippet of XAML and the

corresponding image in a 480-square pixel area At the end of the chapter I’ll describe the program that created these images For the printed page I’ve made the resolution of these images about 240 dots per inch so they are approximately the same size as what you would see on the actual phone

The line begins at the coordinate point (50, 100) and ends at the point (200, 150) All

coordinates are relative to an upper-left origin; increasing values of X go from left to right; increasing values of Y go from top to bottom

The X1, Y1, X2, and Y2 properties are all backed by dependency properties so they can be the

targets of styles, data bindings, and animations

Although the Canvas panel seems like a natural for vector graphics, you’ll get the same image

if you use a single-cell Grid:

< Grid Background ="LightCyan">

< Line X1 ="50" Y1 ="100"

X2 ="200" Y2 ="150"

Stroke ="Blue" />

</ Grid >

Trang 4

Normally when you use a Canvas you use the Canvas.Left and Canvas.Top attached properties

to position elements within the Canvas Those properties are not required with the Line because it has its own coordinates You could use the attached properties with the Line but

the values are compounded with the coordinates:

< Canvas Background ="LightCyan">

< Line X1 ="50" Y1 ="100"

X2 ="200" Y2 ="150"

Canvas.Left ="150"

Canvas.Top ="100"

Stroke ="Blue" />

</ Canvas >

Usually when you’re working with elements that indicate actual coordinate positions, you’ll

use the Canvas.Left and Canvas.Top attached properties only for special purposes, such as moving an object relative to the Canvas

Moreover, you’ll recall that a Canvas always reports to the layout system that it has a size of zero If you subject the Canvas to anything other than Stretch alignment, it will shrink into

nothingness regardless of its contents

For these reasons, I tend to put my vector graphics in a single-cell Grid rather than a Canvas

If a Grid contains one or more Line elements (or any other coordinate-based elements), it will report a size that comprises the maximum non-negative X coordinate and the maximum non negative Y coordinate of all its children This can sometimes seem a little weird If a Grid contains a Line from (200, 300) to (210, 310), the Line will report an ActualWidth of 210 and

an ActualHeight of 310, and the Grid will be 210 pixels wide and 310 pixels tall, even though the rendered Line needs only a tiny corner of that space (Actually, the Line and the Grid will

be at least an extra pixel larger to accommodate the StrokeThickness of the rendered Line.) Coordinates can be negative, but the Grid does not take account of negative coordinates A negative coordinate will actually be displayed to the left of or above the Grid I have spent

much time thinking about this behavior, and I am convinced it is correct

Overlapping and ZIndex

Here are two lines:

396

Trang 5

< Line X1 ="100" Y1 ="300"

X2 ="200" Y2 ="50"

Stroke ="Blue" />

< Line X1 ="50" Y1 ="100"

X2 ="300" Y2 ="200"

Stroke ="Red" />

</ Grid >

The second one overlaps the first one You can see that more clearly if you go beyond the

default 1-pixel thickness of the line using StrokeThickness:

< Line X1 ="100" Y1 ="300"

X2 ="200" Y2 ="50"

Stroke ="Blue"

StrokeThickness ="5" />

< Line X1 ="50" Y1 ="100"

X2 ="300" Y2 ="200"

Stroke ="Red"

</ Grid >

If you would prefer that the blue line be on top of the red line, there are two ways you can do

it You could simply swap the order of the two lines in the Grid:

< Grid Background =”LightCyan”>

< Line X1 ="50" Y1 ="100"

X2 ="300" Y2 ="200"

Stroke ="Red"

< Line X1 ="100" Y1 ="300"

X2 ="200" Y2 ="50"

Stroke ="Blue"

</ Grid >

Or, you could set the Canvas.ZIndex property Although this property is defined by Canvas it

works with any type of panel:

Trang 6

< Line Canvas.ZIndex

X1 ="100" Y1 X2 ="200" Y2 Stroke StrokeThickness

< Line Canvas.ZIndex

X1 ="50" Y1 X2 ="300" Y2 Stroke StrokeThickness

</ Grid >

Polylines and Custom Curves

The Line element looks simple but the markup is a little bloated You can actually reduce the markup for drawing a single line by switching from the Line to the Polyline:

< Polyline Points ="100 300 200 50"

Stroke ="Blue"

< Polyline Points ="50 100 300 200"

Stroke ="Red"

</ Grid >

The Points property of the Polyline class is of type PointCollection, a collection of Point objects

In XAML you indicate multiple points by just alternating the X and Y coordinates You can

string out the numbers with spaces between them as I’ve done, or you can clarify the markup

a little with commas Some people prefer commas between the X and Y coordinates:

< Polyline Points ="100,300 200,50" …

Others (including me) prefer to separate the individual points with commas:

< Polyline Points ="100 300, 200 50"

The advantage of Polyline is that you can have as many points as you want:

398

Trang 7

< Polyline Points ="100 300, 200 50,

350 100, 200 250"

Stroke ="Blue"

< Polyline Points =" 50 100, 300 200,

300 400"

Stroke ="Red"

</ Grid >

Each additional point increases the total polyline by another line segment

The Polyline does have one significant disadvantage that Line doesn’t have: Because you’re now dealing with a collection of Point objects, the individual points can’t be targets of a style,

or a data binding, or an animation This is not to say that you can’t change the PointCollection

at runtime and have that change reflected in the rendered Polyline You surely can, as I’ll

demonstrate in the GrowingPolygons program later in this chapter

Although the Polyline can draw some simple connected lines, it tends to feel underutilized if

it’s not fulfilling its true destiny of drawing complex curves, usually generated algorithmically

in code The Polyline is always a collection of straight lines, but if you make those lines short

enough and numerous enough, the result will be indistinguishable from a curve

For example, let’s suppose you want to use Polyline to draw a circle Commonly, a circle centered at the point (0, 0) with a radius R is defined as all points (x, y) that satisfy the

equation:

This is also, of course, the Pythagorean Formula

But when generating points to draw a graphical circle, this formula tends to be a little clumsy:

You need to pick values of x between –R and R, and then solve for y (keeping in mind that most values of x correspond to two values of y) and even if you do this in a systematic manner, you’re going to get a higher density of points in the region where x is close to 0 than the region where y is close to 0

A much better approach for computer graphics involves parametric equations, where both x and y are functions of a third variable, sometimes called t to suggest time In this case that

third variable is simply an angle ranging from 0 to 360°

Suppose the circle is centered on the point (0, 0) and has a radius of R The circle will be enclosed within a box where values of x go from –R on the left to +R on the right In keeping

Trang 8

with the Silverlight convention that increasing values of y go down, values of y range from –R

on the top to +R on the bottom

Let’s begin with an angle of 0° at the rightmost edge of the circle, which is the point (R, 0), and let’s go clockwise around the circle As the angle goes from 0° to 90°, x goes from R to 0, and then x goes to –R at 180° and then goes back down to zero at 270° and back to R at

360° This is a familiar pattern:

At the same time, the values of y go from 0 to R to 0 to –R and back to 0, or

Depending where the circle begins, and in what direction you go, you could have slightly different formulas where the sine and cosine functions are switched, or one or both or negative

If you use different values of R for the two formulas, you’ll draw an ellipse If you want the circle centered at the point (C x , C y), you can add these values to the previous results:

In a program, you put those two formulas in a for loop that increments an angle value

ranging from 0 to 360 to generate a collection of points

How much granularity is required to make the resultant circle look smooth? In this particular

example, it depends on the radius The circumference of a circle is 2πR, so if the radius is 240

pixels (for example), the circumference is approximately 1,500 pixels Divide by 360° and you

get about 4, which means that if you increment the angle in the for loop by 0.25°, the

resultant points will be about a pixel apart (You’ll see later in this chapter that you can get by with a lot fewer points.)

Let’s create a new projecvt Bring up the MainPage.cs file and install a handler for the Loaded event to allow accessing the dimensions of the ContentPanel grid Here are calculations for

center and radius for a circle to occupy the center of a content panel and reach to its edges:

Point center = new Point (ContentPanel.ActualWidth / 2,

ContentPanel.ActualHeight / 2 - 1);

double radius = Math Min(center.X - 1, center.Y - 1);

Notice the pixel subtracted from the calculation of the radius This is to prevent the circle

from being geometrically the same as the content area size The stroke thickness straddles the geometric line so it would otherwise get cropped off at the edges

400

Trang 9

Now create a Polyline and set the Stroke and StrokeThickness properties:

Polyline polyline = new Polyline

polyline.Stroke = this Resources[ "PhoneForegroundBrush" ] as Brush

polyline.StrokeThickness = ( double ) this Resources[ "PhoneStrokeThickness"

Calculate the Point objects in a for loop based on the formulas I’ve just showed you and add them to the Points collection of the polyline:

for ( double angle = 0; angle < 360; angle += 0.25)

{

double radians = Math PI * angle / 180;

double x = center.X + radius * Math Cos(radians);

double y = center.Y + radius * Math Sin(radians);

polyline.Points.Add( new Point (x, y));

}

Now add the Polyline to the Grid:

ContentPanel.Children.Add(polyline);

And here’s the result:

So big deal We created a circle a hard way rather than an easy way And it’s not even a

complete circle: Because the angle in the for loop didn’t go all the way to 360, there’s actually

a little gap at the right side

But instead of fixing that problem, let’s do something a little different Let’s make the angle

go all the way to 3600:

Trang 10

for ( double angle = 0; angle < 3600; angle += 0.25)

Now the loop will go around the circle 10 times Let’s use that angle and the original radius value to calculate a scaledRadius:

And use that scaledRadius value for multiplying by the sine and cosine values Now the result

is an Archimedian spiral:

Here’s the complete class:

Silverlight Project: Spiral File: MainPage.xaml.cs (excerpt)

public partial class MainPage : PhoneApplicationPage

void OnLoaded(object sender, RoutedEventArgs args)

Trang 11

Polyline polyline = new Polyline

polyline.Stroke = this.Resources[ "PhoneForegroundBrush" ] as Brush

polyline.StrokeThickness = ( double ) this Resources[ "PhoneStrokeThickness"

{ double scaledRadius = radius * angle / 3600;

double radians = Math PI * angle / 180;

double x = center.X + scaledRadius * Math Cos(radians);

double y = center.Y + scaledRadius * Math Sin(radians);

polyline.Points.Add(new Point (x, y));

It’s not necessary to create the Polyline object in code: You could define it in XAML and then just access it to put the points in the Points collection In Chapter 15 I’ll show you how to

apply a rotation animation to the spiral so that you can hypnotize yourself

Caps, Joins, and Dashes

When you’re displaying thick lines, you might want a little different appearance on the ends

of the lines These are known as line caps—“caps” like a hat The available caps are members

of the PenLineCap enumeration: Flat (the default), Square, Round, and Triangle Set the StrokeStartLineCap property to one of these values for the cap at the beginning of the line, and set StrokeEndLineCap for the cap at the end Here are Round and Triangle capping off a

30-pixel line:

< Polyline Points =" 50 100, 300 200,

300 400"

Stroke ="HotPink"

StrokeThickness ="30"

StrokeStartLineCap ="Round"

StrokeEndLineCap ="Triangle" />

</ Grid >

The difference between Flat and Square might not be obvious at first To better clarify the

difference, the following markup displays a thinner line over the thick line with the same coordinates to indicate the geometric start and end of the line:

Trang 12

< Polyline Points =" 50 100, 300 200,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

< Polyline Points =" 50 100, 300 200,

300 400"

Stroke ="Black" />

</ Grid >

The Flat cap (at the upper left) cuts off the line at the geometric point The Square extends the

line for half the line thickness My favorite caps are the rounded ones:

< Polyline Points =" 50 100, 300 200,

300 400"

Stroke ="HotPink"

StrokeEndLineCap ="Round" />

< Polyline Points =" 50 100, 300 200,

300 400"

Stroke ="Black" />

</ Grid >

As you can see, they also extend the rendered size of the line by half the stroke thickness

You can also specify what happens at the corners Set the StrokeLineJoin property to a

member of the PenLineJoin enumeration Here’s Round:

< Polyline Points =" 50 100, 300 200,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

< Polyline Points =" 50 100, 300 200,

100 300"

Stroke ="Black" />

</ Grid >

404

Trang 13

Or Bevel:

< Polyline Points =" 50 100, 300 200,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

< Polyline Points =" 50 100, 300 200,

100 300"

Stroke ="Black" />

</ Grid >

Or Miter, which is the default:

< Polyline Points =" 50 100, 300 200,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

< Polyline Points =" 50 100, 300 200,

100 300"

Stroke ="Black" />

</ Grid >

The Miter join has a little built-in problem If the lines meet at a very sharp angle, the miter

can be very long For example, a 10-pixel wide line that makes an angle of 1° will have a miter

point over 500 pixels long! To avoid this type of weirdness a StrokeMiterLimit property kicks in

for extreme cases:

< Polyline Points ="50 230, 240 240,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

< Polyline Points ="50 230, 240 240,

50 250"

Stroke ="Black" />

</ Grid >

The default value is 10 (relative to half the StrokeThickness) but you can make it longer if you

want:

Trang 14

< Polyline Points ="50 230, 240 240,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

StrokeMiterLimit

< Polyline Points ="50 230, 240 240,

50 250"

Stroke ="Black" />

</ Grid >

Here are two lines, one thick, one thin overlaying the thick line, with the same geometric points, going from the upper-left to the lower-left:

< Polyline Points ="100 100, 380 100,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

You can make the line dashed by setting the StrokeDashArray, which is generally just two

numbers, for example 1 and 1:

< Polyline Points ="100 100, 380 100,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

StrokeDashArray

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

What this means is that a dash will be drawn for one-line thickness (30 pixels in this case), followed by a one-line thickness gap, and repeated until the end As you can see, the caps are

406

Trang 15

really handled a little differently; they are drawn or not drawn depending on whether they occur when a dash or a gap is in progress

You can make the dashes longer by increasing the first number,

< Polyline Points ="100 100, 380 100,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

StrokeDashArray

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

However, you’ll probably also want to give the dashes their own caps Set StrokeDashCap to a member of the PenLineCap enumeration, either Flat (the default), Triangle, Square, or Round,

which is my preference:

< Polyline Points ="100 100, 380 100,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

StrokeDashArray

StrokeDashCap

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

A little problem has arisen Each of the dashes has acquired a rounded cap, so they’ve each increased in length on both ends by half the line thickness, and now the dashes actually touch You need to fix that by increasing the gap:

Trang 16

< Polyline Points ="100 100, 380 100,

Stroke

StrokeThickness

StrokeStartLineCap

StrokeEndLineCap

StrokeLineJoin

StrokeDashArray

StrokeDashCap

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

If you want to draw a dotted line with actual round dots, obviously you want to use the Round

dash cap, and you want each dot to be separated by its neighbor by the dot width The

StrokeDashArray required for this job is somewhat non-intuitive It’s a dash length of 0 and a

gap length of 2:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="HotPink"

StrokeEndLineCap ="Round"

StrokeLineJoin ="Round"

StrokeDashArray ="0 2"

StrokeDashCap ="Round" />

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

You can have more than two numbers Here’s a dot and dash configuration:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="HotPink"

StrokeDashArray ="0 2 2 2"

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

408

Trang 17

</ Grid >

You don’t even need an even number of numbers:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="HotPink"

StrokeDashArray ="1 2 3"

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

The other dash-related property is StrokeDashOffset, and it is also relative to the thickness of

the line This property lets you start the dashes in the middle of a dash, which makes the first dash (at the upper-left corner) smaller than the rest:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="HotPink"

StrokeDashCap ="Round"

StrokeDashOffset ="1" />

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

Trang 18

Or you can start with a gap:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="HotPink"

StrokeDashCap ="Round"

StrokeDashOffset ="3" />

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Black" />

</ Grid >

You can use a dotted line around an ellipse if you want:

< Ellipse Width ="400" Height ="400"

HorizontalAlignment ="Center"

VerticalAlignment ="Center"

Stroke ="Red"

StrokeThickness ="23.22"

StrokeDashArray ="0 1.5"

</ Grid >

It’s an unusual look, but you really have to experiment or do some calculations so you don’t get half a dot in there

410

Trang 19

The Polyline that I’ve been using to demonstrate dotted lines is only three sides of a square:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Red"

</ Grid >

But if you set the Fill brush, the interior is filled as if the polyline describes a closed area:

< Polyline Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Red"

Fill ="Blue"

</ Grid >

If you want the figure to be really closed, you can add another point to the Points collection that is the same as the first point, or you can use a Polygon rather than a Polyline:

< Polygon Points ="100 100, 380 100,

380 380, 100 380"

Stroke ="Red"

Fill ="Blue"

</ Grid >

Both elements have the same Points collection, but the Polygon is closed automatically if

necessary

Trang 20

Once you start filling enclosed area with Polygon, a question comes up about how the interior should be handled when boundary lines overlap The Polygon class defines a property named FillRule that gives you a choice The classic example is the five-pointed star Here’s the default FillRule, called EvenOdd:

< Polygon Points ="240 48, 352 396,

58 180, 422 180,

128 396"

Stroke ="Red"

Fill ="Blue"

FillRule ="EvenOdd" />

</ Grid >

The EvenOdd algorithm determines if an enclosed area should be filled or not by conceptually

taking a point in that area, for example, somewhere in the center, and drawing an imaginary line out to infinity That imaginary line will cross some boundary lines If it crosses an odd number of boundary lines, such as happens in the five points, then the area is filled For an even number, like the center, the area is not filled

The alternative is a FillRule called NonZero:

< Polygon Points ="240 48, 352 396,

58 180, 422 180,

128 396"

Stroke ="Red"

Fill ="Blue"

FillRule ="NonZero" />

</ Grid >

The NonZero fill rule is a bit more complex because it takes account of the directions that

boundary lines are drawn If the boundary lines drawn in one direction balance out the boundary lines drawn in the opposite direction, then the area is not filled In any interior area

of this star, however, all the boundary lines go in the same direction

Neither of these two FillRule options guarantees that all interior areas get filled Here’s a rather artificial figure that has an enclosed but unfilled area even with NonZero:

412

Trang 21

< Polygon Points =" 80 160, 80 320,

240 320, 240 80,

400 80, 400 240,

160 240, 160 400,

320 400, 320 160"

Stroke ="Red"

Fill ="Blue"

FillRule ="NonZero" />

</ Grid >

The Stretch Property

The only settable property defined by Shape that I haven’t discussed yet is Stretch This is similar to the same property in the Image element; you set it to a member of the Stretch enumeration, either None (the default), Fill, Uniform, or UniformToFill Here’s an innocent little Polygon:

< Grid Background

< Polygon Points

230 270, 230 260"

Stroke ="Red"

</ Grid >

Now here’s the same Polygon with its Stretch property set to Fill

< Polygon Points ="250 200, 250 210,

230 270, 230 260"

Stroke ="Red"

Stretch ="Fill" />

</ Grid >

Trang 22

Regardless of the coordinates, it stretches to fill the container with a change in aspect ratio as

well To retain the aspect ratio, use Uniform or UniformToFill just as with the Image element You can probably see why the Stretch property of Shape isn’t used very often in connection

with vector graphics, but if you need a particular vector image to fill an area of arbitrary size, it’s a welcome option

Dynamic Polygons

As you’ve seen, when a property backed by a dependency property is changed at runtime, the element with that property changes to reflect that change This is a result of the support for a property-changed handler built into dependency properties

Certain collections will also respond to changes Collection classes that derive from

PresentationFrameworkCollection respond to changes when an object is added to or removed

from a collection A notification is funneled up to the element containing the collection In some cases, changes to dependency properties in the members of the collection also trigger notifications (Unfortunately, the exact nature of this notification process is hidden from the

application programmer.) The UIElementCollection that the Panel classes uses for its Children property derives from this class, as does the PointCollection in Polyline and Polygon

At runtime, you can dynamically add Point objects to the PointCollection, or remove them from the PointCollection, and a Polyline or Polygon will change

The GrowingPolygons project has a MainPage.xaml file that instantiates a Polygon element

and gives it a couple properties:

Silverlight Project: GrowingPolygons File: MainPage.xaml (excerpt)

< Grid x : Name ="ContentPanel" Grid.Row ="1" Margin ="12,0,12,0">

< Polygon Name ="polygon"

StrokeThickness ="{StaticResource PhoneStrokeThickness}" />

</ Grid >

The code-behind file waits until the Loaded event is fired before determining the size of the

content panel (just as in the Spiral program) and it begins by obtaining similar information

But the OnLoaded handler just adds two points to the Points collection of the Polygon to define a vertical line; everything else happens during Tick events of a DispatcherTimer (which

of course requires a using directive for System.Windows.Threading):

414

Trang 23

Silverlight Project: GrowingPolygons File: MainPage.xaml.cs (excerpt)

Point

public MainPage()

}

void OnLoaded(object sender, RoutedEventArgs

center = new Point

radius = Math

polygon.Points.Add(new Point (center.X, center.Y - radius));

polygon.Points.Add(new Point (center.X, center.Y + radius));

DispatcherTimer tmr = new DispatcherTimer

tmr.Interval = TimeSpan

}

void OnTimerTick(object sender, EventArgs

for (int vertex = 1; vertex < numSides; vertex++)

double radians = vertex * 2 * Math

double x = center.X + radius * Math

double y = center.Y - radius * Math

Point point = new Point

PageTitle.Text = "" + numSides + " sides"

Every second, the program replaces all but one of the Point objects in the Points collection of the Polygon The first Point in the collection—which is the Point at the top center of the content area—is the only one that remains the same In addition, the Tick handler adds a new

Trang 24

Point object at the end of the collection The result is a polygon that gains one new side every

structure, and it implements no notification mechanism There is no way for the

PointCollection to know if a property of a particular Point in the collection has been changed Only when the entire Point object is replaced does the PointCollection know about it

If you’re doing something like this is in a real application, you might want to detach the

PointCollection from the Polygon when you’re making a lot of changes to it This prevents a long series of notifications firing that inform the Polygon that the PointCollection has changed

The code would look something like this:

PointCollection points = polygon.Points;

polygon.Points = null ;

// make changes to points collection

polygon.Points = points;

416

Trang 25

The PointCollection is detached by saving a reference to it and setting the Points property to null When all changes have been made, the PointCollection is reattached to the Polygon, and the Polygon responds to the new collection of points

The Path Element

Although Line, Polyline, and Polygon are all convenient and easy to use, their functionality is pretty much subsumed in the last of the Shape descendents, Path

The Path class defines just one property of its own named Data of type Geometry, but

geometries are a very important concept in Silverlight vector graphics In general, a geometry

is a collection of straight lines and curves, some of which might be connected to each other (or not) and might define enclosed areas (or not) In other graphics programming

environments, the geometry might be called a graphics path In Silverlight, Path is an element that uses a Geometry object for its Data property

It’s important to recognize that a Geometry object is nothing but naked coordinate points

There is no concept of brushes or line thickness or styles with a geometry That’s why you

need to combine a Geometry with a Path element to actually render something on the screen The Geometry defines the coordinate points; the Path defines the stroke brush and fill brush Geometry fits into the Silverlight class hierarchy like so:

Geometry (abstract)

LineGeometry (sealed) RectangleGeometry (sealed) EllipseGeometry (sealed) GeometryGroup (sealed) PathGeometry (sealed) Just as the Path element is pretty much the only Shape derivative you really need, the

PathGeometry class is the only Geometry derivative you really need But of course I’m going to

discuss the others as well because they’re often quite convenient You can’t derive from

Geometry yourself

Geometry defines four public properties:

• get-only static Empty of type Geometry

• get-only static StandardFlatteningTolerance of type double

• get-only Bounds of type Rect

Trang 26

• Transform of type Transform

The most useful are the last two The Bounds property provides the smallest rectangle that encompasses the geometry and Transform allows you to apply a transform to the geometry

(as I will demonstrate)

LineGeometry defines two properties of type Point named StartPoint and EndPoint:

useful as animation targets in some scenarios

RectangleGeometry defines a property named Rect of type Rect, a structure that defines a

rectangle with four numbers: two numbers indicate the coordinate point of the upper-left corner and two more numbers for the rectangle’s size In XAML you specify these four

numbers sequentially: the x and y coordinates of the upper-left corner, followed by the width

and then the height:

Trang 27

The Bounds property of Geometry is also of type Rect For the RectangleGeometry above, Bounds would return the same values: (100, 50, 300, 200) For the LineGeometry in the

previous example, Bounds would return (100, 50, 200, 100)

RectangleGeometry also defines RadiusX and RadiusY properties for rounding the corners:

< Path Stroke ="Maroon"

Specifying the center of a circle or ellipse to indicate its location is often a more convenient

approach than specifying its upper-left corner (as with the Ellipse element)—particularly

considering that ellipses don’t have corners!

Here’s a little exercise in interactive drawing called TouchAndDrawCircles When you touch

the screen, the program creates a new circle from a Path and an EllipseGeometry As you

move your finger, the circle gets larger When you’re finished, the circle is filled with a random color If you then touch an existing circle, you can drag it around the screen

Trang 28

In the MainPage.xaml file, the content grid is initially empty The only change I’ve made is to

give it a non-null Background so it can generate manipulation events:

Silverlight Project: TouchAndDrawCircles File: MainPage.xaml (excerpt)

< Grid x : Name ="ContentPanel" Grid.Row ="1" Margin

Background

The code-behind file has just a few fields to keep track of what’s going on:

Silverlight Project: TouchAndDrawCircles File: MainPage.xaml.cs (excerpt)

Random rand = new Random

operation:

protected override void OnManipulationStarted( ManipulationStartedEventArgs args) {

Trang 29

ellipseGeo = new EllipseGeometry

path = new Path

path.Stroke = this Resources[ "PhoneForegroundBrush" ] as Brush

protected override void OnManipulationDelta( ManipulationDeltaEventArgs args)

if

Point

args.Handled = true

else if

Point translation = args.CumulativeManipulation.Translation;

double radius = Math Max( Math Abs(translation.X),

Math

args.Handled = true

base

Trang 30

In contrast, for the drawing operation, the method modifies the RadiusX and RadiusY

property of the EllipseGeometry For this it uses the CumulativeManipulation property, which reports the entire manipulation since the ManipulationStarted event The reason for the

different property is simple: If the user initiates a drawing operation, and then moves a finger

to the left or up, the translation factors will be negative But these negative numbers must become a positive radius of the circle It turns out to be easier taking the absolute value of the total translation factors rather than to modify existing dimensions

When the finger lifts from the screen, the OnManipulationCompleted event is called for

cleanup:

protected override void OnManipulationCompleted( ManipulationCompletedEventArgs args) if

isDrawing = false

args.Handled = true

base

For the dragging operation, cleanup is simple But the drawing operation needs to conclude

by giving the Path element a random Fill brush

422

Trang 31

Geometries and Transforms

If you’re using EllipseGeometry and you don’t want the axes of the ellipse to be aligned on the horizontal and vertical, you can apply a RotateTransform to it And you have a choice Because Path derives from UIElement, you can set this RotateTransform to the RenderTransform property of the Path:

Trang 32

Notice that the CenterX and CenterY properties of RotateTransform are set to the same values

as the Center point of the EllipseGeometry itself so that the ellipse is rotated around its center When working with Path and Geometry objects, it’s usually easier to specify actual transform centers rather than to use RenderTransformOrigin Normally you set RenderTransformOrigin to

relative coordinates, for example (0.5, 0.5) to specify the center, but look what happens when you try that in this case:

The problem here is that the Path element is large enough to accommodate an

EllipseGeometry with a center at (250, 150) and a RadiusX of 150 and a RadiusY of 100, so the Path element must be at least about 400 pixels wide and 250 pixels tall (It’s actually a little larger due to the non-zero StrokeThickness.) The center of this Path is approximately the point (200, 125) In addition,, like other elements, the Path has default HorizontalAlignment and VerticalAlignment properties of Stretch, so it’s really filling its container, in this case 480 pixels

square, so the rotation is actually around the point (240, 240)

It’s also possible to apply a transform to the Geometry object itself:

Trang 33

to the Geometry object

The RenderTransform property has no effect on how the element is perceived in the layout system, but the Transform property of the Geometry affects the perceived dimensions To see this difference, enclose a Path with an EllipseGeometry in a centered Border:

< Border BorderBrush ="Red"

Trang 34

As was very clear early on in Chapter 8, the RenderTransform does not affect how an element

is perceived in the layout system The Border is still sizing itself based on the unrotated Path Applying the transform to the EllipseGeometry produces quite a different result:

< EllipseGeometry.Transform >

< RotateTransform Angle

CenterX CenterY

Well, that doesn’t look right, either! What happened?

The EllipseGeometry defines an ellipse with a bounding box with an upper-left corner at the

point (0, 0) and the lower-right corner at (300, 100) That’s being rotated 90° around the point (150, 50) The bounding box of the rotated ellipse has an upper-left corner of (100, –100) and

a lower-right corner of (200, 200) The Border is 200 pixels square to accommodate that lower-right corner, but the negative part sticks out of the top of the Border

426

Trang 35

To make it work “correctly,” the center of rotation needs to be set to the point (50, 50):

rectangle aligned at the left edge:

Trang 36

Now apply a ScaleTransform to the RectangleGeometry to increase the width by a factor of 10:

< Path Stroke

StrokeThickness Fill

Trang 37

< Path.Data

< GeometryGroup

< EllipseGeometry Center

RadiusX RadiusY

Notice how the FillRule applies to this combination Here’s another:

< Path Stroke

StrokeThickness Fill

The Versatile PathGeometry

LineGeometry, RectangleGeometry, EllipseGeometry, GeometryGroup—those are all convenient special cases of PathGeometry, certainly the most versatile of the Geometry derivatives With Path and PathGeometry you can perform any vector graphics job that Silverlight allows PathGeometry defines just two properties of its own: the familiar FillRule and a property named Figures of type PathFigureCollection, a collection of PathFigure objects

Trang 38

Conceptually, a PathFigure is a series of connected lines and curves The key word here is connected The PathFigure starts at a particular point, indicated by the StartPoint property, and then the PathFigure continues in a series of connected segments

For these connected segments, PathFigure defines a property named Segments of type PathSegmentCollection, a collection of PathSegment objects PathSegment is an abstract class,

PolyQuadraticBezierSegment (sealed) The PathFigure indicates a StartPoint The first PathSegment object in the Segments collection continues from that point The next PathSegment continues from where the first PathSegment

left off, and so forth

The last point of the last PathSegment in the Segments collection might be the same as the StartPoint of the PathFigure or it might not To ensure that a PathFigure is closed, you can set the IsClosed property If necessary, this will cause a straight line to be drawn from the last point of the last PathSegment to the StartPoint of the PathFigure

PathFigure also defines an IsFilled property that is true by default This property is

independent of any Fill brush you might set on the Path itself It’s used instead for clipping

and hit-testing In some cases, Silverlight might perceive that an area is filled for purposes of

clipping and hit-testing when that is not your intention In that case, set IsFilled to false

In summary, a PathGeometry is a collection of PathFigure objects Each PathFigure object is a series of connected lines or curves indicated by a collection of PathSegment objects

Let’s look at the PathSegment derivatives in more detail

LineSegment defines just one property on its own, Point of type Point It just needs one Point object because it draws a line from the StartPoint property of PathFigure (if the LineSegment is

the first segment in the collection) or from the end of the previous segment

PolyLineSegment defines a Points property of type PointCollection to draw a series of

connected straight lines

430

Trang 39

arc must be specified with two points on the circumference of some ellipse But if you define

an ellipse with a particular center and radii, how do you specify a point on that ellipse circumference exactly without doing some trigonometry?

The solution is to define only the size of this ellipse and not where the ellipse is positioned

The actual location of the ellipse is defined by the two points

I think we need an example Here’s a little line that begins at the point (120, 240) and ends at the point (360, 240)

Trang 40

Let me demonstrate:

Suppose I want the two points to be connected by an arc on the circumference of a circle that

has a radius of 144 pixels Here’s how you specify an ArcSegment of that size that goes

between the points (120, 240) and (360, 240):

Tiêu đề	Vector Graphics
Trường học	University of Information Technology
Chuyên ngành	Computer Graphics
Thể loại	bài giảng
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	102
Dung lượng	1,69 MB