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

本节实例建立在上一节的基础之上,在本节中我们将向雷达扫描图中随机投放多台设备点,这些点拥有X坐标和Y坐标的属性以设置它在雷达扫描图中的位置,并且有一个闪动的动画效果。新建一个自定义控件命名为Device.xaml。

第一步计算设备的X、Y坐标设置CPU的信号值Value。在这里使用Random对象rom.Next(Math.Sin(45)*250)函数来随机得到设备的X坐标和Y坐标,暂时先以(0,0)点为中心坐标的250半径的圆圈范围内,这台设备在一个坐标系中还有可能出现X或者Y坐标出现负的情况,这个时候我们可以调用Random随机对象的随机小于2的数,如果为1的话就将随机得到的数设置为负。(注意:Random对象是使用系统时钟生成其种子值的,所以在全局范围内不能出现多个Random对象,否则的话你设置多个Random对象在同一个时间段内时得到的值相同的。解决方法是设置一个public static的全局随机对象,每次要使用的时候直接调用这个对象的Next()函数即可。)计算出了X、Y坐标之后此时的中心点是按照(0,0)点位置的坐标,在本项目中的中心点的位置是(300,300),所以X坐标加300,Y坐标加300。另外使用随机对象随机了100以内的数字赋值给本设备的CPU使用率信号值Value,下面请看代码:

public Device()
{
InitializeComponent();
InitData();
}

private double _X;
private double _Y;
private double _Value;
/// <summary>
/// X轴坐标
/// </summary>
public double X
{
get { return _X; }
set { _X = value; }
}

/// <summary>
/// Y轴坐标
/// </summary>
public double Y
{
get { return _Y; }
set { _Y = value; }
}
/// <summary>
/// 设备关键信号值
/// </summary>
public double Value
{
get { return _Value; }
set { _Value = value; }
}
public static Random rom = new Random();
public void InitData()
{
#region 随机将设备分布到雷达图中,模拟扫描到的机器
//模拟设备CPU值
Value = rom.Next(100);
//首先模拟设备,让设备随机分布在图中。
//模拟设备X坐标
X = rom.Next(200);
//模拟X坐标的符号,如果为0则为正,如果为1则为负;
int Xmark = rom.Next(2);
if (Xmark == 1)
{
X = -X;
}
X = X + 300.0;

//模拟设备Y坐标
Y = rom.Next(Convert.ToInt32(Math.Sin(45)*250));
//模拟Y坐标的符号,如果为0则为正,如果为1则为负;
int Ymark = rom.Next(2);
if (Ymark == 1)
{
Y = -Y;
}
Y = Y + 300.0;
Storyboard1.Begin();
#endregion
//tip显示当前值
devicetip.Content = "设备CPU占用率:" + Value + "--X:" + X + "--Y:" + Y;
}

第二步开始制作设备点的动画效果,在Device.xaml中我们添加两个一摸一样的矩形框(RectangleRed、Rectangleblue),这两个矩形框是通过CompositeTransform复合变形和渐变得到一个中心白色,外层渐变透明的小圆圈,我们控制RectangleRed小圆圈的ScaleX和,ScaleY在1秒内从0.3倍变到2倍,同时控制Rectangleblue小圆圈的ScaleX和,ScaleY在1秒内从2倍变到0.3倍。这样就得到了一个一直闪动的点,下面请看Xaml代码:

<UserControl.Resources>
<Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0.3" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="RectangleRed" />
<DoubleAnimation Duration="0:0:1" From="0.3" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="RectangleRed" />
<DoubleAnimation Duration="0:0:1" From="2" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Rectangleblue" />
<DoubleAnimation Duration="0:0:1" From="2" To="0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Rectangleblue" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" >
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" x:Name="RectangleRed" RadiusX="15" RadiusY="15" Width="15" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#30FFFFFF" Offset="0.276"/>
<GradientStop Color="Transparent" Offset="0.582"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" x:Name="Rectangleblue" RadiusX="15" RadiusY="15" Width="15" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#30FFFFFF" Offset="0.276"/>
<GradientStop Color="Transparent" Offset="0.582"/>
</RadialGradientBrush>
</Rectangle.Fill>
<ToolTipService.ToolTip>
<ToolTip x:Name="devicetip" />
</ToolTipService.ToolTip>
</Rectangle>
</Grid>

