Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】-阿里云开发者社区

开发者社区> 橘子红了呐> 正文

Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】

简介:
+关注继续查看

 在现实生活中的雷达运行扫描到物体的某一些属性(比如:速度,频率)超过安全范围值将会报警。在实际的某一些项目中(比如监控系统),我们也想制作一个雷达扫描图来模拟扫描各种设备那么应该如何做呢?

        我们将各种设备作为雷达需要扫描到的点,然后在每次扫描的时候扫描这些点,如果指针扫描碰撞到这些点的时候,会触发一个碰撞实际,以检测设备的项属性是否超过正常范围值。如果超过则让其闪亮不同的颜色。

        本节将讲诉如何制作一个雷达扫描图的基本框架如下。

              第一步制作一个雷达图的背景

              第二步雷达图的指针围绕中心点不停旋转

              第三步为了让雷达图的效果看起来更美观一些,我们应该让指针后面绘画一个倾斜的拖影效果

        首先我们使用PhotoShop绘制一个雷达图的背景图如下:

        2011031716211893.jpg

        接着我们使用DoubleAnimation动画和RotateTransform旋转对象让指针旋转起来,添加一个白色的指针,并且设置白色指针的旋转中心点RenderTransformOrigin="0.0,0.0",现在我们先看XAML代码如下:

<Canvas Margin="300 300 0 0" Name="layRoot">
<Line X1="0" Y1="0" X2="252" Y2="0" StrokeThickness="1" RenderTransformOrigin="0.0,0.0" Stroke="#ffffffff" Fill="#ffffffff"></Line>
</Canvas>
         为这个白色的指针所属的Canvas设置一个RotateTransform二维坐标的旋转对象,其参数Angle为角度。然后添加一个DoubleAnimation对象来让这个角度在10秒内从360度变化到0度即可,操作的后台代码如下:
复制代码
public void AddCanvasTransform()
{
#region 为Canvas添加一个二维 x-y 坐标系内围绕指定点顺时针旋转对象
RotateTransform rTransform 
= new RotateTransform();
//设置旋转的初始角度为360度
rTransform.Angle = 360;
//设置旋转对象的名称属性为rTrans,让下面的DoubleAnimation使用
rTransform.SetValue(NameProperty, "rTrans");
//将此旋转对象给Canvas
this.layRoot.RenderTransform = rTransform;
#endregion

#region 设置动画板且让Canvas对象内的物品以某点位圆心360度旋转下去
//设置一个DoubleAnimation动画来翻转这个旋转对象。
Storyboard sboard = new Storyboard();
DoubleAnimation danima 
= new DoubleAnimation();//设置rectangle1矩形控件的透明度的Double类型数字变化
//设置DoubleAnimation动画的作用对象名称和作用对象属性
danima.SetValue(Storyboard.TargetNameProperty, "rTrans");
danima.SetValue(Storyboard.TargetPropertyProperty, 
new PropertyPath("RotateTransform.Angle"));
//在10秒的时间内让动画作用的角度属性从360到0,且永远循环下去
danima.From = 360; danima.To = 0;
danima.Duration 
= new Duration(new TimeSpan(0010));
danima.RepeatBehavior 
= RepeatBehavior.Forever;
sboard.Children.Add(danima);
LayoutRoot.Resources.Add(
"colorboard", sboard);
sboard.Begin();
#endregion
}
复制代码
        最后为指针添加一个拖影效果,让指针在旋转的时候有一个拖影,使其更为美观。在这里我们使用一个矩形控件,让其产生一个渐变效果(采用LinearGradientBrush渐变对象),再旋转一下它的角度即可完成。这个矩形控件也放在Canvas对象里面那么他就会跟着白色雷达指针一起旋转,其XAML代码如下:
复制代码
<Rectangle x:Name="rectangle" Height="60" Width="253" RenderTransformOrigin="0.0,0.0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="39.2"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#8Dffffff"/>
<GradientStop Color="#00ffffff" Offset="0.483"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
复制代码

        完整的MainPage.xaml代码如下:

ContractedBlock.gifMainPage.xaml

        完整的MainPage.xaml.cs文件代码如下:

ContractedBlock.gifMainPage.xaml.cs

        本实例采用VS2010+Silverlight4.0编写,如需源码 SLRandar.rar 点击下载。本实例也可以点击一下图片预览效果:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10061 0
Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)
原文:Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)   说到对象的旋转,或许就会联想到对象角度的概念。
772 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13874 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11888 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7360 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4498 0
3404
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载