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="3" X1="100" Y1="100" X2="200" Y2="200"></Line>

 

 

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

说明:

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



<Line Stroke="Red" StrokeThickness="3" X1="200" Y1="200" X2="300" Y2="50"></Line>



 

  

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

说明:

<Line StrokeThickness="5" X1="100" Y1="230" X2="200" Y2="230">



            <Line.Stroke>



                <LinearGradientBrush>



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



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



                </LinearGradientBrush>



            </Line.Stroke>



        </Line>

  

 

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

说明:

<Line X1="300" Y1="150" X2="300" Y2="300" StrokeThickness="5">



            <Line.Stroke>



                <LinearGradientBrush>



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



                    <GradientStop Color="Yellow" Offset="1"></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="20" Fill="Red" Width="100" Height="100" RadiusX="10" RadiusY="10"></Rectangle>

 

变成椭圆,调节RadiusX,RadiusY

 

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

说明:Ellipse

属性有Width Height Fill

 

 

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

说明:

<Ellipse Width="200" Height="200" Stroke="Green" StrokeThickness="5" 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="5"></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="5"></Polygon>

 

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

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

 

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

说明:

<Polygon Points="100,100 70,180 150,130 55,130 130,180" Stroke="Red" StrokeThickness="4" 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="3" 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="3"></Path>

 

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

 

 

 

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

说明:

 <Path Data="M 100,100 H 200 V 100 L 250,300 " Stroke="Green" StrokeThickness="3"></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="3">



            <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="3">



            <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="3">



            <Path.Data>



                <EllipseGeometry RadiusX="30" RadiusY="40" 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="3" Fill="Red">



            <Path.Data>



                <GeometryGroup FillRule="Nonzero">



                    <EllipseGeometry RadiusX="70" RadiusY="40" 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="3">



            <Path.Fill>



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



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



                    <GradientStop Color="Yellow" Offset="1"></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="3">



            <Path.Data>



                <PathGeometry>



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



                        <ArcSegment Point="100,130" Size="3,6" SweepDirection="Clockwise" RotationAngle="80"></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="3">



            <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#绘制一个销售统计图形