第三代软件开发-固定区域截图

关键字： Qt、 Qml、 关键字3、 关键字4、 关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目！这个项目结合了 QML（Qt Meta-Object Language）和 C++ 的强大功能，旨在开发出色的用户界面和高性能的后端逻辑。

在项目中，我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件，我们能够迅速开发出丰富多样的界面效果和动画效果。同时，我们利用 QML 强大的集成能力，轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面，我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言，能够提供卓越的性能和可扩展性。我们的团队致力于优化代码，减少资源消耗，以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣，还是需要我们为您构建复杂的用户界面和后端逻辑，我们都随时准备为您提供支持。请随时联系我们，让我们一同打造现代化、高性能的 QML & C++ 项目！

重要说明☝

☀该专栏在第三代软开发更新完将涨价

固定区域截图

其实在Ubuntu 下，也没有找到好的截图工具，之前Windows下都是使用Snipaste，结果发现作者还没有开发Linux的版本，而项目也有截图的需求，不过我们的截图很简单，就是把某一固定的区域保存成图片，在说直白点，就是把某一个控件保存成图片。

QWidget 版本

之前QWidget下就有这个功能，我先找一下QWidget下的实现代码

/*** @brief XXXXXXX::snapshot* 快照功能* 这个暂未开启*/
void XXXXXXX::snapshot(QString path)
{QRect rect = ui->widget_customPlot->geometry();                              // 截图区域QPixmap p = ui->widget_customPlot->grab(rect);                               // 获取谁的RGB
#ifdef QT_NO_DEBUGif(!p.save(path,"png")){qWarning()<<"save snapshot failed" << LOCATION;}
#elseQ_UNUSED(path)QString filePathName = "widget";filePathName += QDateTime::currentDateTime().toString("yyyy-MM-dd hh-mm-ss-zzz");filePathName += ".png";if(!p.save(filePathName,"png")){qDebug()<<"save snapshot failed";}
#endif}

QML 版本

有了在QWidget下的经验，我相信Qt 在Qml 下也为我们做了这接口，所以百度下下。代码如下

function snapshot()
{rect_drawArea.grabToImage(function(result){result.saveToFile("./T_Image/" + UserProfile.userName "/" +turing_QCustomPlotForThyroid_up"_" + turing_QCustomPlotForThyroid_u"_" +Math.floor(new Date()) +".png")   // save to filescreenshotImage.source = result.url;screenshotRect.visible = truescreenshotAnimation.start()hidescreenshotRect.start()});
}

这里就有人会发现还加了别的代码了，是的，我还给他写了一个简单的动画，类似咱们手机截图那样，缩小到右下角，并小时，代码如下：

/// 截图展示框
Rectangle
{id:screenshotRectx:0y:0width: parent.widthheight: parent.heightvisible: falsecolor: "transparent"Image {id: screenshotImageanchors.fill: parentanchors.margins: 2}
}
ParallelAnimation {id: screenshotAnimationrunning: falseNumberAnimation { target: screenshotRect; property: "y";from: 0; to: rect_drawArea.height-10; duration: 300}NumberAnimation { target: screenshotRect; property: "width";from: rect_drawArea.width; to: 10; duration: 300}NumberAnimation { target: screenshotRect; property: "height";from: rect_drawArea.height; to: 10; duration: 300}
}

上面的代码光是缩小了，还得消失呢，我就偷懒了，又给了一个定时器

    Timer{id:hidescreenshotRectrepeat: falseinterval: 300running: falseonTriggered: screenshotRect.visible = false}

自由截图

！！！ 以下代码并未在项目中实现

要使用 QT QML 实现自由截图，需要使用 Qt 的 QPixmap 和 QWidget 类，以及 QML 的 Canvas 元素和 Image 元素。下面是一个简单的示例代码，可以在 Qt Quick 应用程序中使用 QML 实现自由截图功能：
首先，在 main.cpp 文件中包含必要的头文件，并创建一个 Stopwatch 类继承自 QObject，用于控制截图的启动和停止：

#include <QApplication>  
#include <QDeclarativeView>  
#include <QDeclarativeContext>
class Stopwatch : public QObject  
{
public:  Stopwatch();  Q_INVOKABLE bool isRunning() const;  
public slots:  void start();  void stop();  
private:  bool m_running;  
};  

然后在 main.h 文件中添加必要的头文件和声明：

#ifndef MAIN_H  
#define MAIN_H
#include <QApplication>  
#include <QDeclarativeView>  
#include <QDeclarativeContext>  
#include <QPixmap>  
#include <QWidget>  
#include <QMouseEvent>  
#include <QKeyEvent>
class Stopwatch;
int main(int argc, char *argv[])  
{//...  QDeclarativeView *view = new QDeclarativeView();  QDeclarativeContext *context = view->getContext();  context->setContextRoot(view);Stopwatch *stopwatch = new Stopwatch();  context->setContextProperty("stopwatch", stopwatch);QWidget *root = new QWidget();  QPixmap *screenshot = new QPixmap(root->size());  screenshot->setParent(root);  context->setContextProperty("screenshot", screenshot);QCanvas *canvas = new QCanvas();  context->setContextProperty("canvas", canvas);//...  return app.exec();  
}
#endif // MAIN_H  

在 main.cpp 文件中，需要实现 Stopwatch 类的 isRunning() 方法和 start() 方法：

Stopwatch::Stopwatch()  
{m_running = false;  
}
bool Stopwatch::isRunning() const  
{return m_running;  
}
void Stopwatch::start()  
{m_running = true;  
}
void Stopwatch::stop()  
{m_running = false;  
}

接下来，在 QML 中可以使用 Canvas 和 Image 元素来实现自由截图功能。以下是一个简单的 QML 代码示例：

import QtQuick 2.0  
import QtQuick.Controls 2.0
Rectangle {  id: root  width: 640  height: 480Canvas {  id: canvas  width: root.width  height: root.heightonPaint: {  var screenshot = stopwatch.screenshot  screenshot.save("screenshot.png")  }  }Image {  id: screenshot  source: "screenshot.png"  anchors.fill: parent  }Keys.onPressed: {  if (event.key === Keys.Space) {  stopwatch.start()  }  }Keys.onReleased: {  if (event.key === Keys.Space) {  stopwatch.stop()  }  }  
}

以上代码使用 Canvas 元素来绘制屏幕截图，并在 Image 元素中显示截图。在 Keys.onPressed 和 Keys.onReleased 事件处理程序中，可以使用 QKeyEvent 来捕获键盘事件，从而控制截图的启动和停止。
要使用此代码，需要在 Qt Quick 应用程序中包含 main.qml 文件，并在该文件中添加上述代码。然后，运行应用程序并在屏幕上自由截图。

自由截图二

！！！仅供参考

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.0Window {visible: truewidth: 800height: 600title: "自由截图"Rectangle {id: selectionRectcolor: "transparent"border.color: "red"border.width: 2visible: falseproperty int startX: 0property int startY: 0MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: trueonPressed: {selectionRect.visible = trueselectionRect.startX = mouseXselectionRect.startY = mouseY}onPositionChanged: {if (mouseArea.pressed) {var width = mouseX - selectionRect.startXvar height = mouseY - selectionRect.startYselectionRect.x = selectionRect.startXselectionRect.y = selectionRect.startYselectionRect.width = widthselectionRect.height = height}}onReleased: {captureScreen(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height)selectionRect.visible = false}}}function captureScreen(x, y, width, height) {var screen = Qt.application.screens[0]var grab = screen.grabWindow(0, x, y, width, height)var fileDialog = Qt.createQmlObject("import QtQuick.Dialogs 1.2; FileDialog {}", window)fileDialog.title = "保存截图"fileDialog.selectExisting = falsefileDialog.onAccepted: {grab.saveUrl(fileDialog.fileUrl)}fileDialog.open()}
}

---