MouseOverShapeBox

MouseOverShapeBoxMouseOverShapeBox 源码详解 - 鼠标悬停高亮标注框这是一个增强版图像标注控件当鼠标移动到形状上时会高亮显示该形状。类似于图片标注工具中鼠标悬停时边框变色的效果。 文件头部版权信息// 同之前的ShapeBox版权归HeBianGu所有MIT开源协议// Copyright (c) HeBianGu Authors. All Rights Reserved.// ...省略相同部分 引用命名空间usingH.Extensions.Common;// 扩展方法库如ToEnumerableusingSystem.Collections.Specialized;// 集合变化通知NotifyCollectionChangedEventArgsusingSystem.Windows.Input;// 鼠标输入相关MouseEventArgs、ICommand️ 类定义// 继承自ShapeBox增加鼠标悬停高亮功能publicclassMouseOverShapeBox:ShapeBox 私有字段// 专门用来绘制鼠标悬停高亮形状的视觉对象// 这个图层独立于普通形状图层确保高亮效果不受其他绘制影响privateDrawingVisual_MouseOverableShapeDrawingVisualnewDrawingVisual();️ 重写创建视觉对象方法protectedoverrideIEnumerableVisualCreateVisuals(){// base.CreateVisuals() 调用父类方法返回[图片层, 普通形状层]// .Concat() 连接两个集合// this._MouseOverableShapeDrawingVisual.ToEnumerable() 把高亮图层转成集合// 最终返回[图片层, 普通形状层, 高亮图层]// 高亮图层在最上层确保高亮效果可见returnbase.CreateVisuals().Concat(this._MouseOverableShapeDrawingVisual.ToEnumerable());}通俗理解就像三张透明玻璃叠在一起底层背景图片中层普通形状矩形、圆形等顶层鼠标悬停高亮效果 鼠标悬停边框颜色属性// 鼠标悬停时的边框颜色默认黄绿色publicBrushMouseOverStroke{get{return(Brush)GetValue(MouseOverStrokeProperty);}set{SetValue(MouseOverStrokeProperty,value);}}// 依赖属性注册publicstaticreadonlyDependencyPropertyMouseOverStrokePropertyDependencyProperty.Register(MouseOverStroke,typeof(Brush),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(Brushes.Chartreuse,// 默认黄绿色(d,e){MouseOverShapeBoxcontroldasMouseOverShapeBox;if(controlnull)return;// 这里可以添加颜色变化时的处理逻辑})); 鼠标悬停边框粗细属性// 鼠标悬停时的边框粗细默认1.0像素publicdoubleMouseOverStrokeThickness{get{return(double)GetValue(MouseOverStrokeThicknessProperty);}set{SetValue(MouseOverStrokeThicknessProperty,value);}}publicstaticreadonlyDependencyPropertyMouseOverStrokeThicknessPropertyDependencyProperty.Register(MouseOverStrokeThickness,typeof(double),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(1.0,// 默认1像素比普通边框可能更粗突出显示(d,e){})); 鼠标悬停填充颜色属性// 鼠标悬停时的填充颜色形状内部的颜色publicBrushMouseOverFill{get{return(Brush)GetValue(MouseOverFillProperty);}set{SetValue(MouseOverFillProperty,value);}}publicstaticreadonlyDependencyPropertyMouseOverFillPropertyDependencyProperty.Register(MouseOverFill,typeof(Brush),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(default(Brush),// 默认null透明(d,e){}));使用示例普通状态红色边框透明填充鼠标悬停黄色边框半透明蓝色填充 重写缩放变化处理protectedoverridevoidOnScaleChanged(){// 先调用父类方法重绘普通形状base.OnScaleChanged();// 如果鼠标悬停边框不是自动模式if(this.MouseOverStrokeThickness0)// 重新绘制高亮形状适应新的缩放比例this.DrawMouseOverableShapes();}为什么需要这个缩放时边框粗细也需要按比例调整否则会显得太粗或太细。 重写形状变化通知protectedoverridevoidOnShapesChanged(){// 先调用父类方法base.OnShapesChanged();// 重新检测鼠标下的形状因为形状列表变了this.MouseOverShapes();}场景当添加或删除形状时鼠标下的形状可能变化需要重新计算。 重写完整更新方法publicoverridevoidUpdateAll(){// 先调用父类方法更新图片和普通形状base.UpdateAll();// 再绘制高亮形状确保高亮效果最新this.DrawMouseOverableShapes();}️ 鼠标移动事件核心逻辑protectedoverridevoidOnMouseMove(MouseEventArgse){// 先调用父类方法确保其他鼠标功能正常base.OnMouseMove(e);// 如果没有形状集合直接返回if(this.Shapesnull)return;// 获取鼠标相对于当前控件的位置Pointpointe.GetPosition(this);// 查找所有鼠标下的形状// 1. OfTypeIMouseOverShape() - 只关心支持鼠标悬停的形状// 2. Where(x x.Hit(this, point)) - 检测鼠标是否在形状内varfindsthis.Shapes.OfTypeIMouseOverShape().Where(xx.Hit(this,point));// 将找到的形状传递给高亮显示方法this.MouseOverShapes(finds.ToArray());}Hit方法原理对于矩形判断点是否在矩形范围内对于圆形判断点到圆心的距离是否小于半径对于多边形使用射线法判断 管理高亮形状的列表// 私有字段存储当前鼠标下的所有形状privateListIMouseOverShape_MouseOverShapesnewListIMouseOverShape();// 设置当前高亮的形状protectedvirtualvoidMouseOverShapes(paramsIMouseOverShape[]MouseOverableShapes){// 清空之前的列表this._MouseOverShapes.Clear();// 如果传入了新形状添加到列表if(MouseOverableShapes!null)this._MouseOverShapes.AddRange(MouseOverableShapes);// 重新绘制高亮效果this.DrawMouseOverableShapes();}为什么用列表因为形状可能重叠鼠标可能同时悬停在多个形状上。✏️ 绘制高亮形状核心方法privatevoidDrawMouseOverableShapes(){// 打开高亮图层的绘制上下文usingvardrawingContextthis._MouseOverableShapeDrawingVisual.RenderOpen();// 如果没有需要高亮的形状直接返回清除之前的高亮if(this._MouseOverShapesnull||this._MouseOverShapes.Count()0)return;// 计算视图中的边框粗细考虑缩放varstrokeThicknessthis.ToViewThickness(this.MouseOverStrokeThickness);// 遍历每个需要高亮的形状// .Where(x this.Shapes.Contains(x)) - 确保形状还在集合中防止已被删除foreach(variteminthis._MouseOverShapes.Where(xthis.Shapes.Contains(x))){// 调用形状自己的DrawMouseOver方法// 让形状自己绘制高亮效果可以自定义样式item.DrawMouseOver(this,drawingContext,this.MouseOverStroke,// 高亮边框颜色strokeThickness,// 高亮边框粗细this.MouseOverFill);// 高亮填充颜色}} 重写集合变化通知protectedoverridevoidShapesCollectionChanged(objectsender,NotifyCollectionChangedEventArgse){// 先调用父类方法重绘普通形状base.ShapesCollectionChanged(sender,e);// 重绘高亮形状因为形状集合变了高亮状态可能需要更新this.DrawMouseOverableShapes();}场景删除了一个形状 → 如果它正好高亮需要清除高亮添加了新形状 → 检查鼠标是否在新形状上 总体设计思路架构图┌─────────────────────────────────────────────┐ │ MouseOverShapeBox 控件 │ ├─────────────────────────────────────────────┤ │ ┌───────────────────────────────────────┐ │ │ │ 高亮图层 (MouseOverableShapeDrawingVisual)│ ← 鼠标悬停效果最上层 │ ├───────────────────────────────────────┤ │ │ │ 普通形状层 (ShapeDrawingVisual) │ │ ← 普通矩形、圆形等 │ ├───────────────────────────────────────┤ │ │ │ 图片层 (ImageDrawingVisual) │ │ ← 背景图片 │ └───────────────────────────────────────┘ │ └─────────────────────────────────────────────┘工作流程用户移动鼠标 ↓ OnMouseMove 触发 ↓ 获取鼠标坐标 ↓ 遍历所有形状检测哪些被鼠标击中 ↓ 更新 _MouseOverShapes 列表 ↓ DrawMouseOverableShapes 重绘高亮 ↓ 用户看到高亮效果核心特性对比特性ShapeBoxMouseOverShapeBox显示图片✅✅绘制形状✅✅鼠标悬停高亮❌✅高亮样式可配置❌✅颜色、粗细、填充支持形状重叠❌✅可同时高亮多个使用示例// 创建鼠标悬停标注框varboxnewMouseOverShapeBox();box.ImageSourcemyImage;// 添加几个矩形box.Shapes.Add(newRectangleShape{BoundsnewRect(10,10,100,100)});box.Shapes.Add(newRectangleShape{BoundsnewRect(50,50,100,100)});// 配置普通样式box.StrokeBrushes.Blue;// 普通边框蓝色box.StrokeThickness1;// 普通边框1像素// 配置悬停样式box.MouseOverStrokeBrushes.Red;// 悬停边框红色box.MouseOverStrokeThickness3;// 悬停边框3像素更醒目box.MouseOverFillBrushes.Yellow;// 悬停填充黄色// 运行后鼠标移动到矩形上时会看到红色粗边框 黄色填充设计模式识别模板方法模式OnMouseMove、DrawMouseOverableShapes等装饰器模式在原有ShapeBox功能上增加鼠标悬停功能观察者模式监听鼠标移动和形状集合变化策略模式IMouseOverShape接口不同形状实现不同的Hit检测关键接口 - IMouseOverShape// 形状需要实现这个接口才能支持鼠标悬停publicinterfaceIMouseOverShape:IShape{// 检测鼠标是否在形状内boolHit(MouseOverShapeBoxbox,Pointpoint);// 绘制高亮效果voidDrawMouseOver(MouseOverShapeBoxbox,DrawingContextdc,Brushstroke,doublethickness,Brushfill);}这个控件让你的标注工具更交互友好用户能清楚地知道当前鼠标指向哪个标注框// Copyright (c) HeBianGu Authors. All Rights Reserved.// Author: HeBianGu// Github: https://github.com/HeBianGu/WPF-Control// Document: https://hebiangu.github.io/WPF-Control-Docs// QQ:908293466 Group:971261058// bilibili: https://space.bilibili.com/370266611// Licensed under the MIT License (the License)usingH.Extensions.Common;usingSystem.Collections.Specialized;usingSystem.Windows.Input;namespaceH.LabelImg.ShapeBox;publicclassMouseOverShapeBox:ShapeBox{privateDrawingVisual_MouseOverableShapeDrawingVisualnewDrawingVisual();protectedoverrideIEnumerableVisualCreateVisuals(){returnbase.CreateVisuals().Concat(this._MouseOverableShapeDrawingVisual.ToEnumerable());}publicBrushMouseOverStroke{get{return(Brush)GetValue(MouseOverStrokeProperty);}set{SetValue(MouseOverStrokeProperty,value);}}publicstaticreadonlyDependencyPropertyMouseOverStrokePropertyDependencyProperty.Register(MouseOverStroke,typeof(Brush),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(Brushes.Chartreuse,(d,e){MouseOverShapeBoxcontroldasMouseOverShapeBox;if(controlnull)return;if(e.OldValueisBrusho){}if(e.NewValueisBrushn){}}));publicdoubleMouseOverStrokeThickness{get{return(double)GetValue(MouseOverStrokeThicknessProperty);}set{SetValue(MouseOverStrokeThicknessProperty,value);}}publicstaticreadonlyDependencyPropertyMouseOverStrokeThicknessPropertyDependencyProperty.Register(MouseOverStrokeThickness,typeof(double),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(1.0,(d,e){MouseOverShapeBoxcontroldasMouseOverShapeBox;if(controlnull)return;if(e.OldValueisdoubleo){}if(e.NewValueisdoublen){}}));publicBrushMouseOverFill{get{return(Brush)GetValue(MouseOverFillProperty);}set{SetValue(MouseOverFillProperty,value);}}// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...publicstaticreadonlyDependencyPropertyMouseOverFillPropertyDependencyProperty.Register(MouseOverFill,typeof(Brush),typeof(MouseOverShapeBox),newFrameworkPropertyMetadata(default(Brush),(d,e){MouseOverShapeBoxcontroldasMouseOverShapeBox;if(controlnull)return;if(e.OldValueisBrusho){}if(e.NewValueisBrushn){}}));protectedoverridevoidOnScaleChanged(){base.OnScaleChanged();if(this.MouseOverStrokeThickness0)this.DrawMouseOverableShapes();}protectedoverridevoidOnShapesChanged(){base.OnShapesChanged();this.MouseOverShapes();}publicoverridevoidUpdateAll(){base.UpdateAll();this.DrawMouseOverableShapes();}protectedoverridevoidOnMouseMove(MouseEventArgse){base.OnMouseMove(e);if(this.Shapesnull)return;Pointpointe.GetPosition(this);varfindsthis.Shapes.OfTypeIMouseOverShape().Where(xx.Hit(this,point));this.MouseOverShapes(finds.ToArray());}privateListIMouseOverShape_MouseOverShapesnewListIMouseOverShape();protectedvirtualvoidMouseOverShapes(paramsIMouseOverShape[]MouseOverableShapes){this._MouseOverShapes.Clear();if(MouseOverableShapes!null)this._MouseOverShapes.AddRange(MouseOverableShapes);this.DrawMouseOverableShapes();}privatevoidDrawMouseOverableShapes(){usingvardrawingContextthis._MouseOverableShapeDrawingVisual.RenderOpen();if(this._MouseOverShapesnull||this._MouseOverShapes.Count()0)return;varstrokeThicknessthis.ToViewThickness(this.MouseOverStrokeThickness);foreach(variteminthis._MouseOverShapes.Where(xthis.Shapes.Contains(x))){item.DrawMouseOver(this,drawingContext,this.MouseOverStroke,strokeThickness,this.MouseOverFill);}}protectedoverridevoidShapesCollectionChanged(objectsender,NotifyCollectionChangedEventArgse){base.ShapesCollectionChanged(sender,e);this.DrawMouseOverableShapes();}}