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

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

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

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

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

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

首先我们使用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.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>
</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, 0, 10));
danima.RepeatBehavior = RepeatBehavior.Forever;
sboard.Children.Add(danima);
LayoutRoot.Resources.Add("colorboard", sboard);
sboard.Begin();
#endregion
}
}
}

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


在线演示

转载于:https://www.cnblogs.com/chengxingliang/archive/2011/03/17/1987219.html

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

  1. Silverlight实用窍门系列:28.Silverlight制作随机分布雷达扫描点,模拟雷达扫描图之被扫描设备【附带源码实例】...

    实际项目中,我们模拟一个监控多台电脑的雷达扫描图效果.我们假设发现了很多台设备,这些设备具有CPU使用率这个属性,在雷达扫描的时候,如果CPU的值高于90则报警为红色. 本节实例建立在上一节的基础之上 ...

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

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

  3. Silverlight实用窍门系列:29.Silverlight碰撞测试、检测自定义控件碰撞,雷达扫描图之扫描雷达点状态【附带源码实例】...

    雷达扫描图中当雷达指针转动扫描到某一个点上的时候,判断这个点的CPU值是否已经超过60的警戒位置如果超过将此点设置为红色. 在Silverlight中我们的雷达指针是一直在做圆运动的,我们要随时检测雷 ...

  4. Silverlight实用窍门大集合+Silverlight 5 最全新特性【目录索引】

    在最近的几个月内整理出了Silverlight的一些相关的比较实用的功能讲解文章,并且随着Silverlight 5 beta版本的发布整理出的新特性系列文章,在这里做一个总的概括和索引,以方便大家观 ...

  5. Silverlight实用窍门系列:59.多个中心点联动多线的可拖动控件扩展为拓扑图

    在本系列的第17篇文章中"Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图.拓扑图基础) ",制作了基本的中心联动图标.有园友对此图的扩展不是很清晰 ...

  6. Silverlight实用窍门系列:71.Silverlight的Style

    此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章. 在Silverlight中的Style相当于 ...

  7. 【A_star二维路径规划】基于matlab A_star算法无人机二维路径规划(起终点障碍物可设置)【含Matlab源码 1321期】

    ⛄一.获取代码方式 获取代码方式1: 通过订阅紫极神光博客付费专栏,凭支付凭证,私信博主,可获得此代码. 获取代码方式2: 完整代码已上传我的资源:[A_star二维路径规划]基于matlab A_s ...

  8. Silverlight实用窍门系列:66.Silverlight的数据模板DataTemplate(二)获取数据模板控件...

    在Silverlight中我们使用了数据模板,在很多时候也需要获取到数据模板上的控件,并且进行改变.本文使用的实例数据源和上节相同,如需了解请下载源码查看. 当然在这里我们可以分为获取数据模板原始控件 ...

  9. Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...

    问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有 ...

最新文章

  1. 生猛!PDF 版本 万赞 Java 手册开放下载!
  2. 牛客java面试题总结版(二)
  3. freeRtos学习笔记 (8) 任务通知
  4. 【第二届】Erlang Fans交流会(补充事宜)
  5. leetcode面试题 02.08. 环路检测
  6. 北理计算机教案,北理工版三年级信息技术教案重点.docx
  7. oracle11g ogg报价,Oracle11g GoldenGate配置错误OGG-00868 Attaching to ASM server
  8. linux shell 脚本路径,linux获取shell脚本所在绝对路径操作介绍
  9. object.__new__
  10. 英文如何区分小括号和花括号
  11. 数据分析必备的5个工具,你用过几个?
  12. 前端开发和后端开发究竟有什么区别?详细介绍
  13. 公司邮箱怎么申请注册?电子邮箱注册教程来了
  14. 第一节 细胞是生命活动的基本单位
  15. php 国际标准时间_时区-如何在PHP中获得格林威治标准时间?
  16. 编译安装LNMP及报错解决
  17. 如何区分电梯卡为id卡ic卡_门禁卡ID卡和IC卡从外表怎么区分?
  18. 初识C语言,一起迈入编程世界的大门
  19. Linux监控利器nagios–NSCA被动监控
  20. 错题本——数据库系统工程师 2010

热门文章

  1. echart data放入数组_线性表(数组、链表、队列、栈)详细总结
  2. 方舟服务器在线人数查询软件,时隔4年,方舟生存进化稳居Steam在线人数前十,让他游戏都嫉妒?...
  3. html两行中间间距怎么去,css行之间的间距怎么调?
  4. ios 横向滚轮效果_iOS 可以纵向横向滑动的表格实现
  5. oracle 控制文件在哪里设置_oracle的controlfile控制文件
  6. Redis入门,Redis的安装
  7. httpClient中的三种超时时间设置
  8. 笔记:AIX系统/var/adm/wtmp大文件处理
  9. [视频]Silverlight for Windows Phone 7基本开发过程以及Push Button控件的使用
  10. 《SpringBoot揭秘:快速构建微服务体系》—第1章1.2节微服务因何而生