WPF中GDI+圖形圖像的繪制：（六）繪制圖像——滑鼠選中後繪制邊框

實作效果：

實作步驟：

1、要實作滑鼠選中顯示邊框效果，可以在Image控件重繪OnRender時繪制，這裡我們重寫Image控件，添加MyImage.cs類繼承自System.Windows.Controls.Image，代碼如下：

public partial class MyImage : System.Windows.Controls.Image
    {
        public MyImage()
        { 
        }
        public bool IsSelect;//是否選中
        /// <summary>
        /// 重繪
        /// </summary>
        protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);
            
            if (IsSelect)
            {
                try
                {
                    //繪制邊框
                    Rect rect = new Rect(0, 0, this.Width, this.Height);
                    Pen p = new Pen(new SolidColorBrush(Colors.Red), 2);
                    p.DashStyle = DashStyles.Dot;
                    p.StartLineCap = PenLineCap.Triangle;
                    dc.DrawRectangle(Brushes.Transparent, p, rect);
                }
                catch { }
            }
        }
    }
           

2、将Canvas裡的繪圖Image控件替換為MyImage，并添加滑鼠按下擡起事件：

<Canvas x:Name="mainCanvas" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Background="White" Width="960" Height="720" Margin="10,5,0,0"
                HorizontalAlignment="Left" VerticalAlignment="Top" ClipToBounds="True"
                MouseLeftButtonDown="mainCanvas_MouseLeftButtonDown" MouseLeftButtonUp="mainCanvas_MouseLeftButtonUp">
            <Image x:Name="imgFont"></Image>
            <local:MyImage x:Name="imgPic"></local:MyImage>
        </Canvas>
           

3、在滑鼠按下時捕獲圖檔焦點并設定已選中，滑鼠擡起時釋放焦點：

/// <summary>
        /// 滑鼠按下
        /// </summary>
        private void mainCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.OriginalSource.GetType() == typeof(MyImage))
            {
                MyImage img = (MyImage)e.OriginalSource;
                //滑鼠捕獲此圖檔
                img.CaptureMouse();
                img.IsSelect = true;
                img.InvalidateVisual();
                SetOtherUnSelect(img);
            }
            else
            {
                SetOtherUnSelect();
            }
        }
        /// <summary>
        /// 滑鼠擡起
        /// </summary>
        private void mainCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (e.OriginalSource.GetType() == typeof(MyImage))
            {
                MyImage img = (MyImage)e.OriginalSource;
                //滑鼠釋放此圖檔
                img.ReleaseMouseCapture();
                img.InvalidateVisual();
            }
        }
        /// <summary>
        /// 設定其他為未選擇狀态
        /// </summary>
        public void SetOtherUnSelect(object myImage = null)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(this.mainCanvas); i++)
            {
                if (VisualTreeHelper.GetChild(this.mainCanvas, i).GetType() == typeof(MyImage))
                {
                    MyImage child = (MyImage)VisualTreeHelper.GetChild(this.mainCanvas, i);
                    if (myImage == null)
                    {
                        child.IsSelect = false;
                        child.InvalidateVisual();
                    }
                    else if (myImage != child)
                    {
                        if (child.IsSelect)
                        {
                            child.IsSelect = false;
                            child.InvalidateVisual();
                        }
                    }
                }
            }
        }
           

注：接下來的幾節（七、八）内容跟GDI+沒有太多關系，主要為了使工程更加飽滿而添加的，使用的是WPF中的圖形呈現方法。

相關博文：

WPF中GDI+圖形圖像的繪制：（一）繪制文本——動态設定字型、大小、顔色

WPF中GDI+圖形圖像的繪制：（二）繪制文本——字型描邊、漸變、圖檔疊加

WPF中GDI+圖形圖像的繪制：（三）繪制圖像——實作黑白、浮雕、銳化效果

WPF中GDI+圖形圖像的繪制：（四）繪制圖像——水準垂直鏡像與中心旋轉

WPF中GDI+圖形圖像的繪制：（五）繪制圖像——蒙闆效果

WPF中GDI+圖形圖像的繪制：（六）繪制圖像——滑鼠選中後繪制邊框

WPF中GDI+圖形圖像的繪制：（七）繪制圖像——滑鼠拖動改變位置和大小

WPF中GDI+圖形圖像的繪制：（八）位置坐标和寬高與控件綁定展示