最后一步我们在雷达扫描图初始化的时候创建多个扫描点投放到图中:

#region 添加闪动的设备
for (int i = 0; i < 15; i++)
{
Device dev=new Device();
//设置X、Y坐标和Z层次
dev.SetValue(Canvas.TopProperty,dev.Y);
dev.SetValue(Canvas.LeftProperty,dev.X);
dev.SetValue(Canvas.ZIndexProperty, 600);
LayoutRoot.Children.Add(dev);
}
#endregion

本节使用VS2010+Silverlight4.0编写,点击 SLRandarAddPoint.rar 下载源码,非IE6.0用户可以点击下图观看演示:


在线演示

转载于:https://www.cnblogs.com/chengxingliang/archive/2011/03/19/1988266.html

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

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

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

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

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

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

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

  4. Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地

    在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silv ...

  5. Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地【附带实例源码】...

    在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silv ...

  6. Silverlight实用窍门系列:56.Silverlight中的Binding使用(一)【附带实例源码】

    本文将详细讲述Silverlight中Binding,包括Binding的属性和用法,Binding的数据流向. Binding:一个完整的Binding过程是让源对象中的某个属性值通过一定流向规则进 ...

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

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

  8. Silverlight实用窍门系列:58.Silverlight中的Binding使用(三)-数据集合绑定

      在本文中将以ListBox为例讲述在Silverlight中Binding数据集合. 在这里我们将实体集的绑定分为三类:    一.直接控件绑定.    二.DataTemplate模板绑定.   ...

  9. Silverlight实用窍门系列:61.Silverlight中的Trigger触发器,自定义翻页触发器

    在Silverlight应用程序和客户进行交互工作的时候可以不用写后台代码而通过Xaml代码来实现,在本文我们将学习了解Trigger触发器. Trigger触发器:引发动作的因素,比如鼠标点击.键盘 ...

最新文章

  1. 手把手教你使用Dygraphs可视化时间序列数据(附代码、链接)
  2. 建立一个Web项目及一些错误解决办法
  3. mybatis文档笔记
  4. Ngrx Store实现源代码的MemoizedSelector学习笔记
  5. pytorch错误解决 | 错误‘Widget Javascript not detected. It may not be installed or enabled properly.‘
  6. 替换后的最长重复字符
  7. --从输入URL到页面展示的详细过程
  8. Preferences偏好设置
  9. 怎样加入社区项目Karbor的Review?
  10. 自动手动安装CDH5
  11. 金蝶k3单据编码规则_金蝶K3ERP编码规则.doc
  12. R 18切割替换练习
  13. js直接打印pdf文件内容
  14. Soul网关源码学习(14)- hystrix,resilienc4j,sentinel 插件的使用和对比
  15. Android so文件函数加密
  16. 联合国 ITU 立项成功,DevOps 标准开启国际化模式!
  17. 如何用java的程序 计算验证条形码_java 案例之验证商品条形码
  18. 哪位能推荐一下广州比较好的IT公司啊,不尽感激
  19. matlab实验报告七,matlab实验报告(实验).doc
  20. Babylon.js 拾取坐标的方法

热门文章

  1. python脚本如何编译_如何编译用于FORTRAN的Python脚本?
  2. Spring Boot笔记-@PathVariable的使用
  3. Wireshark文档阅读笔记-User Datagram Protocol(UDP)
  4. Qt工作笔记-QLineEdit用正则限制文本框的输入内容+正则表达式语法
  5. C++工作笔记-模版中class更新为typename
  6. Qt学习笔记-Qt程序切换皮肤
  7. 江苏省有JAVA技能大赛,江苏省职业学校技能大赛组委会
  8. rust实现wss访问_Rust的所有权,第2部分
  9. java 秒变成时间_使用Quarkus开发Java云原生应用
  10. python怎么创建变量_Python之变量的创建过程