第三代软件开发-固定区域截图
[toc]
关键字： 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_DEBUG
if(!p.save(path,"png"))
{
qWarning()<<"save snapshot failed" << LOCATION;
}
#else
Q_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 file
screenshotImage.source = result.url;
screenshotRect.visible = true
screenshotAnimation.start()
hidescreenshotRect.start()
});
}
这里就有人会发现还加了别的代码了，是的，我还给他写了一个简单的动画，类似咱们手机截图那样，缩小到右下角，并小时，代码如下：
/// 截图展示框
Rectangle
{
id:screenshotRect
x:0
y:0
width: parent.width
height: parent.height
visible: false
color: "transparent"
Image {
id: screenshotImage
anchors.fill: parent
anchors.margins: 2
}
}
ParallelAnimation {
id: screenshotAnimation
running: false
NumberAnimation { 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:hidescreenshotRect
repeat: false
interval: 300
running: false
onTriggered: 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: 480
Canvas {
id: canvas
width: root.width
height: root.height
onPaint: {
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.0
Window {
visible: true
width: 800
height: 600
title: "自由截图"
Rectangle {
id: selectionRect
color: "transparent"
border.color: "red"
border.width: 2
visible: false
property int startX: 0
property int startY: 0
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onPressed: {
selectionRect.visible = true
selectionRect.startX = mouseX
selectionRect.startY = mouseY
}
onPositionChanged: {
if (mouseArea.pressed) {
var width = mouseX - selectionRect.startX
var height = mouseY - selectionRect.startY
selectionRect.x = selectionRect.startX
selectionRect.y = selectionRect.startY
selectionRect.width = width
selectionRect.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 = false
fileDialog.onAccepted: {
grab.saveUrl(fileDialog.fileUrl)
}
fileDialog.open()
}
}
