原创|使用教程|编辑:龚雪|2024-10-14 11:27:38.947|阅读 11 次
概述:本文主要介绍如何在Qt应用程序中使用Wacom平板电脑,欢迎下载最新版组件体验~
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。
当您在平板电脑上使用Qt应用程序时, s就会生成。如果您想处理tablet事件,需要重新实现tabletEvent()事件处理程序。当用于绘图的工具(触控笔)进入并离开写字板附近时(即,当它关闭但未按下时),当工具被按下并从中释放时,当工具在写字板上移动时,以及当工具上的一个按钮被按下或释放时,都会产生事件。
中可用的信息取决于所使用的设备,本实例可以处理多达三种不同绘图工具的平板电脑:触控笔、喷枪和艺术笔。对于这些事件,将包含工具的位置,平板电脑上的压力、按钮状态、垂直倾斜和水平倾斜(即设备与平板电脑垂直方向之间的角度,如果平板电脑硬件可以提供)。喷枪有指轮,这个位置也可以在平板电脑事件中找到;艺术笔提供围绕垂直于平板表面的轴旋转,因此它可以用于书法。
在这个例子中,我们实现了一个绘图程序。您可以用触控笔在平板电脑上画画,就像在纸上用铅笔一样。当用喷枪画画时,会得到一种虚拟的油漆喷雾,手指轮用来改变喷雾的密度。当您用美术笔绘制时,会得到一条线,它的宽度和端点角度取决于笔的旋转,压力和倾斜也可以被分配来改变颜色的alpha和饱和度值以及笔画的宽度。
本示例包括以下内容:
Qt技术交流群:166830288 欢迎一起进群讨论
在上文中(点击这里回顾>>),我们为大家介绍了实现平板电脑示例的MainWindow类定义和实现,本文将继续介绍TabletCanvas类的定义和实现,请继续关注哦~
TabletCanvas类提供了一个平面,用户可以在上面用平板电脑绘图。
class TabletCanvas : public QWidget { Q_OBJECT public: 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的上绘制,每次接收到时,从lastPoint到当前中给定的点绘制笔画,然后将位置和旋转保存在lastPoint中以备下次使用。saveImage()和loadImage()函数将 保存并加载到磁盘,像素图在paintEvent()中绘制在小部件上。
来自平板的事件解释是在tabletEvent()中完成的,而paintPixmap()、updateBrush()和updateCursor()是tabletEvent()使用的辅助函数。
我们从构造函数开始:
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); }
实现了将自身保存到磁盘的功能,因此我们只需调用()。
下面是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是默认构造的,所以() 返回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度,测量的角度是在设备和平板的垂线之间(参见 的插图)。
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); }
的alpha通道是一个介于0和255之间的数字,其中0是透明的,255是不透明的,或者是一个浮点数,其中0是透明的,1.0是不透明的,()返回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表示为整数,因此使用整数值调用(),这意味着我们需要将压强乘以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); } }
我们最后检查指针是触控笔还是橡皮擦,如果是橡皮擦,将颜色设置为像素图的背景色,并让压力决定笔的宽度,否则设置之前在函数中确定的颜色。
未完待续,下期继续......
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自:慧都网