网站建设可自学吗网站前端建设需要学会什么意思

功能需求

机器视觉检测系统中特别是缺陷检测系统，通常需要进行对已经检出的缺陷图片进行浏览查阅。主要是通过条件筛选查询出所需要的数据，进行分页再展示到界面中。
预期功能：

• 条件查询：通过不同的条件查询需要展示的检测记录数据
• 数据分页：页面大小有限，控制数据来源，对数据进行分页
• 图像展示：以平铺的方式展示图像
• 数据提示：鼠标移动到图片上显示其他详细信息
• 原图查看：点击查看原始大图

本文使用Winform&ListView实现图像展示和数据提示这部分功能需求，效果如下所示：

图像浏览

界面上需要放置一个ListView控件和一个ImageList对象。
我们是要平铺显示大图，设置ListView空间的View属性为LargeIcon，说大也不够大，只有256*256。

具体实现过程就是：
1 查询到数据；
2 遍历数据源将图像数据填充到ImageList对象，同时设置ListView的listViewItem集合
3 传递给ListView来展示。

注意：
1 图像失真：设置 imageList.ColorDepth = ColorDepth.Depth32Bit;
2 图像大小：ImageSize.Height或者ImageSize.Width应介于 1 和 256 之间。

private void uiPagination1_PageChanged(object sender, object pagingSource, int pageIndex, int count)
{try{List<DefectResultDetails> data = new List<DefectResultDetails>();if (datas == null){return;}for (int i = (pageIndex - 1) * count; i < (pageIndex - 1) * count + count; i++){if (i >= datas.Count) continue;data.Add(datas[i]);}int index = 0;listView1.Clear();imageList = new ImageList();imageList.ImageSize = new Size(256, 130);//彩色图像需要设置，否则图像会失真imageList.ColorDepth = ColorDepth.Depth32Bit;foreach (var item in data){imageList.Images.Add(Bitmap.FromFile(item.Path));ListViewItem listViewItem = new ListViewItem();listViewItem.ImageIndex = index;listViewItem.Tag = $"{item.Path.Split('\\')[4]}-{item.Path.Split('\\')[5].Split('.')[0]}";listViewItem.Text = $"{item.Path.Split('\\')[4]}-{item.Path.Split('\\')[5].Split('.')[0]}";//使用该方法要将控件的 ShowItemTttlTips设置为True//listViewItem.ToolTipText = $"总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 是否报警:{item.IsAlarm}";listViewItem.SubItems.Add($"总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 异物个数:{item.Count} 是否报警:{item.IsAlarm}");// 为了在点击时预览原始图像，从这里可以拿到图像的绝对路径listViewItem.SubItems.Add($"{item.Path}");listView1.Items.Add(listViewItem);index++;}listView1.LargeImageList = imageList;//调整显示内容之间的行间距留白SetSpacing(170, 319);}catch (Exception ex){Logger.Logger.Error($"{ex}");}
}

行间距调整

[DllImport("user32.dll", CharSet = CharSet.Auto, SetLastError = false)]
private static extern int SendMessage(IntPtr hWnd, int Msg, int wParam, int lParam);
const int LVM_FIRST = 0X1000;
const int LVM_SETICONSPACING = LVM_FIRST + 53;/// <summary>
/// y 左右间距，x 是上下间距
/// </summary>
/// <param name="x"></param>
/// <param name="y"></param>
public void SetSpacing(Int16 x, Int16 y)
{SendMessage(listView1.Handle, LVM_SETICONSPACING, 0, x * 65536 + y);this.listView1.Refresh();
}

悬浮提示

鼠标悬浮与图片上方就可以显示以下内容：
$“总面积:{item.Area} 最大高度:{item.Height} 最大宽度:{item.Width} 异物个数:{item.Count} 是否报警:{item.IsAlarm}”

private void listView_ItemMouseHover(object sender, ListViewItemMouseHoverEventArgs e)
{ToolTip toolTip = new ToolTip();string itemInfor = e.Item.SubItems[1].Text;toolTip.SetToolTip((e.Item).ListView, itemInfor);
}