「Qt Widget中文示例指南」如何实现一个平板电脑示例？（二）

server/2024/10/22 15:38:44/

Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写，所有平台无差别运行，更提供了几乎所有开发过程中需要用到的工具。如今，Qt已被运用于超过70个行业、数千家企业，支持数百万设备及应用。

「Qt Widget中文示例指南」如何实现一个平板电脑示例？

当您在平板电脑上使用Qt应用程序时， QTabletEvents就会生成。如果您想处理tablet事件，需要重新实现tabletEvent()事件处理程序。当用于绘图的工具(触控笔)进入并离开写字板附近时(即，当它关闭但未按下时)，当工具被按下并从中释放时，当工具在写字板上移动时，以及当工具上的一个按钮被按下或释放时，都会产生事件。

QTabletEvent中可用的信息取决于所使用的设备，本实例可以处理多达三种不同绘图工具的平板电脑：触控笔、喷枪和艺术笔。对于这些事件，将包含工具的位置，平板电脑上的压力、按钮状态、垂直倾斜和水平倾斜(即设备与平板电脑垂直方向之间的角度，如果平板电脑硬件可以提供)。喷枪有指轮，这个位置也可以在平板电脑事件中找到；艺术笔提供围绕垂直于平板表面的轴旋转，因此它可以用于书法。

在这个例子中，我们实现了一个绘图程序。您可以用触控笔在平板电脑上画画，就像在纸上用铅笔一样。当用喷枪画画时，会得到一种虚拟的油漆喷雾，手指轮用来改变喷雾的密度。当您用美术笔绘制时，会得到一条线，它的宽度和端点角度取决于笔的旋转，压力和倾斜也可以被分配来改变颜色的alpha和饱和度值以及笔画的宽度。

本示例包括以下内容：

  • MainWindow类继承QMainWindow，创建菜单，并连接它们的槽和信号。
  • TabletCanvas类继承了QWidget并接收tablet事件，它使用事件将其绘制到屏幕外的像素图上，然后渲染它。
  • TabletApplication类继承了QApplication，这个类处理平板电脑接近事件。
  • main()函数创建一个主窗口，并将其显示为顶层窗口。

点击获取Qt Widget组件下载

在上文中（点击这里回顾>>），我们为大家介绍了实现平板电脑示例的MainWindow类定义和实现，本文将继续介绍TabletCanvas类的定义和实现，请继续关注哦~

TabletCanvas类定义

TabletCanvas类提供了一个平面，用户可以在上面用平板电脑绘图。

class TabletCanvas : public QWidget
{
Q_OBJECTpublic:
enum Valuator { PressureValuator, TangentialPressureValuator,
TiltValuator, VTiltValuator, HTiltValuator, NoValuator };
Q_ENUM(Valuator)TabletCanvas();bool saveImage(const QString &file);
bool loadImage(const QString &file);
void clear();
void setAlphaChannelValuator(Valuator type)
{ m_alphaChannelValuator = type; }
void setColorSaturationValuator(Valuator type)
{ m_colorSaturationValuator = type; }
void setLineWidthType(Valuator type)
{ m_lineWidthValuator = type; }
void setColor(const QColor &c)
{ if (c.isValid()) m_color = c; }
QColor color() const
{ return m_color; }
void setTabletDevice(QTabletEvent *event)
{ updateCursor(event); }protected:
void tabletEvent(QTabletEvent *event) override;
void paintEvent(QPaintEvent *event) override;
void resizeEvent(QResizeEvent *event) override;private:
void initPixmap();
void paintPixmap(QPainter &painter, QTabletEvent *event);
Qt::BrushStyle brushPattern(qreal value);
static qreal pressureToWidth(qreal pressure);
void updateBrush(const QTabletEvent *event);
void updateCursor(const QTabletEvent *event);Valuator m_alphaChannelValuator = TangentialPressureValuator;
Valuator m_colorSaturationValuator = NoValuator;
Valuator m_lineWidthValuator = PressureValuator;
QColor m_color = Qt::red;
QPixmap m_pixmap;
QBrush m_brush;
QPen m_pen;
bool m_deviceDown = false;struct Point {
QPointF pos;
qreal pressure = 0;
qreal rotation = 0;
} lastPoint;
};

画布可以改变alpha通道、颜色饱和度和描边的线宽。我们有一个枚举，其中列出了QTabletEvent属性，可以对其进行调整。我们分别为m_alphaChannelValuator、m_colorSaturationValuator和m_lineWidthValuator保留了一个私有变量，并为它们提供了访问函数。

我们使用m_color在带有m_pen和m_brush的QPixmap上绘制，每次接收到QTabletEvent时，从lastPoint到当前QTabletEvent中给定的点绘制笔画，然后将位置和旋转保存在lastPoint中以备下次使用。saveImage()和loadImage()函数将QPixmap 保存并加载到磁盘，像素图在paintEvent()中绘制在小部件上。

来自平板的事件解释是在tabletEvent()中完成的，而paintPixmap()、updateBrush()和updateCursor()是tabletEvent()使用的辅助函数。

TabletCanvas类实现

我们从构造函数开始：

TabletCanvas::TabletCanvas()
: QWidget(nullptr), m_brush(m_color)
, m_pen(m_brush, 1.0, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin)
{
resize(500, 500);
setAutoFillBackground(true);
setAttribute(Qt::WA_TabletTracking);
}

在构造函数中，我们初始化了大多数类变量。

下面是saveImage()的实现：

bool TabletCanvas::saveImage(const QString &file)
{
return m_pixmap.save(file);
}

QPixmap实现了将自身保存到磁盘的功能，因此我们只需调用save()。

下面是loadImage()的实现：

bool TabletCanvas::loadImage(const QString &file)
{
bool success = m_pixmap.load(file);if (success) {
update();
return true;
}
return false;
}

我们只需调用load()，它从文件中加载图像。

下面是tabletEvent()的实现：

void TabletCanvas::tabletEvent(QTabletEvent *event)
{
switch (event->type()) {
case QEvent::TabletPress:
if (!m_deviceDown) {
m_deviceDown = true;
lastPoint.pos = event->position();
lastPoint.pressure = event->pressure();
lastPoint.rotation = event->rotation();
}
break;
case QEvent::TabletMove:
#ifndef Q_OS_IOS
if (event->pointingDevice() && event->pointingDevice()->capabilities().testFlag(QPointingDevice::Capability::Rotation))
updateCursor(event);
#endif
if (m_deviceDown) {
updateBrush(event);
QPainter painter(&m_pixmap);
paintPixmap(painter, event);
lastPoint.pos = event->position();
lastPoint.pressure = event->pressure();
lastPoint.rotation = event->rotation();
}
break;
case QEvent::TabletRelease:
if (m_deviceDown && event->buttons() == Qt::NoButton)
m_deviceDown = false;
update();
break;
default:
break;
}
event->accept();
}

这个函数有三种类型的事件：TabletPress、TabletRelease和TabletMove，它们是在绘图工具被按下、抬起或在平板上移动时生成的。当设备在平板上按下时，我们将m_deviceDown设置为true；然后就知道当接收到移动事件时应该进行绘制。我们已经实现了updateBrush()来更新m_brush和m_pen，这取决于用户选择关注哪个tablet事件属性。updateCursor()函数选择一个光标来表示正在使用的绘图工具，这样当您将工具悬停在靠近平板电脑的位置时，就可以看到要绘制哪种笔画。

void TabletCanvas::updateCursor(const QTabletEvent *event)
{
QCursor cursor;
if (event->type() != QEvent::TabletLeaveProximity) {
if (event->pointerType() == QPointingDevice::PointerType::Eraser) {
cursor = QCursor(QPixmap(":/images/cursor-eraser.png"), 3, 28);
} else {
switch (event->deviceType()) {
case QInputDevice::DeviceType::Stylus:
if (event->pointingDevice()->capabilities().testFlag(QPointingDevice::Capability::Rotation)) {
QImage origImg(QLatin1String(":/images/cursor-felt-marker.png"));
QImage img(32, 32, QImage::Format_ARGB32);
QColor solid = m_color;
solid.setAlpha(255);
img.fill(solid);
QPainter painter(&img);
QTransform transform = painter.transform();
transform.translate(16, 16);
transform.rotate(event->rotation());
painter.setTransform(transform);
painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
painter.drawImage(-24, -24, origImg);
painter.setCompositionMode(QPainter::CompositionMode_HardLight);
painter.drawImage(-24, -24, origImg);
painter.end();
cursor = QCursor(QPixmap::fromImage(img), 16, 16);
} else {
cursor = QCursor(QPixmap(":/images/cursor-pencil.png"), 0, 0);
}
break;
case QInputDevice::DeviceType::Airbrush:
cursor = QCursor(QPixmap(":/images/cursor-airbrush.png"), 3, 4);
break;
default:
break;
}
}
}
setCursor(cursor);
}

如果使用艺术笔(RotationStylus)，则每个TabletMove事件也会调用updateCursor()，并呈现旋转的光标，以便您可以看到笔尖的角度。

下面是paintEvent()的实现：

void TabletCanvas::initPixmap()
{
qreal dpr = devicePixelRatio();
QPixmap newPixmap = QPixmap(qRound(width() * dpr), qRound(height() * dpr));
newPixmap.setDevicePixelRatio(dpr);
newPixmap.fill(Qt::white);
QPainter painter(&newPixmap);
if (!m_pixmap.isNull())
painter.drawPixmap(0, 0, m_pixmap);
painter.end();
m_pixmap = newPixmap;
}void TabletCanvas::paintEvent(QPaintEvent *event)
{
if (m_pixmap.isNull())
initPixmap();
QPainter painter(this);
QRect pixmapPortion = QRect(event->rect().topLeft() * devicePixelRatio(),
event->rect().size() * devicePixelRatio());
painter.drawPixmap(event->rect().topLeft(), m_pixmap, pixmapPortion);
}

Qt第一次调用paintEvent()时，m_pixmap是默认构造的，所以QPixmap::isNull() 返回true。既然我们知道要渲染到哪个屏幕，就可以创建具有适当分辨率的像素图了。我们填充窗口的像素图的大小取决于屏幕分辨率，因为示例不支持缩放；可能是一个屏幕的DPI高，而另一个屏幕的DPI低，我们还需要绘制背景，因为默认是灰色的。

之后，我们只需在小部件的左上角绘制像素图。

下面是paintPixmap()的实现：

void TabletCanvas::paintPixmap(QPainter &painter, QTabletEvent *event)
{
static qreal maxPenRadius = pressureToWidth(1.0);
painter.setRenderHint(QPainter::Antialiasing);switch (event->deviceType()) {
case QInputDevice::DeviceType::Airbrush:
{
painter.setPen(Qt::NoPen);
QRadialGradient grad(lastPoint.pos, m_pen.widthF() * 10.0);
QColor color = m_brush.color();
color.setAlphaF(color.alphaF() * 0.25);
grad.setColorAt(0, m_brush.color());
grad.setColorAt(0.5, Qt::transparent);
painter.setBrush(grad);
qreal radius = grad.radius();
painter.drawEllipse(event->position(), radius, radius);
update(QRect(event->position().toPoint() - QPoint(radius, radius), QSize(radius * 2, radius * 2)));
}
break;
case QInputDevice::DeviceType::Puck:
case QInputDevice::DeviceType::Mouse:
{
const QString error(tr("This input device is not supported by the example."));
#if QT_CONFIG(statustip)
QStatusTipEvent status(error);
QCoreApplication::sendEvent(this, &status);
#else
qWarning() << error;
#endif
}
break;
default:
{
const QString error(tr("Unknown tablet device - treating as stylus"));
#if QT_CONFIG(statustip)
QStatusTipEvent status(error);
QCoreApplication::sendEvent(this, &status);
#else
qWarning() << error;
#endif
}
Q_FALLTHROUGH();
case QInputDevice::DeviceType::Stylus:
if (event->pointingDevice()->capabilities().testFlag(QPointingDevice::Capability::Rotation)) {
m_brush.setStyle(Qt::SolidPattern);
painter.setPen(Qt::NoPen);
painter.setBrush(m_brush);
QPolygonF poly;
qreal halfWidth = pressureToWidth(lastPoint.pressure);
QPointF brushAdjust(qSin(qDegreesToRadians(-lastPoint.rotation)) * halfWidth,
qCos(qDegreesToRadians(-lastPoint.rotation)) * halfWidth);
poly << lastPoint.pos + brushAdjust;
poly << lastPoint.pos - brushAdjust;
halfWidth = m_pen.widthF();
brushAdjust = QPointF(qSin(qDegreesToRadians(-event->rotation())) * halfWidth,
qCos(qDegreesToRadians(-event->rotation())) * halfWidth);
poly << event->position() - brushAdjust;
poly << event->position() + brushAdjust;
painter.drawConvexPolygon(poly);
update(poly.boundingRect().toRect());
} else {
painter.setPen(m_pen);
painter.drawLine(lastPoint.pos, event->position());
update(QRect(lastPoint.pos.toPoint(), event->position().toPoint()).normalized()
.adjusted(-maxPenRadius, -maxPenRadius, maxPenRadius, maxPenRadius));
}
break;
}
}

