【WPF/C#】图层筛选/拾取——Color Picker

文章标题实在不懂怎么表述才清楚。

描述问题：多个图片（图层）重叠时，如何通过鼠标点击来拾取到相应的图层。因为图层中会有很多空白的地方（比如图片四周），要求是获取鼠标点击位置的像素颜色值，如果为空白时或透明度小于50%，则穿透到下一层图层再次进行颜色判断，直到找到符合条件的图层。

---

根据颜色拾取搜索WPF Color Picker，找到一些相关的资料：

• https://www.codeproject.com/Articles/36848/WPF-Image-Pixel-Color-Picker-Element
• https://github.com/Alkalinee/ColorPicker/blob/master/ColorPicker/Controls/ImageColorPicker.cs

为了适应当前需求，稍作整理之后，提取为一个工具类，代码有点长这里只放个链接，本文重点是如何使用这个工具类来实现需求：

• https://github.com/Guxin233/WPF-Image-Pixel-Color-Picker/blob/master/ImageColorPicker.cs

---

阅读Demo可知：

• 需要把能被拾取到的图片，专门放到一个集合中，如

ObservableCollection<ImageColorPicker> ImageList

• 在遍历该集合时，遍历的顺序即是检测点击位置的像素颜色值所属图层的顺序（点击穿透的顺序）。即在将图片加入集合的时候，应该将处于上层的图片先加入集合。

        /// <summary>
        /// 根据鼠标位置，拾取图像
        /// </summary>
        private void PickImageByMousePosition()
        {
            // 获得鼠标相对于当前窗口的位置
            Point mousePoint = Mouse.GetPosition(curWindow);

　　　　　　　// 遍历图层列表，找到符合条件的图层
            foreach (ImageColorPicker image in ImageList)
            {
                // 鼠标相对于当前遍历到的图片的位置（以图片左下角为原点？）
                Point p = Mouse.GetPosition(image);

                Color color = new Color();

                // 鼠标在图片外面，就遍历下一张图片
                if (p.X < 0 || p.Y < 0 || p.X > image.ActualWidth || p.Y > image.ActualHeight)
                {
                    continue;
                }

                // 获取鼠标位置的颜色值
                color = image.PickColor(p.X, p.Y);

                // 无色或透明度小于0.5的图层，不是目标图层
                if (color != null && color.A <= 50)
                {
                    continue;
                }

　　　　　　　　  // 能执行到这一步，说明找到了目标图层
　　　　　　　　　// to what you want

                break;
            }

        }

---

进阶：给每张图片（每个图层）添加鼠标事件，通过点击事件来执行遍历检查。

先给图片集合中的每个图片添加一个鼠标左键弹起事件，该事件是激发下一张图片的鼠标左键弹起事件，从而实现事件穿透，直到找到符合要求的图片。

        // 每次添加处理器AddHandler之前先清空Handler，防止重复多次添加
        for (int i = 0; i < ImageList.Count; i++)
        {
            ImageList[i].RemoveHandler(Image.MouseLeftButtonUpEvent, new RoutedEventHandler(DesignImage_PreviewMouseLeftButtonUp));
        }

        // 给拾取图片添加鼠标事件
        foreach (ImageColorPicker image in ImageList)
        {
            image.AddHandler(Image.MouseLeftButtonUpEvent, new RoutedEventHandler(DesignImage_PreviewMouseLeftButtonUp));
        }

然后是激发的事件。

        private void DesignImage_PreviewMouseLeftButtonUp(object sender, RoutedEventArgs e)
        {
            // 当前激发事件的图片
            ImageColorPicker image = (ImageColorPicker)sender;
            
            // 当前图片在集合中的角标
            int currentIndex = GetIndex(image);

            // 鼠标相对于该图片的位置
            Point p = Mouse.GetPosition(image);

            Color color = new Color();

            try
            {
                // 位于图像外部，抛异常执行Catch（跳过该层，继续穿透到下一层）
                if (p.X < 0 || p.Y < 0 || p.X > image.ActualWidth || p.Y > image.ActualHeight)
                {
                    throw new Exception("p.X或p.Y小于0！");
                }

                color = image.PickColor(p.X, p.Y);  // 获取鼠标位置的颜色值
                if (color != null && color.A <= 50) // 无色或透明度小于0.5
                {
                    ImageColorPicker NextImage = null;
                    if (currentIndex < ImageList.Count - 1)
                    {
                            NextImage = ImageList[currentIndex + 1];
                        }
                        if (NextImage != null) // 传递到下一图层，下一层激发该事件
                        {
                            MouseDevice mouseDevice = Mouse.PrimaryDevice;
                            MouseButtonEventArgs mouseButtonEventArgs = new MouseButtonEventArgs(mouseDevice, 0, MouseButton.Left);
                            mouseButtonEventArgs.RoutedEvent = Image.MouseLeftButtonUpEvent;
                            mouseButtonEventArgs.Source = NextImage;
                            NextImage.RaiseEvent(mouseButtonEventArgs);
                        }
                    }
                    else // 找到了有颜色的图层，即是目标图层
                    {
                        // do what you want
                    }
                }
            }
            catch (Exception)
            {
                System.Console.WriteLine("----- 图层拾取发生异常，则继续穿透到下一层 ------");
                // 点击到了图层的外部，则继续穿透到下一层
                ImageColorPicker NextImage = null;
                if (currentIndex < fileDataService.DesignViewModelList[i].ImageList.Count - 1)
                {
                    NextImage = fileDataService.DesignViewModelList[i].ImageList[currentIndex + 1];
                }
                if (NextImage != null)
                {
                    string nextType = NextImage.Uid;
                    MouseDevice mouseDevice = Mouse.PrimaryDevice;
                    MouseButtonEventArgs mouseButtonEventArgs = new MouseButtonEventArgs(mouseDevice, 0, MouseButton.Left);
                    mouseButtonEventArgs.RoutedEvent = Image.MouseLeftButtonUpEvent;
                    mouseButtonEventArgs.Source = NextImage;
                    NextImage.RaiseEvent(mouseButtonEventArgs);
                }
            }
        }

        /// <summary>
        /// 当前image在ImageList列表中的角标
        /// </summary>
        /// <param name="image">当前ImageColorPicker</param>
        /// <returns></returns>
        int GetIndex(ImageColorPicker image)
        {
            object targetTag = image.Tag;
            int index = -1;

            for (int i = 0; i < ImageList.Count; i++)
            {
                ImageColorPicker obj = ImageList[i];
                if (obj.Equals(image))
                {
                    index = i;
                    break;
                }
            }

            return index;
        }