一步一步学Silverlight 2系列（26）：基本图形

最新推荐文章于 2020-03-24 21:38:32 发布
最新推荐文章于 2020-03-24 21:38:32 发布
阅读量150 收藏
点赞数
文章标签： json runtime c#
原文链接：http://www.cnblogs.com/hdjjun/archive/2008/12/24/1361456.html
版权
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。 http://terrylee.blog.51cto.com/342737/67276

概述

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.blog.51cto.com/342737/67276

转载于:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361456.html

weixin_34250434
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一步一步学Silverlight 2系列
12-07
一步一步学Silverlight 2系列
SilverLight中的基本图形（转）
weixin_34258782的博客
01-19 90
原文：http://www.cnblogs.com/chukaren/archive/2010/01/15/1648902.html   1. 先写一个页面文件 test.html &lt;html&gt; &lt;head&gt; &lt;title&gt;My SilverLight Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt;...
将字符串中的每个字母替换为字母后面的字母（即c变成d，z变成a）。 然后在这个新字符串（a，e，i，o，u）中大写每个元音，最后返回这个修改过的字符串。
phper的博客
02-26 6661
 今天再Coderbyte的网站上看到的几个笔试题，记录一下 1.Have the function LetterChanges(str) take the str parameter being passed and modify it using the following algorithm. Replace every letter in the string with the lett...
