Sliverlight之 矢量绘图

目标:在两天内完成一个环形图的绘制

准备:第5章 矢量绘图

1,形状绘图(见Project11)

(1)线条用什么标签表示,它有哪几个重要属性

说明:

Line标签

x1 y1表示起始点x,y坐标

x2 y2表示结束点x,y坐标

(2)画一条线(x1=100,y1=100 x2=200,y2=200) 

说明:

<Line Stroke="Green" StrokeThickness="" X1="" Y1="" X2="" Y2=""></Line>

(3)画两条连接的线,第二条线的起点是第一条线的起始点 

说明:

 <Line Stroke="Green" StrokeThickness="" X1="" Y1="" X2="" Y2=""></Line>

<Line Stroke="Red" StrokeThickness="" X1="" Y1="" X2="" Y2=""></Line>

(4)画一条红绿渐变的横线 

说明:

<Line StrokeThickness="" X1="" Y1="" X2="" Y2="">

            <Line.Stroke>

                <LinearGradientBrush>

                    <GradientStop Color="Red" Offset=""></GradientStop>

                    <GradientStop Color="Green" Offset=""></GradientStop>

                </LinearGradientBrush>

            </Line.Stroke>

        </Line>

(5)画一条蓝黄渐变的竖线 

说明:

<Line X1="" Y1="" X2="" Y2="" StrokeThickness="">

            <Line.Stroke>

                <LinearGradientBrush>

                    <GradientStop Color="Blue" Offset=""></GradientStop>   

                    <GradientStop Color="Yellow" Offset=""></GradientStop>

                </LinearGradientBrush>               

            </Line.Stroke>           

        </Line>

(6)矩形用什么标签表示,它有哪几个重要属性 

说明:

Rectangle

属性有Width Height

Fill填充颜色

RadiusX RadiusY 表示圆角x,y半径

注意:Width包括StrokeThickness两边宽度(Height同理)

(7)画一个长方形(加上一个边框),再将其改成一个正方形,接着为它添加4个圆角,最后将其变成一个椭圆形(额外属性RadiusX,RadiusY) 

说明:

<Rectangle Stroke="Green" StrokeThickness="" Fill="Red" Width="" Height="" RadiusX="" RadiusY=""></Rectangle>

变成椭圆,调节RadiusX,RadiusY

(8)椭圆用什么标签表示,它有哪几个重要属性

说明:Ellipse

属性有Width Height Fill

(9)画一个带边框的椭圆,接着将其变成一个圆

说明:

<Ellipse Width="" Height="" Stroke="Green" StrokeThickness="" Fill="Red"></Ellipse>

(10)多线段用什么标签表示,它的一个重要属性是什么

说明:

标签:Polyline

属性:Points(第1个点x,y坐标 第2个点x,y坐标  ....... 第n个点x,y坐标)

(11)把上面第3个问题,用多线段来实现 

说明:

<Polyline Points="100,100 200,200 300,50" Stroke="Blue" StrokeThickness=""></Polyline>

(12)多边形,用什么标签表示,它的一个重要属性是什么

说明:

标签:Polygon

属性:Points(第1个点x,y坐标 第2个点x,y坐标  ....... 第n个点x,y坐标)

(11)把上面第11个问题,将多线段Polyline换成Polygon,看看有什么效果,请总结Polyline和Polygon的区别

说明:

<Polygon Points="100,100 200,200 300,50 350,100" Stroke="Blue" StrokeThickness=""></Polygon>

现象:起点和终点连成一条线

区别:Polygon会将起点和终点连成一条线,而Polyline不会

(12)画一个五角星(将FillRule设置成不同的值,看看有什么效果) 

说明:

<Polygon Points="100,100 70,180 150,130 55,130 130,180" Stroke="Red" StrokeThickness="" Fill="Green" FillRule="EvenOdd"></Polygon>

FillRule值: EvenOdd 中间不填充颜色

值为Nonzero 中间填充颜色

2,路径绘图(见Project12)

(1)什么是路径绘图

说明:

可以用它来绘制从简单到复杂的任意形状的图形

路径绘图,使用Path标签,它的一个重要属性是Data,Data中的指令对大小写敏感,大写表示绝对值,小写表示相对于前一个点的偏移量

(2)Data属性是由哪3个指令组成的

说明:

MoveCommand:用M表示起始点  大写M:表示绝对值坐标   小写m:表示相对于前一点偏移量

DrawCommand:描述外形轮廓 常用的绘图指令有直线(L或l),水平线(H或h),三次贝塞尔曲线(C或c).....等等

CloseCommand:用z表示,会在起点和终点连成一条线段,用来闭合整个Path

(3)用路径绘制一个三角形,并分析Data属性的数值对应的指令是什么

