27.Silverlight二维旋转+平面渐变+动画，模拟雷达扫描图之基本框架

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

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

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

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

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

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

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

接着我们使用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(0, 0, 10)); 
  
  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代码如下：

MainPage.xaml

 
 
<UserControl x:Class="SLRandar.MainPage" 
  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  
  mc:Ignorable="d" 
  
  d:DesignHeight="600" d:DesignWidth="600"> 
  
   
  
  <Grid x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top"> 
  
  <Image HorizontalAlignment="Left" Source="Randar.png" Width="600" Height="600" Name="image1" Stretch="Fill" VerticalAlignment="Top" /> 
  
  <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> 
  
  <Rectangle x:Name="rectangle" Height="60" Width="253" RenderTransformOrigin="0.0,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> 
  
  </Canvas> 
  
  </Grid> 
  
   
  
  </UserControl>

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

MainPage.xaml.cs

   
   
using System; 
    
    using System.Collections.Generic; 
    
    using System.Linq; 
    
    using System.Net; 
    
    using System.Windows; 
    
    using System.Windows.Controls; 
    
    using System.Windows.Documents; 
    
    using System.Windows.Input; 
    
    using System.Windows.Media; 
    
    using System.Windows.Media.Animation; 
    
    using System.Windows.Shapes; 
    
     
    
    namespace SLRandar 
    
    { 
    
    public partial class MainPage : UserControl 
    
    { 
    
    public MainPage() 
    
    { 
    
    InitializeComponent(); 
    
     
    
    AddCanvasTransform(); 
    
    } 
    
    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(0, 10)); 
    
    danima.RepeatBehavior = RepeatBehavior.Forever; 
    
    sboard.Children.Add(danima); 
    
    LayoutRoot.Resources.Add("colorboard", sboard); 
    
    sboard.Begin(); 
    
    #endregion 
    
    } 
    
    } 
    
    }

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

27.Silverlight二维旋转+平面渐变+动画，模拟雷达扫描图之基本框架

相关推荐