在这个函数中，我们根据工具的移动绘制像素图。如果在平板电脑上使用的工具是触控笔，我们希望在最后已知的位置和当前位置之间画一条线。同时还假设这是对任何未知设备的合理处理，但是用警告更新状态栏。如果它是一个喷枪，我们想要绘制一个充满柔和渐变的圆圈，其密度可以取决于各种事件参数。默认情况下，它取决于切向压力，即喷枪上手指轮的位置。如果工具是旋转笔，我们通过绘制梯形笔画段来模拟毛毡标记。

case QInputDevice::DeviceType::Airbrush:
{
painter.setPen(Qt::NoPen);
QRadialGradient grad(lastPoint.pos, m_pen.widthF() * 10.0);
QColor color = m_brush.color();
color.setAlphaF(color.alphaF() * 0.25);
grad.setColorAt(0, m_brush.color());
grad.setColorAt(0.5, Qt::transparent);
painter.setBrush(grad);
qreal radius = grad.radius();
painter.drawEllipse(event->position(), radius, radius);
update(QRect(event->position().toPoint() - QPoint(radius, radius), QSize(radius * 2, radius * 2)));
}
break;

在updateBrush()中，我们设置用于绘图的笔和画笔来匹配m_alphaChannelValuator、m_lineWidthValuator、m_colorSaturationValuator和m_color，将检查为每个变量设置m_brush和m_pen的代码：

void TabletCanvas::updateBrush(const QTabletEvent *event)
{
int hue, saturation, value, alpha;
m_color.getHsv(&hue, &saturation, &value, &alpha);int vValue = int(((event->yTilt() + 60.0) / 120.0) * 255);
int hValue = int(((event->xTilt() + 60.0) / 120.0) * 255);

我们获取当前drawingcolor的色调、饱和度、值和alpha值，hValue和vValue设置为水平和垂直倾斜，作为0到255之间的数字。原始值的度数从-60到60，即0等于-60、127等于0、255等于60度，测量的角度是在设备和平板的垂线之间(参见 QTabletEvent 的插图)。

switch (m_alphaChannelValuator) {
case PressureValuator:
m_color.setAlphaF(event->pressure());
break;
case TangentialPressureValuator:
if (event->deviceType() == QInputDevice::DeviceType::Airbrush)
m_color.setAlphaF(qMax(0.01, (event->tangentialPressure() + 1.0) / 2.0));
else
m_color.setAlpha(255);
break;
case TiltValuator:
m_color.setAlpha(std::max(std::abs(vValue - 127),
std::abs(hValue - 127)));
break;
default:
m_color.setAlpha(255);
}

QColor的alpha通道是一个介于0和255之间的数字，其中0是透明的，255是不透明的，或者是一个浮点数，其中0是透明的，1.0是不透明的，pressure()返回0.0到1.0之间的压力值。当笔垂直于平板时，我们得到的alpha值最小(即颜色最透明)，选择垂直和水平倾斜值中的最大值。

switch (m_colorSaturationValuator) {
case VTiltValuator:
m_color.setHsv(hue, vValue, value, alpha);
break;
case HTiltValuator:
m_color.setHsv(hue, hValue, value, alpha);
break;
case PressureValuator:
m_color.setHsv(hue, int(event->pressure() * 255.0), value, alpha);
break;
default:
;
}

HSV颜色模型中的色彩饱和度可以用0到255之间的整数或0到1之间的浮点值给出，我们选择将alpha表示为整数，因此使用整数值调用setHsv()，这意味着我们需要将压强乘以0到255之间的一个数字。

switch (m_lineWidthValuator) {
case PressureValuator:
m_pen.setWidthF(pressureToWidth(event->pressure()));
break;
case TiltValuator:
m_pen.setWidthF(std::max(std::abs(vValue - 127),
std::abs(hValue - 127)) / 12);
break;
default:
m_pen.setWidthF(1);
}

如果这样选择，笔画的宽度可以随着压力的增加而增加。但是当笔的宽度由倾斜控制时，我们让宽度随着工具和平板垂直线之间的角度而增加。

if (event->pointerType() == QPointingDevice::PointerType::Eraser) {
m_brush.setColor(Qt::white);
m_pen.setColor(Qt::white);
m_pen.setWidthF(event->pressure() * 10 + 1);
} else {
m_brush.setColor(m_color);
m_pen.setColor(m_color);
}
}

