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

每个item 都是由委托的paint()函数呈现的。
视图使用现成的QPainter对象调用这个函数，委托应该使用它来正确绘制项目的样式信息，以及模型中项目的索引:

这里就是我们看到的每一个像素点就是在这个函数里 paint 绘制出来的根据model 里面的灰度值

咱们一句一句看一下这个函数

如果像素点是选中状态那么会填充这个矩形显示蓝色

首先，通过使用样式选项的rect属性的最小维度来确定圆的最大可能半径。
利用所提供的模型索引，我们获得了图像中相关像素的亮度值。圆的半径是通过调整亮度以适应项目并从最大可能的半径中减去它来计算的。

这个地方就是求半径的看不懂也没关系这就是它的一种计算方式

写到这里刚才停电了我以为没有了吓我一跳写了一个小时啊
还好有保存

这里就保存画笔的信息
开启抗锯齿模式

还是根据有没有选中像素点画不同的颜色
上面是填充的外部矩形框的颜色
这个是里面圆形的颜色选中以后变为白色
下面一句就是根据半径画一个圆形

有的圆大有的圆小都是由半径决定的半径又是有 model 里面的图像的灰度值决定的

结束

ok 这个文章就结束了他这个 Example 就是用了自定义 model 和 delegate 来完成的
要理解的比较好还是要多看一下 MVD 找一些MVD 的资料看一下

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

Qt学习笔记-----Model/View架构
为了实现数据的存储和表现分离,Qt提供了Model/View架构,包括三个部分,分别是模型(Model),视图(View),委托(delegate). Model用于访问底层数据,也就是说为其他组件访 ...
QT Basic 014 Model/View programming （模型、视图编程）
前言:本文不是纯文本翻译,加入了对概念的理解,纯文本翻译,请看文后的一个链接. Model/View Programming Introduction to Model/View Programmin ...
Qt学习笔记-----Model/View架构之自定义Model
Model/View Framework中提供了模型model的抽象基类QAbstractItemModel, 如果需要自定义模型就需要继承这个类并且实现一些必要的函数. 此外,Qt中又提供了QAbs ...
Qt Model/View/Delegate浅谈 - QAbstractListModel
为什么80%的码农都做不了架构师?>>> 待补充... ##子类化当子类化QAbstractListModel时,必须提供rowCount()和data()这2个函数的实现, ...
Qt Model/View(MVD)模型分析
最近在看Qt的Model/View Framework,在网上搜了搜,好像中文的除了几篇翻译没有什么有价值的文章.E文的除了Qt的官方介绍,其它文章也很少.看到一个老外在blog中写道M ...
第15.22节 PyQt(Python+Qt)入门学习：Model/View架构详解
老猿Python博文目录专栏:使用PyQt开发图形界面Python应用老猿Python博客地址一.简介在PyQt和Qt中,Model/View架构是图形界面开发时用于管理数据和界面展现方式的关 ...
Model/View模型视图
catalog version model 函数遍历视图当前项.选中项 Select SelectionMode SelectionBahavior QItemSelectionModel QT ...
初探 MVP(Model View Presenter) 设计模式
刚刚转入C#开发不久,发现了一个类似于Java里的MVC模式的东东--MVP(Model View Presenter) 模式,个人感觉MVP模式真的和MVC差不多,MVC我这里就不解释了,着重讲讲M ...
Qt Model/View编程介绍
Qt中包含了一系列的项视图类,它们使用model/view的架构去管理数据之间的关系以及它们被展示给用户的方式.这种由这种架构引进的功能分离特性给了开发者很大的灵活性去自定义自己的展示方式,并且提供了 ...

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