说明:

 <Path Data="M 70,130 L 200,160 200,100z" Stroke="Red" StrokeThickness="" Fill="Green"></Path>

解释

M 70,130  MoveCommand

L 200,160 200,100  DrawCommand

z  CloseCommand

(4)绘图指令DrawCommands包含了哪些形状

说明:

直线: L或l

水平线:  H或h  一个值x坐标

垂直线:  V或v  一个值y坐标

三次贝塞尔曲线: C或c  格式:C(或c) + 控制点1 + 控制点2 + 结束点

二次贝塞尔曲线: Q或q  格式:Q(或q) + 控制点 + 结束点

平滑贝塞尔曲线: S或s  格式:S(或s) + 控制点 + 结束点

平滑二次贝塞尔曲线: T或t  格式:T(或t) + 控制点 + 结束点

椭圆弧: A或a  在当前点和指定的终点之间画一个椭圆弧  格式: A(或a) + 尺寸 + 圆弧旋转角度 + 大弧形标记 + 正负方向标记 弧度终点

(5)绘制一条曲线,知道曲线是由2个控制点组成的 

说明:

<Path Data="M 100,100 C 190,120 120,170 200,200" Stroke="Green" StrokeThickness=""></Path>

格式:C(或c) + 控制点1 + 控制点2 + 结束点

(6)绘图指令DrawCommands对大小写敏感吗,比如小写v和大写V在相同的数据下有什么不同,用示例演示出来

说明:

 <Path Data="M 100,100 H 200 V 100 L 250,300 " Stroke="Green" StrokeThickness=""></Path>

把Data中的值大写的V改成小写的v,可以看到不同的效果

大写,表示绝对值坐标  小写,表示相对于前一个点的坐标

3,几何绘图(见Project13)

(1)什么是几何绘图,它与Shap绘图有什么区别

说明:

几何绘图Gemotry类类似Shap类,但二者本身没有联系,它相比Shap类,更灵活,绘图效率更高

示例:可以看下面第5点和第5点

(2)Geometry可以绘制哪些几何图形,它们分别对应着Shap类中的哪些形状

说明:

LineGeometry        等价于  Line

RectangleGeometry   等价于  Rectangle

EllipseGeometry     等价于  Ellipse

GeometryGrop        可以将不同的几何形状组合在一起

PathGeometry        可以产生比较复杂的轮廓,例如弧形,贝塞尔曲线和线条等,并且可以控制线条是否封闭

(3)Geometry和Path在使用上,有哪些联系

说明:

Gemotry的子类对象(比如LineGeometry),必须要放在Path.Data容器中使用

(4)使用LineGeometry绘制一个线条,并比较它和Shap中的Line有什么区别

说明:

<Path Stroke="Gray" StrokeThickness="">

            <Path.Data>

                <LineGeometry StartPoint="100,100" EndPoint="150,150"></LineGeometry>

            </Path.Data>

        </Path>

LineGeometry必须要放在Path.Data容器中使用,而Line则不用

LineGeometry通过2个属性绘制线段,而Line则用4个属性绘制线断

(5)使用RectangleGeometry画一个矩形,并比较它和Shap中的Rectangle有什么区别

说明:

<Path Stroke="Green" StrokeThickness="">

            <Path.Data>

                <RectangleGeometry Rect="50,50 150,150"></RectangleGeometry>

            </Path.Data>

        </Path>

属性 Rect="起始点坐标 相对于起始点坐标"

区别: RectangleGeometry通过坐标位置来控制矩形,而Rectangle则是通过idth,Height来控制.相比,RectangleGeometry更灵活

(6)使用EllipseGeometry画一个椭圆,并比较它和Shap中的Ellipse有什么区别

说明:

<Path Stroke="Red" StrokeThickness="">

            <Path.Data>

                <EllipseGeometry RadiusX="" RadiusY="" Center="100,100"></EllipseGeometry>

            </Path.Data>

        </Path>

属性: RadiusX="X半径距离"   RadiusY="Y半径距离"  Center:表示圆心的坐标点

区别:EllipseGeometry通过RadiusX,RadiusY,Center属性来控制椭圆,而Ellipse则通过Width,Height控制,相比,EllipseGeometry更灵活

(7)什么是GeometryGrop

说明:

在Path.Data中只能放置一个Geometry对象

如果你要绘制多个Geometry形状,那么可以用GeometryGrop来实现

(8)将一个矩形和一个椭圆形交叉显示,用GeometryGroup实现,并将FillRule设置成不同的值,看看效果

说明:

<Path Stroke="Green" StrokeThickness="" Fill="Red">

            <Path.Data>

                <GeometryGroup FillRule="Nonzero">

                    <EllipseGeometry RadiusX="" RadiusY="" Center="100,100"></EllipseGeometry>

                    <RectangleGeometry Rect="100,100 100,100"></RectangleGeometry>

                </GeometryGroup>               

            </Path.Data>

        </Path>

