在醫生實際使用過程中，對於有病灶的影像需要一些2D繪圖操作，例如對於病灶的標記和測量，
這就牽涉到在WPF中的2D繪圖操作技術，一般的思路是監聽鼠標的按下和抬起以及運動軌跡，目前整理出的常用繪圖和測量功能如下：
圖形標記類：（測量類請參考本系列文章：繪圖處理之測量工具）
| 功能 | 說明 |
| 選區 | 螞蟻線選擇框 |
| 線段 | 線段標記 |
| 折線 | 折線標記 |
| 圓形 | 空心圓形 |
| 矩形 | 空心矩形 |
| 多邊形 | 空心多邊形 |
| 箭頭 | 指向作用 |
| 文本 | 文本標記 |
| 清除所有標記 | 清空單元格繪圖對象 |
| 撤銷上個標記 | 刪除上一個繪圖對象 |
在WPF中， 推薦使用InkCanvas控件。
最終效果：
1.在你的C#工程中添加一個圖形類作為操作基類：
/// <summary> /// 圖形信息 /// </summary> public class ShapeInfo { #region -----聲明變量----- /// <summary> /// 圖形操作類型 /// </summary> public DrawAction shapeType = DrawAction.None; /// <summary> /// 控件畫布對象 /// </summary> public InkCanvas inkCanvas; /// <summary> /// 單位圖形畫布對象 /// </summary> public Canvas canvas; /// <summary> /// 圖形 /// </summary> public Shape shape; /// <summary> /// 控制點矩形對象集合 /// </summary> public Dictionary<string, Ellipse> CtrlPoints; /// <summary> /// 范圍選區矩形對象 /// </summary> public Polygon regionRect; /// <summary> /// 當前形狀的幾何體 /// </summary> public Geometry geometry; /// <summary> /// 是否為測量行為 /// </summary> public bool isMeasure = false; /// <summary> /// 測量對象集合 /// </summary> public List<TextBlock> measureList = new List<TextBlock>(); #endregion #region -----基類虛方法----- /// <summary> /// 繪制圖形 /// </summary> /// <param name="point">鼠標坐標</param> public virtual void DrawShape(Point point) { } /// <summary> /// 圖形繪制完成 /// </summary> /// <param name="point">鼠標坐標</param> /// <param name="isCallBack">是否回調</param> public virtual bool DrawDone(Point point, bool isCallBack) { return true; } /// <summary> /// 繪制完成回調函數 /// </summary> /// <param name="point">鼠標坐標</param> /// <param name="isCallBack">是否回調</param> public delegate bool DrawDoneCallBack(Point point, bool isCallBack); /// <summary> /// 繪制完成回調函數對象 /// </summary> public DrawDoneCallBack drawDoneCallBack; /// <summary> /// 選區移動回調函數 /// </summary> /// <param name="curPoint">當前鼠標坐標</param> /// <param name="downPoint">按下鼠標坐標</param> public delegate void RegionRectMoveCallBack(Point curPoint, Point downPoint); /// <summary> /// 選區移動回調函數對象 /// </summary> public RegionRectMoveCallBack regionRectMoveCallBack; #endregion }
2.創建圖形標記的子類來繼承基類，例如繪制一個線段：
/// <summary> /// 線段圖形信息 /// </summary> public class LineInfo : ShapeInfo
在此類中創建繪制方法
/// <summary> /// 創建線段 /// </summary> /// <param name="point">起點坐標</param> public void CreateLine(Point point) { Line line = new Line { //線段顏色 Stroke = ShapeManager.shapeColor, //線段粗細 StrokeThickness = ShapeManager.shapeThickness, //圓角頂點 StrokeLineJoin = PenLineJoin.Round, StrokeEndLineCap = PenLineCap.Round, StrokeStartLineCap = PenLineCap.Round, //起點的X、Y坐標 X1 = point.X, Y1 = point.Y, //終點的X、Y坐標 X2 = point.X, Y2 = point.Y, };
Canvas canvas = new Canvas(); canvas.Children.Add(line); inkCanvas.Children.Add(canvas); }
監聽鼠標的的運動軌跡並重新繪制：
/// <summary> /// 繪制圖形 /// </summary> /// <param name="point">當前坐標</param> public override void DrawShape(Point point) { line.X2 = point.X; line.Y2 = point.Y; }
繪制控制點：一個白色的圓形內嵌一個黑色的圓形，作為繪圖完成之后的控制點
/// <summary> /// 繪制控制點 /// </summary> /// <param name="point">鼠標坐標</param> /// <param name="tag">控制點標志</param> /// <returns></returns> public Ellipse DrawCtrlPoint(Point point, string tag) { Ellipse ctrlPoint = new Ellipse { StrokeThickness = ShapeManager.ctrlPointThickness, Stroke = ShapeManager.ctrlPointColor, Fill = ShapeManager.ctrlPointFill, Width = ShapeManager.ctrlPointWidth, Height = ShapeManager.ctrlPointHeight, Margin = new Thickness(point.X - 5, point.Y - 5, point.X - 5, point.Y - 5), Visibility = Visibility.Hidden, }; if (!CtrlPoints.Keys.Contains(tag)) { CtrlPoints.Add(tag, ctrlPoint); canvas.Children.Add(ctrlPoint); ctrlPoint.Tag = tag; } return ctrlPoint; }
看效果：
螞蟻線選區：
/// <summary> /// 創建選擇框 /// </summary> /// <param name="point">起點坐標</param> public void CreateSelected(Point point) { Polygon selectedPoly = new Polygon { Stroke = ShapeManager.selectRegColor, StrokeThickness = ShapeManager.selectRegThickness, StrokeDashArray = ShapeManager.selectRegDashArray, Points = { point, point, point, point }, }; canvas.Children.Add(selectedPoly); inkCanvas.Children.Add(canvas); }
其中要注意的是繪制模式改成虛線並控制間隔才能變成螞蟻線：
那么以此類推，通過命名空間System.Windows.Shapes，我們可以繼續繪制其他圖形了
最后，關於撤銷上個標記和清除所有標記，只需要將圖形對象保存在LIst集合中，
需要刪除或撤銷的時候從集合中移除，並在畫布中移除即可。