【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
为了适应当前需求,稍作整理之后,提取为一个工具类,代码有点长这里只放个链接,本文重点是如何使用这个工具类来实现需求:
阅读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 < || p.Y < || p.X > image.ActualWidth || p.Y > image.ActualHeight)
{
continue;
} // 获取鼠标位置的颜色值
color = image.PickColor(p.X, p.Y); // 无色或透明度小于0.5的图层,不是目标图层
if (color != null && color.A <= )
{
continue;
} // 能执行到这一步,说明找到了目标图层
// to what you want break;
} }
进阶:给每张图片(每个图层)添加鼠标事件,通过点击事件来执行遍历检查。
先给图片集合中的每个图片添加一个鼠标左键弹起事件,该事件是激发下一张图片的鼠标左键弹起事件,从而实现事件穿透,直到找到符合要求的图片。
// 每次添加处理器AddHandler之前先清空Handler,防止重复多次添加
for (int i = ; 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 < || p.Y < || 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 <= ) // 无色或透明度小于0.5
{
ImageColorPicker NextImage = null;
if (currentIndex < ImageList.Count - )
{
NextImage = ImageList[currentIndex + ];
}
if (NextImage != null) // 传递到下一图层,下一层激发该事件
{
MouseDevice mouseDevice = Mouse.PrimaryDevice;
MouseButtonEventArgs mouseButtonEventArgs = new MouseButtonEventArgs(mouseDevice, , 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 - )
{
NextImage = fileDataService.DesignViewModelList[i].ImageList[currentIndex + ];
}
if (NextImage != null)
{
string nextType = NextImage.Uid;
MouseDevice mouseDevice = Mouse.PrimaryDevice;
MouseButtonEventArgs mouseButtonEventArgs = new MouseButtonEventArgs(mouseDevice, , 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 = -; for (int i = ; i < ImageList.Count; i++)
{
ImageColorPicker obj = ImageList[i];
if (obj.Equals(image))
{
index = i;
break;
}
} return index;
}
【WPF/C#】图层筛选/拾取——Color Picker的更多相关文章
- NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)
Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...
- [wordpress]后台自定义菜单字段和使用wordpress color picker
Wordpress Version 4.4.2 参考链接 插件使用wordpress color picker:Add A New Color Picker To WordPress 后台菜单自定义字 ...
- 使用canvas制作的移动端color picker
使用canvas制作的移动端color picker 项目演示地址(用手机或者手机模式打开) 我在另一个中demo,需要用到color picker,但是找不到我需要的移动端color picker, ...
- WPF 自定义列表筛选 自定义TreeView模板 自定义ListBox模板
有很多项目,都有数据筛选的操作.下面提供一个案例,给大家做参考. 左侧是数据源,搜索框加TreeView控件,右侧是ListBox控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...
- 例子:Camera Color Picker Sample (YCbCr->ARGB)
本例演示了如何从相机preview缓冲区获取YCbCr模块,并且转化为ARGB. 1. 什么是YCbCr y:像素的亮度.以范围从 0 到 255 的字节值形式返回(亮度值始终为正值). cr:像素的 ...
- 颜色采集器colpick Color Picker
简单 RGB.HSB.十六进制颜色选取器 jQuery 插件. 非常直观类似 Photoshop 的界面. 光明和黑暗很容易自定义 CSS3 外观. 28 KB 总由浏览器加载看起来不错甚至在 IE7 ...
- C# WPF Datagrid的筛选
public static void SearchResult(DataGrid dg,string condition) { #region string code = string.Empty; ...
- Linux下无法运行Color picker
➜ ~ com.github.ronnydo.colorpicker com.github.ronnydo.colorpicker: error while loading shared librar ...
- An easy to use android color picker library
https://github.com/xdtianyu/ColorPicker
随机推荐
- sql用逗号连接多张表对应哪个join?
转自:http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): ...
- #优化:Nginx防御DDOS和CC攻击
加载HTTP段 ## # 基础配置 ## keepalive_timeout 10; server_tokens off; types_hash_max_size 2048; ## # 主要配置 ## ...
- Python 文件 read() 方法
概述 Python 文件 read() 方法用于从文件中读取指定的字符数,如果未给定或为负则读取所有. 语法 read() 方法语法如下: fileObject.read([size]) 参数 siz ...
- Java – Generate random integers in a rangejava获取某个范围内的一个随机数
In this article, we will show you three ways to generate random integers in a range. java.util.Rando ...
- npm的影武者 —— Npx
npx github:https://github.com/zkat/npx 什么是Npx?它和npm是什么关系? 如果你把NPM升级到最新版本npm@5.2.0 ,它就会安装一个新的包npx $ n ...
- windows 环境使用 kafka
近来学习 kafka,网上搜的教程好多不好用.在此开一贴记录一下学习过程.推荐官网,是最好的教程 http://kafka.apache.org/quickstart 官网上是linux 环境,我用的 ...
- 用python做网页抓取与解析入门笔记[zz]
(from http://chentingpc.me/article/?id=961) 事情的起因是,我做survey的时候搜到了这两本书:Computational Social Network A ...
- Android调试桥-Android Debug Birdge详解
原文:http://android.eoe.cn/topic/summary Android调试桥-Android Debug Birdge Android调试桥(adb)是一个多功能的命令行功具,它 ...
- 微信小程序调用蓝牙功能控制车位锁
第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...
- Atitit 面试问题总结
Atitit 面试问题总结 1. 面试约人阶段可以预先1俩分钟大概问下情况1 2. 自我介绍阶段1 3. 技术方面2 3.1. 界面方面2 3.2. Java 本身 了解spring mybati ...