概述

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文将简单介绍Silverlight中的基本图形,主要有Line、Ellipse、Rectangle、Path、Polygon、Polyline六种,它们之间的继承关系如下所示:

在Silverlight中,所有的图形几乎都具有如下几个重要的属性:

Stroke:对边框线填充

StrokeThickness:边框线的宽度

Fill:对图形进行填充

Line

Line顾名思义,在两点之间画出一条直线,需要指定起始点(X1、Y1)和终结点(X2、Y2)的坐标。如下面的例子:

<Canvas Background="#CDFCAE">
<Line Canvas.Top="20" Canvas.Left="20"
X1="20" Y1="20" X2="400" Y2="20"
Stroke="#FF9900" StrokeThickness="4">
</Line> <Line Canvas.Top="40" Canvas.Left="20"
X1="20" Y1="40" X2="200" Y2="180"
Stroke="#0099FF" StrokeThickness="5">
</Line> <Line Canvas.Top="20" Canvas.Left="240"
X1="220" Y1="20" X2="220" Y2="200"
StrokeThickness="6">
<Line.Stroke>
<LinearGradientBrush StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0.0" />
<GradientStop Color="#307801" Offset="1.0" />
</LinearGradientBrush>
</Line.Stroke>
</Line>
</Canvas>

运行后如下所示,分别画出三条直线:

Ellipse

Ellipse即椭圆形,如果设置长和高相等,画出来将是圆形,主要的属性还是前面说的那三个。如下面的示例:

<Canvas Background="#CDFCAE">
<Ellipse Canvas.Top="20" Canvas.Left="40"
Width="160" Height="80" Fill="#FF9900"
Stroke="Black" StrokeThickness="3">
</Ellipse> <Ellipse Canvas.Top="20" Canvas.Left="260"
Width="180" Height="100">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#0099FF" Offset="0" />
<GradientStop Color="#FF0000" Offset="0.25" />
<GradientStop Color="#FCF903" Offset="0.75" />
<GradientStop Color="#3E9B01" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse> <Ellipse Canvas.Top="120" Canvas.Left="160"
Width="100" Height="100" Fill="#FF9900"
Stroke="#000000" StrokeThickness="2">
</Ellipse>
</Canvas>

运行后如下所示,显示三个椭圆形:

Rectangle

Rectangle看名称就知道是矩形,设置长度和高度相等则为正方形,其主要的属性还是开始我们提到的那三个,同时还可以通过RadiusX和RadiusY来设置它的圆角效果,看下面的例子:

<Canvas Background="#CDFCAE">
<Rectangle Canvas.Top="20" Canvas.Left="40"
Width="160" Height="80" Fill="#FF9900"
Stroke="Black" StrokeThickness="3">
</Rectangle> <Rectangle Canvas.Top="20" Canvas.Left="260"
Width="180" Height="100">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#0099FF" Offset="0" />
<GradientStop Color="#FF0000" Offset="0.25" />
<GradientStop Color="#FCF903" Offset="0.75" />
<GradientStop Color="#3E9B01" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle> <Rectangle Canvas.Top="120" Canvas.Left="120"
Width="100" Height="100"
Stroke="#000000" StrokeThickness="2" RadiusX="15" RadiusY="15">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0" />
<GradientStop Color="#FF9900" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>

运行后如下所示,其中有两个加上了渐变效果:

Path

相比较前面三个简单的图形来说,Path相对来说比较复杂,它用来画出一系列的相连的圆弧或者线条,可以称之为“轨迹”,使用它可以画出任意复杂的形状,主要通过Data属性来展现。一个简单的Path声明示例如下:

<Canvas Background="#CDFCAE">
<Path Stroke="Orange" StrokeThickness="3"
Data="M 10,40 L 300,40 V 100 H 240 S 300,240 400,175">
</Path>
</Canvas>

运行后如下所示:

这里对Data做一下简单的解释,Silverlight提供了一种称之为“迷你语言”的属性句法,来描述如何画出轨迹形状,包括M(移动命令,起始点)、L(直线,结束点)、H(水平线)、V(垂直线)、C(三次贝塞尔曲线)、Q(两次贝塞尔曲线)、A(椭圆弧曲线)、Z(结束命令)等。更为详细的使用大家可以参考SDK。

Polygon

Polygon用来画多边形,需要用Points属性来指定几个特定的点,至于画几边形,要看你定义几个点了(要看救生员啥时救他—宋丹丹语录),它会自动闭合。

<Canvas Background="#CDFCAE">
<Polygon Canvas.Left="50" Canvas.Top="50"
Points="50,20 300,20 300,160 200,160"
Stroke="Green" StrokeThickness="3" Fill="Orange">
</Polygon>
</Canvas>

每一个点之间用空格分开,运行后如下所示:

Polyline

Polyline用来画多边线,与上面的Polygon不同的地方是它不一定要是闭合的,同样用Points属性来指定几个特定的点,我们定义一个跟上面的示例一样的Polyline:

<Canvas Background="#CDFCAE">
<Polyline Canvas.Left="50" Canvas.Top="50"
Points="50,20 300,20 300,160 200,160"
Stroke="Green" StrokeThickness="3" Fill="Orange">
</Polyline>
</Canvas>

运行后可以看到,有一条边未闭合:

结束语

本文内容比较简单,介绍了Silverlight中的一些基本的图形。

