Qt 是目前最先進(jìn)、最完整的跨平臺(tái)C++開(kāi)發(fā)工具。它不僅完全實(shí)現(xiàn)了一次編寫(xiě)，所有平臺(tái)無(wú)差別運(yùn)行，更提供了幾乎所有開(kāi)發(fā)過(guò)程中需要用到的工具。如今，Qt已被運(yùn)用于超過(guò)70個(gè)行業(yè)、數(shù)千家企業(yè)，支持?jǐn)?shù)百萬(wàn)設(shè)備及應(yīng)用。

當(dāng)您在平板電腦上使用Qt應(yīng)用程序時(shí)， s就會(huì)生成。如果您想處理tablet事件，需要重新實(shí)現(xiàn)tabletEvent()事件處理程序。當(dāng)用于繪圖的工具(觸控筆)進(jìn)入并離開(kāi)寫(xiě)字板附近時(shí)(即，當(dāng)它關(guān)閉但未按下時(shí))，當(dāng)工具被按下并從中釋放時(shí)，當(dāng)工具在寫(xiě)字板上移動(dòng)時(shí)，以及當(dāng)工具上的一個(gè)按鈕被按下或釋放時(shí)，都會(huì)產(chǎn)生事件。

中可用的信息取決于所使用的設(shè)備，本實(shí)例可以處理多達(dá)三種不同繪圖工具的平板電腦：觸控筆、噴槍和藝術(shù)筆。對(duì)于這些事件，將包含工具的位置，平板電腦上的壓力、按鈕狀態(tài)、垂直傾斜和水平傾斜(即設(shè)備與平板電腦垂直方向之間的角度，如果平板電腦硬件可以提供)。噴槍有指輪，這個(gè)位置也可以在平板電腦事件中找到；藝術(shù)筆提供圍繞垂直于平板表面的軸旋轉(zhuǎn)，因此它可以用于書(shū)法。

在這個(gè)例子中，我們實(shí)現(xiàn)了一個(gè)繪圖程序。您可以用觸控筆在平板電腦上畫(huà)畫(huà)，就像在紙上用鉛筆一樣。當(dāng)用噴槍畫(huà)畫(huà)時(shí)，會(huì)得到一種虛擬的油漆噴霧，手指輪用來(lái)改變噴霧的密度。當(dāng)您用美術(shù)筆繪制時(shí)，會(huì)得到一條線，它的寬度和端點(diǎn)角度取決于筆的旋轉(zhuǎn)，壓力和傾斜也可以被分配來(lái)改變顏色的alpha和飽和度值以及筆畫(huà)的寬度。

本示例包括以下內(nèi)容：

• MainWindow類繼承，創(chuàng)建菜單，并連接它們的槽和信號(hào)。
• TabletCanvas類繼承了并接收tablet事件，它使用事件將其繪制到屏幕外的像素圖上，然后渲染它。
• TabletApplication類繼承了QApplication，這個(gè)類處理平板電腦接近事件。
• main()函數(shù)創(chuàng)建一個(gè)主窗口，并將其顯示為頂層窗口。

Qt技術(shù)交流群：166830288      歡迎一起進(jìn)群討論

在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹医榻B了實(shí)現(xiàn)平板電腦示例的MainWindow類定義和實(shí)現(xiàn)，本文將繼續(xù)介紹TabletCanvas類的定義和實(shí)現(xiàn)，請(qǐng)繼續(xù)關(guān)注哦~

TabletCanvas類定義

TabletCanvas類提供了一個(gè)平面，用戶可以在上面用平板電腦繪圖。

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;
};

畫(huà)布可以改變alpha通道、顏色飽和度和描邊的線寬。我們有一個(gè)枚舉，其中列出了QTabletEvent屬性，可以對(duì)其進(jìn)行調(diào)整。我們分別為m_alphaChannelValuator、m_colorSaturationValuator和m_lineWidthValuator保留了一個(gè)私有變量，并為它們提供了訪問(wèn)函數(shù)。

我們使用m_color在帶有m_pen和m_brush的上繪制，每次接收到時(shí)，從lastPoint到當(dāng)前中給定的點(diǎn)繪制筆畫(huà)，然后將位置和旋轉(zhuǎn)保存在lastPoint中以備下次使用。saveImage()和loadImage()函數(shù)將 保存并加載到磁盤(pán)，像素圖在paintEvent()中繪制在小部件上。

來(lái)自平板的事件解釋是在tabletEvent()中完成的，而paintPixmap()、updateBrush()和updateCursor()是tabletEvent()使用的輔助函數(shù)。

TabletCanvas類實(shí)現(xiàn)

我們從構(gòu)造函數(shù)開(kāi)始：

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);
}

在構(gòu)造函數(shù)中，我們初始化了大多數(shù)類變量。

下面是saveImage()的實(shí)現(xiàn)：

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

實(shí)現(xiàn)了將自身保存到磁盤(pán)的功能，因此我們只需調(diào)用()。

下面是loadImage()的實(shí)現(xiàn)：

bool TabletCanvas::loadImage(const QString &file)
{
bool success = m_pixmap.load(file);

if (success) {
update();
return true;
}
return false;
}

我們只需調(diào)用load()，它從文件中加載圖像。

