C#開發PACS醫學影像處理系統(十二)：繪圖處理之圖形標記

喬克灬叔叔發表於2020-09-16

在醫生實際使用過程中，對於有病灶的影像需要一些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);
        }