第三代软件开发-固定区域截图
文章目录
- 第三代软件开发-固定区域截图
- 项目介绍
- 固定区域截图
- QWidget 版本
- QML 版本
- 自由截图
- 自由截图二
关键字：
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()}
}