下面是tabletEvent()的實(shí)現(xiàn)：

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();
}

這個(gè)函數(shù)有三種類型的事件：TabletPress、TabletRelease和TabletMove，它們是在繪圖工具被按下、抬起或在平板上移動(dòng)時(shí)生成的。當(dāng)設(shè)備在平板上按下時(shí)，我們將m_deviceDown設(shè)置為true；然后就知道當(dāng)接收到移動(dòng)事件時(shí)應(yīng)該進(jìn)行繪制。我們已經(jīng)實(shí)現(xiàn)了updateBrush()來(lái)更新m_brush和m_pen，這取決于用戶選擇關(guān)注哪個(gè)tablet事件屬性。updateCursor()函數(shù)選擇一個(gè)光標(biāo)來(lái)表示正在使用的繪圖工具，這樣當(dāng)您將工具懸停在靠近平板電腦的位置時(shí)，就可以看到要繪制哪種筆畫(huà)。

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);
}

如果使用藝術(shù)筆(RotationStylus)，則每個(gè)TabletMove事件也會(huì)調(diào)用updateCursor()，并呈現(xiàn)旋轉(zhuǎn)的光標(biāo)，以便您可以看到筆尖的角度。

下面是paintEvent()的實(shí)現(xiàn)：

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第一次調(diào)用paintEvent()時(shí)，m_pixmap是默認(rèn)構(gòu)造的，所以() 返回true。既然我們知道要渲染到哪個(gè)屏幕，就可以創(chuàng)建具有適當(dāng)分辨率的像素圖了。我們填充窗口的像素圖的大小取決于屏幕分辨率，因?yàn)槭纠恢С挚s放；可能是一個(gè)屏幕的DPI高，而另一個(gè)屏幕的DPI低，我們還需要繪制背景，因?yàn)槟J(rèn)是灰色的。

之后，我們只需在小部件的左上角繪制像素圖。

下面是paintPixmap()的實(shí)現(xiàn)：

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;
}
}

在這個(gè)函數(shù)中，我們根據(jù)工具的移動(dòng)繪制像素圖。如果在平板電腦上使用的工具是觸控筆，我們希望在最后已知的位置和當(dāng)前位置之間畫(huà)一條線。同時(shí)還假設(shè)這是對(duì)任何未知設(shè)備的合理處理，但是用警告更新?tīng)顟B(tài)欄。如果它是一個(gè)噴槍，我們想要繪制一個(gè)充滿柔和漸變的圓圈，其密度可以取決于各種事件參數(shù)。默認(rèn)情況下，它取決于切向壓力，即噴槍上手指輪的位置。如果工具是旋轉(zhuǎn)筆，我們通過(guò)繪制梯形筆畫(huà)段來(lái)模擬毛氈標(biāo)記。

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()中，我們?cè)O(shè)置用于繪圖的筆和畫(huà)筆來(lái)匹配m_alphaChannelValuator、m_lineWidthValuator、m_colorSaturationValuator和m_color，將檢查為每個(gè)變量設(shè)置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);

我們獲取當(dāng)前drawingcolor的色調(diào)、飽和度、值和alpha值，hValue和vValue設(shè)置為水平和垂直傾斜，作為0到255之間的數(shù)字。原始值的度數(shù)從-60到60，即0等于-60、127等于0、255等于60度，測(cè)量的角度是在設(shè)備和平板的垂線之間(參見(jiàn) 的插圖)。

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通道是一個(gè)介于0和255之間的數(shù)字，其中0是透明的，255是不透明的，或者是一個(gè)浮點(diǎn)數(shù)，其中0是透明的，1.0是不透明的，()返回0.0到1.0之間的壓力值。當(dāng)筆垂直于平板時(shí)，我們得到的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之間的整數(shù)或0到1之間的浮點(diǎn)值給出，我們選擇將alpha表示為整數(shù)，因此使用整數(shù)值調(diào)用()，這意味著我們需要將壓強(qiáng)乘以0到255之間的一個(gè)數(shù)字。

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);
}

如果這樣選擇，筆畫(huà)的寬度可以隨著壓力的增加而增加。但是當(dāng)筆的寬度由傾斜控制時(shí)，我們讓寬度隨著工具和平板垂直線之間的角度而增加。

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);
}
}

我們最后檢查指針是觸控筆還是橡皮擦，如果是橡皮擦，將顏色設(shè)置為像素圖的背景色，并讓壓力決定筆的寬度，否則設(shè)置之前在函數(shù)中確定的顏色。

未完待續(xù)，下期繼續(xù)......

Qt Widget組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個(gè)C ++庫(kù)，代表一組控件，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網(wǎng)格組件：提供了一套完整的標(biāo)準(zhǔn) QTableView 函數(shù)和傳統(tǒng)組件無(wú)法實(shí)現(xiàn)的獨(dú)特功能。使您能夠?qū)⒉煌瑏?lái)源的各類數(shù)據(jù)加載到一個(gè)快速、靈活且功能強(qiáng)大的可編輯網(wǎng)格中，支持排序、分組、報(bào)告、創(chuàng)建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應(yīng)用程序配備可?？棵姘搴涂赏？抗ぞ邫凇：谏?、白色、藍(lán)色調(diào)色板完全支持 Visual Studio 2019 主題！