Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of WPF how to achieve radar scan map drawing, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this WPF article on how to achieve radar scan map drawing. Let's take a look at it.

Production idea

Draw a circle (or wheel)

Draw split Lin

Draw scan range

Add scan points

Concrete realization

First of all, we use custom controls. You can use vs to add automatically, or you can create classes manually. Pay attention to create the file path of Themes/Generic.xaml when you create it manually.

The control inherits from itemscontrol and is named Radar.

Our first step is to think about how to achieve a circle or wheel, especially an equidistant wheel.

We can use the simple WPF control of itemscontrol, which can be easily created by customizing ItemTemplate.

Using Ellipse is the easiest thing to do because you want to display circles.

And because we want to display concentric circles in the same area, we change the panel to Grid and use the superposition property to construct concentric circles.

Since we use itemscontrol to carry the wheel, why not just make the ring customizable?

So, we construct a collection dependency property.

/ public FreezableCollection RadarCircle {get {return (FreezableCollection) GetValue (RadarCircleProperty);} set {SetValue (RadarCircleProperty, value) } / public static readonly DependencyProperty RadarCircleProperty = DependencyProperty.Register ("RadarCircle", typeof (FreezableCollection), typeof (Radar), new PropertyMetadata (new PropertyChangedCallback (OnRadarCircelValueChanged)

You can refer to the source code for the corresponding generic class. The basic element is the parameter binding ellipse.

Wow, the image will come out.

In the same way, we create a split line in the same process.

For the cutting algorithm of the split line, we can use the coordinates of the points on the circle to pass through (rcos,rsin) = "(xPowery), that is, polar coordinates.

About this part of the code is placed in the layout block ArrangeOverride, can also be placed in OnReader.

The following is the partial code. For more information, please refer to the source code.

Var angle = 180.0 / 6; circlesize = size.Height > size.Width? Size.Width: size.Height; RadarFillWidth = circlesize; var midx = circlesize / 2.0; var midy = circlesize / 2.0; circlesize = circlesize / 2; RadarRadius = circlesize; / / defaults to 6 for (int I = 0; I

< 6; i++) { var baseangel = angle * i; var l1 = new Point(midx + circlesize * Math.Cos(Rad(baseangel)), midy - circlesize * Math.Sin(Rad(baseangel))); var half = baseangel + 180; var l2 = new Point(midx + circlesize * Math.Cos(Rad(half)), midy - circlesize * Math.Sin(Rad(half))); RadarLineSize radarLine = new RadarLineSize(); radarLine.Start = l1; radarLine.End = l2; radarLine.Color = RadarLineColor; RadarLine.Add(radarLine); } return size; 依赖属性 /// /// 雷达图的分割线,目前固定为6,可以自行修改 /// public FreezableCollection RadarLine { get { return (FreezableCollection)GetValue(RadarLineProperty); } set { SetValue(RadarLineProperty, value); } } /// /// 雷达图的分割线,目前固定为6,可以自行修改 /// public static readonly DependencyProperty RadarLineProperty = DependencyProperty.Register("RadarLine", typeof(FreezableCollection), typeof(Radar)); xaml代码 下一步就是扇形扫描了。 我们使用一个完整的圆，将其内部颜色填充为线性刷就可以得到一个效果不错的扫描了。 /// /// 雷达扫描的颜色 /// public Brush RadarColor { get { return (Brush)GetValue(RadarColorProperty); } set { SetValue(RadarColorProperty, value); } } /// /// 雷达扫描的颜色 /// public static readonly DependencyProperty RadarColorProperty = DependencyProperty.Register("RadarColor", typeof(Brush), typeof(Radar)); 为了更好的定义这个圆，我们将radar的template使用grid面板等距分成四个区域(其实没啥用，主要是为了扇形扫描时做圆心选择的line，也可以不分成四个)。 在考虑动画，只需要做圆形360的选择就可以了。为了更好应用，我们创一个paly的依赖属性来播放动画。 /// /// 是否播放动画 /// public bool Play { get { return (bool)GetValue(PlayProperty); } set { SetValue(PlayProperty, value); } } /// /// 是否播放动画 /// public static readonly DependencyProperty PlayProperty = DependencyProperty.Register("Play", typeof(bool), typeof(Radar), new PropertyMetadata(false)); xaml代码（ 部分） 效果 那么剩下就是扫描点的操作。 因为我们的控件是继承ItemsControl，我们到现在还没有利用ItemsSource这个属性。 所以我们要制作一个子控件来呈现扫描点。 由于子控件较为简单，只不过是一个圆而已。我们就让子控件继承Control就好了。 一切从简，我们不弄布局这一套了，直接在父控件中使用Canvas面板，子控件增加属性Left，Top这两个依赖属性。 重点说一下，子控件中存在一个linscar的方法，是为了将点如果在雷达外侧时，按照同角度缩放到最外层的方法。就是通过半径重新计算一边极坐标。 /// /// 线性缩放 /// /// 半径 internal void LineScar(double size) { var midpoint = new Vector(size, size); var vp = new Vector(Left, Top); var sub = vp - midpoint; var angle = Vector.AngleBetween(sub, new Vector(size, 1)); angle = angle >

0? Angle: angle + 360; / / distance is greater than the radius. Redraw if (sub.Length > = size) {Top = size-size * Math.Sin (Rad (angle))-Width / 2; Left = size + size * Math.Cos (Rad (angle))-Width / 2;}}

So how do you put it in the parent item?

We just said that the parent uses canvas drawing, so we modify the panel properties of itempanel in radar. The following code exists in the parent xaml.

The sub-item code is as follows, which will be posted less.

Xaml code

RadarItem

/ Radar subkey / public class RadarItem: Control {static RadarItem () {DefaultStyleKeyProperty.OverrideMetadata (typeof (RadarItem), new FrameworkPropertyMetadata (typeof (RadarItem) } public RadarItem () {} / Radian / / Angle / Radian system double Rad (doubleval) {return val * Math.PI / 180 } / / Linear scaling / Radius internal void LineScar (double size) {var midpoint = new Vector (size, size); var vp = new Vector (Left, Top); var sub = vp-midpoint; var angle = Vector.AngleBetween (sub, new Vector (size, 1)) Angle = angle > 0? Angle: angle + 360; / / the distance is greater than the radius. Redraw if (sub.Length > = size) {Top = size-size * Math.Sin (Rad (angle))-Width / 2; Left = size + size * Math.Cos (Rad (angle))-Width / 2 }} / Top distance, draw / public double Top {get {return (double) GetValue (TopProperty) with canvas.top;} set {SetValue (TopProperty, value) }} / Top distance, draw / public static readonly DependencyProperty TopProperty = DependencyProperty.Register with canvas.top ("Top", typeof (double), typeof (RadarItem), new PropertyMetadata (0.0)) / left distance for canvas.left drawing / public double Left {get {return (double) GetValue (LeftProperty);} set {SetValue (LeftProperty, value) } / left distance for canvas.left drawing / public static readonly DependencyProperty LeftProperty = DependencyProperty.Register ("Left", typeof (double), typeof (RadarItem), new PropertyMetadata (0.0)) / fill color / public Brush Color {get {return (Brush) GetValue (ColorProperty);} set {SetValue (ColorProperty, value) } / public static readonly DependencyProperty ColorProperty = DependencyProperty.Register ("Color", typeof (Brush), typeof (RadarItem), new PropertyMetadata (new SolidColorBrush (Colors.Red);}

So we got a radar scan.

This is the end of the article on "how to draw radar scans with WPF". Thank you for your reading. I believe that everyone has a certain understanding of the knowledge of "how to achieve radar scan drawing by WPF". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.