输入一行电报文字，将字母变成其下一字母（如’a’变成’b’……’z’变成’ａ’其它字符不变）
qq_39822872的博客
10-31 2859
import java.util.Scanner; public class Main { public static void main(String[] age) { Scanner sc = new Scanner(System.in); String n = sc.nextLine(); print(n); } public static void print(String x) { { ...
电文密码
zhangxue1232的博客
03-13 921
#include<stdio.h> int main() { int j,n; char ch[80]; gets(ch); printf("%s\n",ch); for(j=0;ch[j]!='\0';j++) { if(ch[j]>='A'&&ch[j]<='Z') ...
一步一步学Silverlight_2系列
08-17
Silverlight 2系列（26）：基本图形 Silverlight 2系列（25）：综合实例之Live Search Silverlight 2系列（24）：与浏览器交互相关辅助方法 Silverlight 2系列（23）：Silverlight与HTML混合之无窗口模式 ...
第一个字母变成第26个字母，第i个字母变成第（26-i+1）个字母——C语言
我是张跑跑
07-23 7138
1 概述 第一个字母变成第26个字母，第i个字母变成第（26-i+1）个字母。 2 解法 //C程序设计第五版（谭浩强） //章节：第六章 利用数组处理批量数据 //习题6.12 第一个字母变成26个字母，第i个字母变成第（26-i+1）个字母。 #include <stdio.h> int main() { char paw[100]; int i; printf...
基于silverlight的流程实例图
明月清风
09-24 2852
使用silverlight的开发的流程引擎，实例监控图实例，希望尽可能直观的反映出实例的运行状态说明：线条：绿色表示已执行线路，蓝色表示未执行线路，红色圈圈的数字则表示线路执行的数字，如果超过1次就会显示，表示有退回操作，退回次数即为执行次数减1节点：右上角图标：表示挂起表示已完成表示终止表示进行中表示超时，鼠标放到图标上去会提示更多信息；无图标则表示未启动  通过这样一个流程实例图是不是很清晰的
有一行电文，已按下面规律译成密码： A →Z B→Y C→X …… a→z b→y c→x …… 即第一个字母变成第26个字母，第i个字母变成第（26-i+1）个字母，非字母字
热门推荐
weixin_45946213的博客
02-18 2万+
有一行电文，已按下面规律译成密码： A →Z B→Y C→X …… a→z b→y c→x …… 即第一个字母变成第26个字母，第i个字母变成第（26-i+1）个字母，非字母字符不变。 要求编程序将密码译回原文，并输出密码和原文。 第一种 利用循环分别记录两组大写和小写符号，在用位数差赋值 #include <stdio.h> int main() { cha...
电文密码问题
jijijun的博客
03-24 1092
题目：有一行电文，已按照下面规律译成密码： A-Z B-Y C-X a-z b-y c-x 即第一个字母变成第26个字母，第i个字母变成第(26-i+1)个字母。非字母字符不变。要求编译程序将密码译回原文，并输出密码和原文。 for();后面有分号就代表着这是一个普通的语句 字符数组不可以直接进行运算，注意哦 思路： ①：分为三个数组，一个是被赋值的数组，一个是大写字母数组和小写字母数组 ②：进行...
第26天
Huaerge的专栏
03-29 562
外面还在下雨，本来不想来加班的，但是这个月3个周末都有事，都没加班，时间不够了，况且确实事情没做完。      昨天下了一本书《程序员的职业规划》，看了几页，写得很好，摘录了几句：     “简单来讲，人生的整个旅途，我们的目标就是让自己的日子过得好过点，让家人的日子也好过点，其次才是想方设法创造出一番足以让后世人羡慕的事业。”    “要想在企业中得到管理层的关注和获取有价值的任务，你必须
从键盘输入一批字符（以@结束），按要求加密并输出。加密规则为：1.所有字母均转化为小写；2.若是a到y，则转化为下一个字母；3.若是z，则转化为a；4.其他字符保持不变
sssara的博客
11-29 1万+
#include void main() {     char ch;  printf("输出一批字符（以@结束）: ");     while ((ch=getchar())!='@')  {   if(ch>='a'&&ch    ch=ch+1;   else if (ch>='A'&&ch    ch=ch+32+1;   else if (ch=='z'||ch=
第26周三
weixin_33858485的博客
06-25 106
上午配合同事调试录像结果到下午又出问题到最后今天还是没有结论，越来越发现整个项目的沟通成本远远超乎自己的想象，冷静下来后想象或许这是我及身边同事沟通能力的新的挑战，尤其是我要想各种方法促进项目的进展。下午调试了其中一个应用模块问题，最终发现是因为jar包冲突导致，先停止tomcat服务，再把原安装包中目录lib下jar包删掉，再从安装包中把lib拷贝到这个目录下后再重新启动tomcat服务后解决...
经典爱情26个letters！！！
weixin_34195142的博客
03-09 117
本文来自：[url]http://bbs.51cto.com/thread-77920-1-1.html[/url] I hope that all of you can memorize these 26 words ,It should be? ?just ok.Fighting!!!A-accept（接受） “世上没有十全十美的人”。记着，你爱他，就必须接受他的一切，...
整型与数组间转换函数 加密、解密函数
weixin_43664746的博客
11-24 196
#include &lt;stdio.h&gt; int Int_To_Array(int , int *, int);//整型--数组 int Array_To_Int(int *, int);//数组--整型 int JiaMi(int, int *);//加密 void JieMi(int, int *);//解密 int main() { int array1[8] = {0...
变为下一个字母
m__xiaosheng_的博客
12-04 1500
#include int main() {   char ch1,ch2;   while(scanf("%c",&ch1)!=EOF)   {    if((ch1>='A'&&ch1='a'&&ch1    {     ch2=ch1+1;     printf("%c",ch2);    }    else if(ch1=='Z'||ch1=='z')    {
按照A->Z，B->Y，C->X，a->z，b->y，c->x，................规律译成密码
wanrxpjing的博客
07-24 2949
按照A-&gt;Z，B-&gt;Y，C-&gt;X，a-&gt;z，b-&gt;y，c-&gt;x，................规律译成密码，即第一个字母变成第26个字母，第i个字母变成第（26-i+1）个字母，非字母字符不变。以下是自己编写的译码程序。要求编程序将密码译回原文，并输出密码和原文。 #include &lt;stdio.h&gt; int main() {  char a[1...
Silverlight 运行原理 解析综合版（二）
weixin_33943836的博客
10-09 125
几种RIA技术 Silverlight是一种RIA(Rich Internet Applicaation，富互联网应用）之一，在RIA的历史上比较流行的曾经有Java Applet和Flash及现在的Silverlight，HTML5将来会直接支持多媒体，如果它取得了成功，或许RIA会成为一个历史名词，但是“将来”到底有多远，谁也不知道。就像喊了多年的“C/C++必死”、“IE6已亡”的口号一样，...
silverlight安装包
最新发布
12-08
根据提供的引用内容，Silverlight安装包包含了Silverlight运行时和应用程序。以下是两种安装Silverlight的方法： 1.手动安装： a.下载Silverlight安装程序（silverlight.exe）。 b.双击运行安装程序，按照提示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值