wpf 如何实现鼠标拖拽显示矩形框_【使用方法】|上位机波形显示

dc9ed7383ce11fa20f97bf8cb534db19.png

点击关注了解更多精彩内容!!

波形显示可以说是上位机的功能重点,是各种调试、数据分析的有力助手,下面对匿名上位机的波形显示功能做一个详细使用介绍。

主界面:

b71c9f02f85fc1d95c50a60ff22753ad.png

主界面左侧为功能区,顶部有功能按钮,稍后做详细说明。中间部分为波形名称、颜色、数值显示。最下方为波形清空按钮。功能区和波形区之间有一蓝色竖条,点击该处即可实现功能区的隐藏与显示。
保存:将波形以文件形式保存,注意保存的文件为上位机专用文件,只能用上位机的读取功能进行读取。
读取:读取之前保存的波形文件。
全显:一屏内显示所有波形数据。
全屏:全屏显示波形区域。
设置:显示波形设置界面,见下文波形设置界面。
X轴点数:表示一页波形X轴点数,数值越大,一页波形显示的点越多。
主界面右边就是波形显示区域了。波形纵坐标为自动坐标,根据波形数据y值的最大值、最小值自动适应。波形横坐标单位为帧数,每增加一次波形数据,x轴加1.
波形操作:
缩放:在波形区域,按住鼠标左键,向右下拖动,会出现一个矩形框,框住想要方法的波形区域,松开鼠标左键,即可实现波形的放大。同样,按住鼠标左键,向左上方拖动,可以将放大的波形还原显示。注意鼠标左键的拖动方向,右下、右上为放大,左上、左下为还原。
移动:在波形区域按住鼠标右键,向不同方向移动鼠标即可实现波形的移动。
数值显示:按住Ctrl键,使用鼠标左键点击波形,即可切换该波形的数值显示与隐藏,数值显示如下图:

11c731b3d5c4bf5b8e80b274685c05df.png

快速设置:鼠标右键点击左侧功能区域的波形名称,即可对该波形进行快速设置,如下图:

72adae5ad2df91fe5a9159450172f9cf.png

可以对波形颜色、缩放倍数、数据源进行快速配置。

波形设置界面:点击左侧功能区上方的设置按钮,可以打开波形功能设置界面,如下图:

14d986bfe9d49f2fe43ee1bacee0a5da.png

本节目可以对20条波形的颜色、缩放、数据源以及其他功能进行配置。
绘制所有点:绘制每一条波形的所有数据点,如果取消勾选,当一页显示的数据过多时,上位机会自动隐藏部分数据点(不影响数据观察,只会在每页x轴点数过高时起作用。比如显示器横向分辨率1080,但是一页x轴设置的是1500点,肯定有部分点无法画出,如果取消勾选本功能,即可忽略隐藏的点,加快波形绘制速度。为了使用简单,默认勾选本功能,性能较好的电脑即使绘制所有点也可以保证1000hz以上的绘制速度。)
绘制坐标线:控制波形区域坐标线的显示与隐藏。
飞控基本波形:将20条波形快速切换为默认的飞控数据。
用户数据波形:将20条波形快速切换为1到20号数据容器
矩形波:两个相邻的波形点之间,直角线条连接,便于数据分析,如下图(推荐使用矩形波)

c29b86f1c56d137d646eaefa0a140d14.png

斜线波:两个相邻的波形点之间,斜线直接连接,波形看起来较平滑,如下图:

e5e6c30972fed1032cf6a582db0baaf3.png

9a7cb325e8988a43f7bde81fd2ce1b7d.png

推荐阅读

Recommended reading

1b52b547cebbff93082ab2c4b0615a31.png

点击下列标题  阅读更多资讯

| C#做一个简单的进行串口通信的上位机

| 阿里云服务器 + WinServer 2012 搭建Git服务器

| 零基础、零硬件、零费用,带你领略通信底层原理

| 如何在VisionPro中测试物体长度?

| 基于Log4Net组件快速实现日志记录

| 基于KepServer V6.4实现与三菱FX3U PLC之间的通信

| C#联合Halcon实现相机的实时采集

47a5400fe6bd299bd48cf0105751e939.gif
实现鼠标拖拽改变Rectangle大小以及旋转,可以使用WPF的MVVMLight框架来实现。 首先,在ViewModel定义Rectangle的位置、大小和角度等属性,以及鼠标拖拽的事件处理函数。 ``` public class MainViewModel : ViewModelBase { private double _left; private double _top; private double _width; private double _height; private double _angle; public double Left { get { return _left; } set { Set(ref _left, value); } } public double Top { get { return _top; } set { Set(ref _top, value); } } public double Width { get { return _width; } set { Set(ref _width, value); } } public double Height { get { return _height; } set { Set(ref _height, value); } } public double Angle { get { return _angle; } set { Set(ref _angle, value); } } public void OnMouseDown(object sender, MouseButtonEventArgs e) { // 鼠标按下时记录鼠标位置 } public void OnMouseMove(object sender, MouseEventArgs e) { // 鼠标移动时根据鼠标位置计算Rectangle的位置、大小和角度 } public void OnMouseUp(object sender, MouseButtonEventArgs e) { // 鼠标抬起时清空鼠标位置记录 } } ``` 接着,在View使用MVVMLight框架提供的Binding绑定属性和事件处理函数。 ``` <Window.DataContext> <vm:MainViewModel /> </Window.DataContext> <Grid> <Rectangle Fill="Blue" Width="{Binding Width}" Height="{Binding Height}" Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="{Binding Angle}" /> </Rectangle.RenderTransform> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseDown"> <i:InvokeCommandAction Command="{Binding MouseDownCommand}" /> </i:EventTrigger> <i:EventTrigger EventName="MouseMove"> <i:InvokeCommandAction Command="{Binding MouseMoveCommand}" /> </i:EventTrigger> <i:EventTrigger EventName="MouseUp"> <i:InvokeCommandAction Command="{Binding MouseUpCommand}" /> </i:EventTrigger> </i:Interaction.Triggers> </Rectangle> </Grid> ``` 最后,在ViewModel实现鼠标拖拽事件处理函数,计算Rectangle的位置、大小和角度。 ``` public RelayCommand MouseDownCommand { get; private set; } public RelayCommand MouseMoveCommand { get; private set; } public RelayCommand MouseUpCommand { get; private set; } public MainViewModel() { MouseDownCommand = new RelayCommand(OnMouseDown); MouseMoveCommand = new RelayCommand(OnMouseMove); MouseUpCommand = new RelayCommand(OnMouseUp); } private Point _lastMousePosition; public void OnMouseDown() { _lastMousePosition = Mouse.GetPosition(Application.Current.MainWindow); } public void OnMouseMove() { if (Mouse.LeftButton == MouseButtonState.Pressed) { var currentMousePosition = Mouse.GetPosition(Application.Current.MainWindow); var delta = currentMousePosition - _lastMousePosition; _lastMousePosition = currentMousePosition; // 计算Rectangle的位置、大小和角度 } } public void OnMouseUp() { _lastMousePosition = new Point(); } ``` 这样就可以通过MVVMLight框架实现鼠标拖拽改变Rectangle大小以及旋转了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值