作者:TerryLee
出处:http://terrylee.cnblogs.com 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 
 
 
===============================================================
 
@lings 
继续顶自己的贴 
哈哈,终于搞定 A 命令,开心啊 
同大家分享下,用 A 命令画圆弧的格式如下 
Data="M 200 200 A 100 100 0 1 1 200 201"

startPoint :200 200 (起始坐标点) 
size :100 100 ( 圆弧 X,Y 轴长度) 
rotationAngle :0 (这个不明,双精度类型[double]) 
isLargeArcFlag :1 (也不明,1/0, 布尔值[0,1]) 
sweepDirectionFlag :1 (逆/顺时针画圆弧,布尔值[0,1]) 
endPoint:200 201 (结束坐标点)

如果起点坐标和结束坐标一致,那么这圆弧是看不见的

 
再次继续顶自己的帖子 
今天自己写了一个绘制圆弧轨迹的类 
是根据圆的标准方程式得来的: 
(x-A)(x-A)+(y-B)(y-B)= R*R 
[A,B] 是圆心的横,纵坐标,[r] 是圆半径 
(全部采用双精度类型 [double],提高画图精度) 
得出圆弧 [x] 坐标 与 [y] 坐标 的关系: 
// 分解 (x - A)(x - A) 
double x_result = (x * x) - (2 * x * A) + (A * A); 
// 分解方程式等式 
double right = (R * R) - x_result; 
// 开平方计算 
y = Math.Sqrt(right) + B; 
(绘制动作) 
得出[x]与[y]的关系后,我把绘制动作放在时间控件的 Tick()事件里 
设置一个控件的相对左边距 =x;相对右边距 = y; 
这样随着时间的推移,该控件就会走出近似于圆弧的轨迹(点到点的画法) 
但这个方法得到还只是半圆弧 
(关系式改为: x = Math.Sqrt(right)+A 就能得到另一半的圆弧) 
而且并不是真正绘制(只是描述动作轨迹而已)。 
我测试的时候是用 Ellipse 画一个同圆心坐标,同半径的背景 
看控件是否在该背景的圆弧上运动 。 
正圆形画出来了,那椭圆形自然不在话下了 
画出椭圆形了,我的天体运行轨道的 Demo 也迎刃而解了 
Thanks for TerryLee's! 
Your course is very inserting! 
===================================

一步一步学Silverlight 2系列(26):基本图形的更多相关文章

  1. 一步一步学Silverlight 2系列文章

    概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...

  2. 一步一步学Silverlight 2系列(32):图形图像综合实例—“功夫之王”剧照播放

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. 一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 一步一步学Silverlight 2系列(30):使用Transform实现更炫的效果(下)

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. 一步一步学Silverlight 2系列(29):使用Transform实现更炫的效果(上)

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. 一步一步学Silverlight 2系列(28):图片处理

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  7. 一步一步学Silverlight 2系列(27):使用Brush进行填充

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  8. 一步一步学Silverlight 2系列(25):综合实例之Live Search

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. 一步一步学Silverlight 2系列(24):与浏览器交互相关辅助方法

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

随机推荐

  1. LeetCode OJ--Implement strStr()

    http://oj.leetcode.com/problems/implement-strstr/ 判断一个串是否为另一个串的子串 比较简单的方法,复杂度为O(m*n),另外还可以用KMP时间复杂度为 ...

  2. 使用Crypto对数据进行加密解密

    注释都在代码里: 先撸客户端: from Crypto.Cipher import AES import base64,requests class Message(object): def __in ...

  3. Android-一张图理解MVP的用法

    M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里

  4. 【Java TCP/IP Socket】基于NIO的TCP通信(含代码)

    NIO主要原理及使用 NIO采取通道(Channel)和缓冲区(Buffer)来传输和保存数据,它是非阻塞式的I/O,即在等待连接.读写数据(这些都是在一线程以客户端的程序中会阻塞线程的操作)的时候, ...

  5. 社会信息化环境下的IT新战略

    我们现在所处的信息化环境正在发生改变,技术已经成为影响组织的最重要的外部力量,传统的正金字塔的结构被移动互联网深深改变:员工能够更加自由的获取信息,变成更多的信息链接,这种链接不光连接人和组织,还连接 ...

  6. Tar压缩文件

    [root@test /root]# tar [-zxcvfpP] filename   [root@test /root]# tar -N 'yyyy/mm/dd' /path -zcvf targ ...

  7. 出现异常时直接把e输出比输出e.getMessage()好得多

    之前研究态度不好,出异常时处理草草了事,今天出现问题才觉得该认真对待每个分支.

  8. SolidEdge 如何绘制局部视图 局部放大图

    创建局部视图(局部放大图),先选择要创建局部放大图的视图,然后绘制一个小圆,然后绘制一个大圆即可.   如果要绘制不规则形状的局部放大图,则点击了局部放大图之后,点击绘制草图的按钮   随后可以用相切 ...

  9. SQL模糊查询碰到空值怎么办?

    作者:iamlaosong SQL查询语句用%来做模糊查询.程序中一般要求用户输入部分信息,依据这个信息进行模糊查询. 比如用户输入340104,以下这条语句就是查询昨天客户代码为340104开头的全 ...

  10. java zip压缩文件和文件夹

    public class FileUtil { /** * 压缩文件-File * @param out zip流 * @param srcFiles 要压缩的文件 * @param path 相对路 ...