Sliverlight之2 适量绘图

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

准备:第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值" 弧度大小 (但这个数值的具体意义,我不清楚)

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

时间： 2024-10-11 10:51:02

Sliverlight之2 适量绘图的相关文章

SVG在WEB绘图中的使用

一.在WEB项目开发过程中,如果需要动画或者画图效果的功能,我们一般怎么去处理?传统的做法有GIF动画,HTML5组装动画,如果动画需要与操作人员交互功能,一般采用flash,flex还有sliverlight技术来实现.这些技术在使用和操作起来都显得过于复杂,现在我介绍另一种基于 WEB的绘图技术SVG. 二.什么是SVG: 可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是

自定义控件三部曲之绘图篇（十三）——Canvas与图层(一)

前言:猛然知道姥姥79了,我好怕,好想哭 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 在给大家讲解了paint的几个方法之后,我觉得有必要插一篇有关Canvas画布的知识,在开始paint之前,我们讲解了canvas绘图的几篇文章和cavas的save().store()的知识,这篇是对Canvas的一个系统的补充,前几篇文章链接如下:<自定义控件之绘图篇(一):概述及基

利用百度API画多边形，不能监测到百度绘图鼠标事件

var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8, //工具栏缩放比例 //工具栏显示数据 drawingMo

利用图形窗口分割法将极坐标方程：r=cos(θ/3)+1/9用四种绘图方式画在不同的窗口中

利用图形窗口分割法将极坐标方程:r=cos(θ/3)+1/9用四种绘图方式画在不同的窗口中. 解:MATLAB指令: theta=0:0.1:6*pi;rho=cos(theta/3)+1/9; >> polar(theta,rho) >> >> plot(theta,rho) >> semilogx(theta,rho) >> grid >> hist(rho,15) 结果分别如下图: 图1 图2 图3 图4

MFC利用双缓冲刷新绘图

在VC中进行绘图过程处理时,如果图形刷新很快, 经常出现图形闪烁的现象.利用先在内存绘制,然后 拷贝到屏幕的办法可以消除屏幕闪烁,具体的方法是先在内存 中创建一个与设备兼容的内存设备上下文,也就是开辟一快内 存区来作为显示区域,然后在这个内存区进行绘制图形.在绘制完成后利用 BitBlt函数把内存的图形直接拷贝到屏幕上即可. 具体想实现的是: 在Dialog客户区的一个图片控件(IDC_MAP)中绘制几个动态的点,如果不用双缓冲的技术,在屏幕刷新的时候会有闪烁的现象. CRect rect; C

php绘图（一）

绘图要单独有个php文件,图画好后,HTML里面引入 image src gd_info()查找gd库是否开启 //print_r(gd_info()); if(function_exists('gd_info')){ echo '<pre>'; print_r(gd_info()); }else{ echo '没有开启gd库'; } 如果没有开启进入phpini文件把 extension=php_gd2.dll 前面的分号可以去掉 imagecreate()创建画布 imagecolorll

Android自定义组件系列【12】——非UI线程绘图SurfaceView

一.SurfaceView的介绍 在前面我们已经会自定义View,使用canvas绘图,但是View的绘图机制存在一些缺陷. 1.View缺乏双缓冲机制. 2.程序必须重绘整个View上显示的图片,比较耗资源. 3.非UI线程无法更新View组件,所以会占用主线程资源,当需要在主线程中处理逻辑的时候会很慢. 在Android中为我们提供了一个SurfaceView来替代View实现绘制图形,一般在游戏绘图方面应用较广,所以如果是比较复杂的绘图建议使用SurfaceView. 二.SurfaceV

Matalab绘图与数学函数运算

目录 1．基本常识及命令 2．绘图命令fplot() 3．绘图命令plot() 4．绘图命令ezplot() 5．极限 6．求导与微分 1．基本常识及命令 数字量 format short 短格式,也是系统默认格式,显示小数点后4位的内容 format long 长格式,显示15位有效数字 format short e  短格式e方式,对非整数值都按e方式显示,显示5位有效数字 format long e 长格式e方式,对非整数值都按e方式显示,显示5位有效数字 常量pi为圆周率 字符量 chr

【原】在Matplotlib绘图过程中设置X轴的刻度和显示文本

使用Matplotlib进行绘图时,当x轴的数据太多的时候,就需要设置x轴的刻度和显示文本,关键代码如下: 绘图结果如下: