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