(9)使用GeometryGroup有哪些优势和劣势

说明:

优势:可以将多个几何形状组合在一起EventHandler(事件处理)和填充颜色

劣势:需要针对不同的形状添加

4,PathGeometry  (见Project14)

(1)什么是PathGeometry,它有哪些优势,它与GemotryGroup有哪些异同

说明:

PathGeometry是几何路径绘图,通过PathFigure可以创建很复杂的几何图形

与GemotryGroup异同

不同:

PathGeometry可以放在GemotryGroup容器里

PathGeometry由直线,弧线,贝塞尔曲线构成

GemotryGroup则是一个最大的容器,它可以包含PathGeometry

相同:

将一些基本的元素形状组装在一起

(2)什么是PathFigure和PathSegment,它们之间有什么关系

说明:

PathSegment是一个具体的几何对象(比如直线,曲线),而PathFigure是一个创建和储存这些几何对象的.

一个PathFigure可以包含多个PathSegment

(3)PathFigure有哪些主要的属性

说明:

StarttPoint:  起始点坐标

IsClosed:     起点和终点是否连成一条线

(4)Segments包括哪些图形

说明:

主要包括3种:

LineSegment 直线

ArcSegment 椭圆弧

BezierSegment 贝塞尔曲线

(5)用LineSegment画一个七边形的大箭头,并给个渐变

说明:

<Path Stroke="Red" StrokeThickness="">

            <Path.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                    <GradientStop Color="Blue" Offset=""></GradientStop>

                    <GradientStop Color="Yellow" Offset=""></GradientStop>

                </LinearGradientBrush>

            </Path.Fill>

            <Path.Data>

                <PathGeometry>

                    <PathFigure IsClosed="True" StartPoint="20,100">

                        <LineSegment Point="100,100"></LineSegment>

                        <LineSegment Point="100,70"></LineSegment>

                        <LineSegment Point="130,125"></LineSegment>

                        <LineSegment Point="100,180"></LineSegment>

                        <LineSegment Point="100,150"></LineSegment>

                        <LineSegment Point="20,150"></LineSegment>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

(6)比较LineSegment和LineGeometry及Shap中的Line,这三者有什么区别

说明:

LineSegment 实际上是一个点的坐标    它有一个属性Point="x坐标,y坐标"    如果要画一个线段,还需要在PathFigure的属性StartPoint设置一个坐标值

LineGeometry  可以通过StartPoint和EndPoint来画一个线段

Line  需要通过4个属性x1,y1,x2,y2来画一个线段

(7)画一条弧线,一般要设置哪几个属性

说明:

标签:ArcSegment

属性:

Point  当前点坐标

Size="x值,y值"

描述椭圆弧的 X 轴半径和 Y 轴半径的 Size 结构。

Size 结构的 Width 属性指定弧的 X 轴半径；它的 Height 属性指定弧的 Y 轴半径。默认值是值为 0,0 的 Size

SweepDirection="顺时针/逆时针"  表示弧形是顺时针绘制还是以逆时针绘制

RotationAngle="数值"            表示旋转角度

(8)使用ArcSegment画两条连接的弧线

说明:

<Path Stroke="Red" StrokeThickness="">

            <Path.Data>

                <PathGeometry>

                    <PathFigure IsClosed="False" StartPoint="20,100">

                        <ArcSegment Point="100,130" Size="3,6" SweepDirection="Clockwise" RotationAngle=""></ArcSegment>

                        <ArcSegment Point="200,150" Size="2,3" SweepDirection="Clockwise"></ArcSegment>

                        <LineSegment Point="120,40"></LineSegment>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

(9)画一条BezierSegment曲线,一般要设置哪几个属性,用个示例演示一下

说明:

3个属性:Point1,Point2,Point3

<Path Stroke="Red" StrokeThickness="">

            <Path.Data>

                <PathGeometry>

                    <PathFigure StartPoint="100,20">

                        <BezierSegment Point1="30,50" Point2="70,150" Point3="10,200"></BezierSegment>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

(10)比较区别路径绘图中曲线,BezierSegment曲线,ArcSegment

说明:

路径图中曲线分成好几种,Data="曲线标记 控制点1坐标 ...."使用

BezierSegment曲线,使用使用Point1,Point2,Point3属性,而且在PathFigure中设置了StartPoint

ArcSegment:绘制一个弧,使用Point,Size属性绘制

路径绘图中椭圆弧,Data="A(或a)标记...."使用

5,用C#绘制图形

(1)了解如何使用C#来绘制一些不同的2D图形

(2)路径绘图,在C#中如何实现

(3)了解如何用C#绘制一个销售统计图形