Third generation software development-fixed area screenshots
Article directory
- Third generation software development-fixed area screenshots
-
- Project Introduction
- Fixed area screenshot
-
- QWidget version
- QML version
- Free screenshots
- Free screenshot 2
Keywords:
Qt、
Qml、
Keyword 3,
Keyword 4,
Keyword 5
Project introduction
Welcome to our QML & C++ project! This project combines the power of QML (Qt Meta-Object Language) and C++ to develop excellent user interfaces and high-performance backend logic.
In the project, we leveraged QML’s declarative syntax and visual design capabilities to create a modern user interface. Through intuitive coding and reusable components, we can quickly develop rich and diverse interface effects and animation effects. At the same time, we use QML’s powerful integration capabilities to easily integrate the underlying logic and data model of C++ into the front-end interface.
On the backend side, we use C++ to write high-performance algorithms, data processing, and computational logic. C++ is a powerful programming language that offers excellent performance and scalability. Our team is committed to optimizing code and reducing resource consumption to ensure that our projects run efficiently on a variety of platforms and devices.
Whether you’re interested in QML and C++ development or need us to build complex user interfaces and backend logic for you, we’re ready to support you. Please feel free to contact us and let’s build a modern, high-performance QML & C++ project together!
Important?
?The price of this column will increase after the third generation soft development update.
Fixed area screenshot
In fact, I haven’t found a good screenshot tool under Ubuntu. I used to use Snipaste under Windows. It turned out that the author has not developed a Linux version, and the project also has the need for screenshots. However, our screenshots are very simple, just fix a certain The area is saved as a picture. To put it bluntly, it is to save a certain control as a picture.
QWidget version
This function existed under QWidget before. I will first look for the implementation code under QWidget.
/**
* @brief XXXXXXX::snapshot
* Snapshot function
* This is not enabled yet
*/
void XXXXXXX::snapshot(QString path)
{
QRect rect = ui->widget_customPlot->geometry(); // Screenshot area
QPixmap p = ui->widget_customPlot->grab(rect); // Get whose 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 version
With experience under QWidget, I believe Qt has also made this interface for us under Qml, so Baidu will download it. code show as below
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()
});
}
Someone will find that other codes have been added here. Yes, I also wrote a simple animation for him, similar to the screenshot on our mobile phone, zoomed to the lower right corner and made small. The code is as follows:
/// Screenshot display box
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}
}
The above code only shrunk and disappeared, so I was lazy and gave it a timer.
Timer
{
id:hidescreenshotRect
repeat: false
interval: 300
running: false
onTriggered: screenshotRect.visible = false
}
Free screenshots
! ! ! The following code is not implemented in the project
To use QT QML to implement free screenshots, you need to use Qt’s QPixmap and QWidget classes, as well as QML’s Canvas element and Image element. The following is a simple sample code that can use QML to implement the free screenshot function in a Qt Quick application:
First, include the necessary header files in the main.cpp file and create a Stopwatch class inherited from QObject to control the starting and stopping of screenshots:
#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;
};
Then add the necessary header files and declarations in the main.h file:
#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
In the main.cpp file, you need to implement the isRunning() method and start() method of the Stopwatch class:
Stopwatch::Stopwatch()
{<!-- -->
m_running = false;
}
bool Stopwatch::isRunning() const
{<!-- -->
return m_running;
}
void Stopwatch::start()
{<!-- -->
m_running = true;
}
void Stopwatch::stop()
{<!-- -->
m_running = false;
}
Next, you can use Canvas and Image elements in QML to implement the free screenshot function. Here is a simple QML code example:
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()
}
}
}
The above code uses the Canvas element to draw the screenshot and displays the screenshot in an Image element. In the Keys.onPressed and Keys.onReleased event handlers, you can use QKeyEvent to capture keyboard events to control the starting and stopping of screenshots.
To use this code, you need to include the main.qml file in your Qt Quick application and add the above code in the file. Then, run the app and take screenshots freely on the screen.
Free screenshot 2
! ! ! For reference only
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.0
Window {
visible: true
width: 800
height: 600
title: "Free screenshots"
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 = "Save screenshot"
fileDialog.selectExisting = false
fileDialog.onAccepted: {
grab.saveUrl(fileDialog.fileUrl)
}
fileDialog.open()
}
}
