概述

? ? ?有時候我們的程序界面中需要顯示一些簡單的示意圖，一般我們有原圖的話直接嵌入我們程序就可以，但有時候我們沒有原圖，這時候我們不妨用代碼自己畫出來.

今天小編要給大家展示的是這樣一副圖片：

接下來，我就用代碼純手動給畫出來。

繪制說明

? ? ①??首先繪制一個圓：

var elip = new Ellipse();elip.Height = d;elip.Width = d;elip.Stroke = stroke;elip.StrokeThickness = 1;Canvas.SetTop(elip, marge);Canvas.SetLeft(elip, marge);this.canvas.Children.Add(elip);

這里Stroke擁戴設置線的顏色，StrokeThickness設置線寬，Height 圓的高度，Width設置寬度，SetTop用來設置圓相對于畫布的頂部距離，SetLeft用來設置圓相對于畫布左邊的距離， this.canvas.Children.Add(elip)用來把創建的控件添加到畫布中.

但是我們今天要畫的是一個帶缺口的圓，那這個就不能滿足要求了，那看第二步；

②畫一個缺口圓：

var a1 = 95 * Math.PI / 180;var a2 = 445 * Math.PI / 180;var r = d / 2;double startX = r + Math.Cos(a1) * r;double startY = r + Math.Sin(a1) * r;double endX = r + Math.Cos(a2) * r;double endY = r + Math.Sin(a2) * r;bool largeArc = Math.Abs(a2 - a1) >= Math.PI;//角度之間的差異和PI比較bool sweep = (a1 < a2);//角度比較string path = String.Format(System.Globalization.CultureInfo.InvariantCulture,"M {0},{1} A {2},{3} 0 {4} {5} {6},{7}", startX, startY, r, r,largeArc ? 1 : 0, sweep ? 1 : 0, endX, endY);var pathe = uIElement as Path;var converter = TypeDescriptor.GetConverter(typeof(Geometry));pathe.Data = (Geometry)(converter.ConvertFrom(path));pathe.Stroke = Brushes.Black;//顏色pathe.StrokeThickness = 1;//線粗pathe.Width = d+20;pathe.Height = d+20;pathe.SetTop(marge);pathe.SetLeft(marge);this.canvas.Children.Add(pathe);

這里圓角度是順時針的，和我示意圖的角度反向正好相反，r是圓的半徑，a1是起始弧度，a2是終止弧度，然后計算出來起止點和終止點以后，構建path，注意path是不可以直接給path.Data的，需要轉化一下。這樣缺口圓就畫好了.

③繪制帶箭頭的線：

首先繪制直線：主要就是new一個實例，設置起始和終止點，線型線寬等

var line = uIElement as Line;line.X1 = p1.X;line.Y1 = p1.Y;line.X2 = p2.X;line.Y2 = p2.Y;line.Stroke = stroke;line.StrokeThickness = strokeThickness;this.canvas.Children.Add(line);

前頭，主要也是計算起始和終止點：

public Point ArrowPosition(Point p1, Point p2, PositionType positionType){var headlen = 5;//箭頭線的長度var theta = 45;//先頭銜與直線的夾角，45°var angle = Math.Atan2(p1.Y - p2.Y, p1.X - p2.X) * 180 / Math.PI;double angle1 = 0;if (positionType == PositionType.StartPoint){angle1 = (angle + theta) * Math.PI / 180;}else{angle1 = (angle - theta) * Math.PI / 180;}var x = headlen * Math.Cos(angle1);var y = headlen * Math.Sin(angle1);var point = new Point(x, y);return point;}

④繪制字符串：

//繪制字符串lable = new Label();lable.Content?=?"270°";label.Foreground = stroke;label.SetTop(p2.Y - marge * 1.2);label.SetLeft(p2.X + marge * 1.5);this.canvas.Children.Add(label);

這里采用了標簽的settop和setleft和①?Canvas.SetTop\ ?Canvas.SetLeft意義一樣.

⑤控件加載：

以上我們都把繪制好的控件添加到了canvas中，但是在VM中，canvas需要在界面加載時候獲取一下：

protected override void OnViewAttached(object view, object context){base.OnViewAttached(view, context);var element = view as FrameworkElement;if (element == null){return;}canvas = element.FindName("canvas") as Canvas;}

這里是通過CM框架的?protected virtual void OnViewAttached(object view, object context);實現的

除此之外我們也可以在Canvas_Loaded事件中獲取

public void Canvas_Loaded(object sender, RoutedEventArgs e){this.Canvas?=?sender?as?Canvas;}

前臺需要綁定事件：

<Canvas x:Name="canvas" cal:Message.Attach="[Event Loaded] = [Action Canvas_Loaded($source,$eventArgs)]"/>

這里記得引用名稱空間：

xmlns:cal="http://www.caliburnproject.org"

以上，如有疑問或者獲取源碼，請添加小編微信sf-1738658853，加入組織，請備注：進群！