我们最后检查指针是触控笔还是橡皮擦，如果是橡皮擦，将颜色设置为像素图的背景色，并让压力决定笔的宽度，否则设置之前在函数中确定的颜色。

未完待续，下期继续......

Qt Widget组件推荐
  • QtitanRibbon - Ribbon UI组件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
  • QtitanChart - Qt类图表组件：是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
  • QtitanDataGrid - Qt网格组件：提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中，支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
  • QtitanDocking：允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题！

http://www.ppmy.cn/server/133938.html

相关文章

Win安装Redis

Win安装Redis

目录 1、下载 2、解压文件并修改名称 3、前台简单启动 4、将redis设置成服务后台启动 5、命令启停redis 6、配置文件设置 1、下载 【下载地址】 2、解压文件并修改名称 3、前台简单启动 redis-server.exe redis.windows.conf 4、将redis设置成服务后台启动 redis-server -…
阅读更多...
MedSAM微调版，自动生成 Prompt 嵌入实现图像分割！

MedSAM微调版，自动生成 Prompt 嵌入实现图像分割！

最近提出的Segment Anything Model (SAM)等基础模型在图像分割任务上取得了显著的成果。 然而&#xff0c;这些模型通常需要通过人工设计的 Prompt &#xff08;如边界框&#xff09;进行用户交互&#xff0c;这限制了它们的部署到下游任务。 将这些模型适应到具有完全 Token 数…
阅读更多...
Flink窗口分配器WindowAssigner

Flink窗口分配器WindowAssigner

前言 Flink 数据流经过 keyBy 分组后&#xff0c;下一步就是 WindowAssigner。 WindowAssigner 定义了 stream 中的元素如何被分发到各个窗口&#xff0c;元素可以被分发到一个或多个窗口中&#xff0c;Flink 内置了常用的窗口分配器&#xff0c;包括&#xff1a;tumbling wi…
阅读更多...
oracle 12c adg 部署

oracle 12c adg 部署

oracle 12C 搭建Active Data Gurad(主从实时同步) Oracle版本: Oracle Database 12c Enterprise Edition Release 12.2.0.1.0 - 64bit Production 操作前须知: 基于两个单 机oracle 进行。 需要先自行安装完成oracle12c ​修改host &#xff0c;oem 为主&#xff0c;oracle5…
阅读更多...
FreeRTOS的中断管理

FreeRTOS的中断管理

事件 嵌入式实时系统必须对源自环境的事件采取行动。例如&#xff0c;到达以太网外围设备的数据包&#xff08;事件&#xff09;可能需要传递到TCP/IP堆栈进行处理&#xff08;动作&#xff09;。非普通系统必须为来自多个来源的事件提供服务&#xff0c;所有这些事件都有不同…
阅读更多...
React 进阶阶段学习计划

React 进阶阶段学习计划

React 进阶阶段学习计划 目标 掌握自定义Hooks的创建和使用。深入理解上下文&#xff08;Context&#xff09;和Redux的高级用法。学会服务端渲染&#xff08;SSR&#xff09;。深入探讨性能优化技巧。 学习内容 自定义Hooks 创建和使用自定义Hooks 自定义Hooks&#xff1…
阅读更多...
全天候风险平价策略下载 | Quantlab AI v0.2：OpenAI的Swarm适配国内大模型（附python代码下载）

全天候风险平价策略下载 | Quantlab AI v0.2：OpenAI的Swarm适配国内大模型（附python代码下载）

原创内容第679篇&#xff0c;专注量化投资、个人成长与财富自由。 今天我们来实现服务端策略下载&#xff0c;下载后支持在本地调试运作&#xff0c;及查看源代码。 通过服务器下载策略的代码&#xff1a; login_required def down_strategy(request, task_id: str):task m…
阅读更多...
基于深度学习的设备异常检测与预测性维护

基于深度学习的设备异常检测与预测性维护

基于深度学习的设备异常检测与预测性维护是一项利用深度学习技术分析设备运行数据&#xff0c;实时检测设备运行过程中的异常情况&#xff0c;并预测未来可能的故障&#xff0c;以便提前进行维护&#xff0c;防止意外停机和生产中断。它在工业领域应用广泛&#xff0c;特别是在…
阅读更多...
最新文章

Copyright @ 2022~2023