Qt 用 MVD(model view delegate) 模式把图片变为灰度像素点 [官方Example]

前言:

今天看到一个好玩的 qt 官方的 demo

可以把图片变为一个个灰度的像素点

先来看一下

这个是 qt 的图片
在这里插入图片描述
这个是我加载的我的头像

在这里插入图片描述

不过看这个 demo
需要了解 Qt 的 MVD 模式

model view delegate

如果你没有听说过 mvd mvc 应该听说过吧 model view control

qt 这里把control 换成了 delegate 委托其实差不多

我这里做个简单的介绍大体了解熟悉 m v d

mvd(model - view - delegate)

很早之前 list 或者 view 在加载数据进行显示时如果数据量比较大就会比较卡
比如 5w 条数据,他的内部的实现逻辑是把这些数据全部加载到内存
但是他一页就显示 100行数据
后面为了解决这个问题就改为既用既加载用100行数据那么我就只加载100行
翻页或者下拉滑动条我在加载下面的数据到内存
又引来了个新问题如果我快速的翻页或者拖拉滑动条那么也会出现卡顿白屏等
数据加载跟不上的现象

让一个类来处理数据的加载和显示交互难免太庞大

这个 MVD 就出来了

下面挂几个结构图说一下 MVD

在这里插入图片描述

Data 就是数据比如从文件中加载,数据库中加载 ,网口，串口数据等

Model 类负责加载数据

View类负责显示数据,具体显示什么样的数据,全都有 delegate 来决定

Delegate 负责把 model 的数据做一些处理给 view 显示
比如 model 的数据是用户消费信心
delegate 可以根据不同的形式 paint 成柱状图饼图条形图给到 view 显示
view 用户操作界面修改了一些信息还是通过 delegate 去修改 model

这里就做一些简单的介绍
具体的 MVD 还是要去看 MVD 的文章

系统提供模式这个模式只能完成一些基本的简单的功能
如果想完成一些其他的我们要重写 model 和 delegate

这个 demo 也就是这样的操作咱们来看一下

Pixelator Example

介绍:
默认情况下，QTreeView、QTableView和QListView使用一个标准的项目委托来显示和编辑一组公共数据类型，这对于许多应用程序来说已经足够了。但是，应用程序可能需要以特定的方式表示数据项，或者为呈现更专门的数据类型提供支持，这通常需要使用自定义委托

在本例中，我们将展示如何使用自定义委托来修改标准视图的外观。为此，我们实现了以下组件:
一种模型，它将图像中的每个像素表示为一个数据项，其中每个数据项包含对应像素的亮度值。
自定义委托，它使用模型提供的信息将每个像素表示为白色背景上的黑色圆圈，圆圈的半径对应于像素的黑暗。

此示例对于希望实现自己的表模型或自定义委托的开发人员可能很有用.

还是先看一下类的结构
在这里插入图片描述

一个自定义的 model imagemodel
一个自定义的 delegate pixeldelegate
一个 mainwindow 主界面
一个 main 函数

还有一个资源文件 qt.png 64* 64 像素的

在这里插入图片描述

ok 咱们来看 main 函数

main

在这里插入图片描述

初始化资源

实例化 mainwindow

打开了一个图片

MainWindow

在这里插入图片描述

这个 Example 有个打印图片的功能咱们这里就不看了只看 MVD 的模式把灰度图显示出来

类结构也很简单

ImageModel 等会看

看下 openImage

在这里插入图片描述

这个函数也没啥就是加载一个本地的图片
然后更新一下 view

mainwindow 我们只需要看这一点就够了

在这里插入图片描述

一个 tableView

setShowGrid 显示不显示网格效果如下

这是不显示网格
在这里插入图片描述

这是显示网格
在这里插入图片描述

可以查一下就是 64x64 行列因为这个图片就是 64*64像素的每个格子一个像素点

view->setModel(model);
PixelDelegate *delegate = new PixelDelegate(this);
view->setItemDelegate(delegate);

给 view 设置了 model 是我们的 ImageModel
给 view 设置了委托delegate 是我们的PiexlDelegate

所以我们主要看这两个类就行了

ImageModel

在这里插入图片描述
由于我们只需要一个简单的只读表模型，所以我们只需要实现一些函数来指示图像的维数并向其他组件提供数据。

在这里插入图片描述

这个函数在上面说的加载 image 有调用这个接口

在这里插入图片描述
这个函数返回就是行和列就是返回的 64*64

由于图像是一个简单的二维结构，所以这些函数的父参数是未使用的。它们都简单地从底层图像对象返回相关大小。
data()函数返回与给定模型索引对应的项的数据，其格式适合于特定的角色

在这里插入图片描述 :这个函数就是数据函数了把图片转为灰度显示的函数了

在这个实现中，我们只检查模型索引是否有效，并且请求的角色是DisplayRole。如果是，则返回图像中相关像素的灰度值;否则，将返回空模型索引。
这个模型可以和QTableView一起显示图像中像素的整数值。但是，我们将实现一个自定义委托来以更艺术的方式显示此信息

拆开来看
modelImage.pixle(index.column(),indelx.row())

在这里插入图片描述

返回给定像素的颜色 (传入的是像素点位置)
在这里插入图片描述
这个就是返回的灰度值传入 rgb

在这里插入图片描述

我们返回(1,1)作为标题项的大小提示。如果我们不这样做，标题将默认为更大的尺寸，从而阻止我们显示非常小的项目(可以使用像素大小组合框来指定)。

ok 到这这里类就结束了

这个类的作用就是数据数据就是一张图片每个像素点的灰度值
一共 64*64个像素点

那么 data 函数就执行 64*64次

那么灰度值只是一个int 数字啊
具体怎么显示出来的要看 delegate 是怎么实现的了

PixelDelegate

在这里插入图片描述

这个类只提供了委托的基本特性，我们子类化QAbstractItemDelegate而不是QItemDelegate。
我们只需要在这个类中重新实现paint()和sizeHint()。
但是，我们还提供了一个特定于委托的setPixelSize()函数，这样我们就可以通过信号和插槽机制来更改委托的行为。

这个 setPixelSize()函数就是在这里插入图片描述

修改这个通过信号槽改变私有变量 pixelSize

在这里插入图片描述

默认是 12px

在这里插入图片描述
这里说一下参数 QmodelIndex &indelx
view和delegate都可以使用QModelIndex，但是view只能使用QModelIndex进行读取，delegate只能修改。所以要获取 model 的数据都是通过这个接口 modelIndex .model.data