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+图形图像的绘制：（八）位置坐标和宽高与控件绑定展示