0
点赞
收藏
分享

微信扫一扫

Qml 中实现水印工具

河南妞 2024-12-29 阅读 9
uiqtqml水印C/C++后端开发yyds干货盘点
加载失败

【写在前面】

在 Qt 的 Quick 模块中，QQuickPaintedItem 是一个非常有用的类，它允许我们在 Qml 中自定义绘制逻辑。

我们可以通过这种方式实现水印工具，包括在文本、图片或整个窗口上添加水印。

本文将介绍如何在 Qml 中实现一个简单但功能强大的水印工具，包括水印文本的透明度、颜色、字体大小、旋转角度等自定义功能。

【正文开始】

一、效果图

二、水印工具类的设计

首先，我们需要设计一个 C++ 类来表示水印工具。这个类将继承自 QQuickPaintedItem，并添加一些属性来控制水印的外观和行为。这些属性包括水印文本、图像、大小、间距、偏移量、旋转角度、字体和字体颜色。

watermark.h

在 Watermark 类的头文件中，我们声明了所有的属性和相应的信号、槽函数。使用 Q_PROPERTY 宏来声明 Qml 中可访问的属性。

#ifndef WATERMARK_H 
#define WATERMARK_H 

#include <QQuickPaintedItem> 

QT_FORWARD_DECLARE_CLASS(WatermarkPrivate);

class Watermark : public QQuickPaintedItem 
{ 
    Q_OBJECT 

    // 声明QML中可访问的属性
    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged FINAL) 
    Q_PROPERTY(QUrl image READ image WRITE setImage NOTIFY imageChanged FINAL) 
    Q_PROPERTY(QSize markSize READ markSize WRITE setMarkSize NOTIFY markSizeChanged FINAL) 
    Q_PROPERTY(QPointF gap READ gap WRITE setGap NOTIFY gapChanged FINAL) 
    Q_PROPERTY(QPointF offset READ offset WRITE setOffset NOTIFY offsetChanged FINAL) 
    Q_PROPERTY(qreal rotate READ rotate WRITE setRotate NOTIFY rotateChanged FINAL) 
    Q_PROPERTY(QFont font READ font WRITE setFont NOTIFY fontChanged FINAL) 
    Q_PROPERTY(QColor fontColor READ fontColor WRITE setFontColor NOTIFY fontColorChanged FINAL)

public: 
    Watermark(QQuickItem *parent = nullptr); 
    ~Watermark(); 

    // 属性的getter和setter函数
    QString text() const; 
    void setText(const QString  

    QUrl image() const; 
    void setImage(const QUrl  

    QSize markSize() const; 
    void setMarkSize(const QSize  

    QPointF gap() const; 
    void setGap(const QPointF  

    QPointF offset() const; 
    void setOffset(const QPointF  

    qreal rotate() const; 
    void setRotate(qreal rotate); 

    QFont font() const; 
    void setFont(const QFont  

    QColor fontColor() const; 
    void setFontColor(const QColor  

signals: 
    void textChanged(); 
    void imageChanged(); 
    void markSizeChanged(); 
    void gapChanged(); 
    void offsetChanged(); 
    void rotateChanged(); 
    void fontChanged(); 
    void fontColorChanged(); 

protected: 
    void paint(QPainter *painter); 

private: 
    Q_DECLARE_PRIVATE(Watermark); 
    QScopedPointer<WatermarkPrivate> d_ptr; 
}; 

#endif // WATERMARK_H

watermark.cpp

在 Watermark 类的实现文件中，我们主要实现了属性的 setter 和 getter 函数，这些函数在属性值改变时会触发相应的信号，并调用update()函数来请求重新绘制。同时，我们也实现了paint()函数，它使用 QPainter 来绘制水印。

// watermark.cpp的实现省略，具体可参考提供的 watermark.cpp 文件

WatermarkPrivate.h

WatermarkPrivate 是 Watermark 类的私有实现部分，它包含了所有的成员变量和辅助函数。这些成员变量包括水印文本、图像URL、网络请求回复、图像缓存、字体和字体颜色等。

// WatermarkPrivate类的声明省略，具体可参考watermark.cpp文件中的WatermarkPrivate部分

三、 Qml 中的使用

main.qml

在 Qml 文件中，我们可以使用 Watermark 元素来添加水印。通过设置 Watermark 的属性，我们可以控制水印的外观和行为。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

import DelegateUI.Controls 1.0

Window {
    id: window
    width: 1080
    height: 600
    visible: true
    title: qsTr(DelegateUI Watermark)

    RowLayout {
        anchors.fill: parent

        ColumnLayout {
            Layout.preferredWidth: parent.width * 0.5
            Layout.preferredHeight: parent.height * 0.5

            Item {
                id: content1
                Layout.fillWidth: true
                Layout.fillHeight: true

                Watermark {
                    id: watermark1
                    anchors.fill: parent
                    offset.x: -50
                    offset.y: -50
                    rotate: slider1.value
                    fontColor: #30ff0000
                }

                Text {
                    anchors.centerIn: parent
                    text: qsTr(文字水印测试)
                    font.pointSize: 36
                }
            }

            RowLayout {
                Layout.fillWidth: true
                Layout.maximumHeight: 40

                Slider {
                    id: slider1
                    Layout.preferredWidth: 150
                    Layout.fillHeight: true
                    value: -22
                    from: -360
                    to: 360
                    stepSize: 1
                }

                TextField {
                    id: markText
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    text: DelegateUI Watermark
                    placeholderText: qsTr(输入水印文本)
                    font.family: 微软雅黑
                    selectByMouse: true
                }

                Button {
                    Layout.preferredWidth: 80
                    Layout.fillHeight: true
                    text: qsTr(确定)
                    onClicked: watermark1.text = markText.text;
                }

                Button {
                    Layout.preferredWidth: 80
                    Layout.fillHeight: true
                    text: qsTr(导出)
                    onClicked: {
                        content1.grabToImage((result)=>{
                                                 result.saveToFile(./content1.png);
                                                 Qt.openUrlExternally(file:./);
                                             });
                    }
                }
            }
        }

        ColumnLayout {
            Layout.preferredWidth: parent.width * 0.5
            Layout.preferredHeight: parent.height * 0.5

            Item {
                id: content2
                Layout.fillWidth: true
                Layout.fillHeight: true

                Watermark {
                    id: watermark2
                    anchors.fill: parent
                    offset.x: -50
                    offset.y: -50
                    markSize.width: 200
                    markSize.height: 150
                    rotate: slider2.value
                    opacity: 0.2
                }

                Text {
                    anchors.centerIn: parent
                    text: qsTr(图像水印测试)
                    font.pointSize: 36
                }
            }

            RowLayout {
                Layout.fillWidth: true
                Layout.maximumHeight: 40

                Slider {
                    id: slider2
                    Layout.preferredWidth: 150
                    Layout.fillHeight: true
                    value: -22
                    from: -360
                    to: 360
                    stepSize: 1
                }

                TextField {
                    id: markImage
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    text: https://avatars.githubusercontent.com/u/33405710?v=4
                    placeholderText: qsTr(输入水印图片链接)
                    font.family: 微软雅黑
                    selectByMouse: true
                }

                Button {
                    Layout.preferredWidth: 80
                    Layout.fillHeight: true
                    text: qsTr(确定)
                    onClicked: watermark2.image = markImage.text;
                }

                Button {
                    Layout.preferredWidth: 80
                    Layout.fillHeight: true
                    text: qsTr(导出)
                    onClicked: {
                        content2.grabToImage((result)=>{
                                                 result.saveToFile(./content2.png);
                                                 Qt.openUrlExternally(file:./);
                                             });
                    }
                }
            }
        }
    }
}

在这个 Qml 文件中，我们创建了两个个 Watermark 元素并通过设置 Watermark 的各种属性，我们实现了一个带有文本和图像的水印效果，并且可以控制水印的大小、间距、偏移量、旋转角度、字体和字体颜色。

【结语】

通过使用 QQuickPaintedItem，我们可以在 Qml 中实现了一个功能丰富的水印工具。

这个工具允许我们自定义水印的外观和行为，并且可以很方便地在 Qml 中使用。

最后：项目链接(多多star呀..⭐_⭐)：

Github: https://github.com/mengps/QmlControls

Gitee: https://gitee.com/MenPenS/QmlControls

举报

相关推荐

QML实现绘图

MathQtQtChartsQMLC/C++后端开发yyds干货盘点

Java水印工具类

javaImage指定位置目标文件JavaScript前端开发

QML进阶(六)-QML中的常用元素

javascript开发语言qtc++经验分享

【QML】简单动画实现

qtc++开发语言行为动画属性值Java编程语言

QML中PinchArea实现简单的缩放和旋转

QML中PinchArea实现简单的缩放QML缩放编程语言

在线去水印网站_一键去水印工具

p2plinq网络协议

QML中绘图（1、Canvas 2、QPainter与QML结合）

QML中绘图1Canvas 2QWidgQML#include头文件html

QML中Text、Image适配

QML中Text文字适配qtQML行间距ide编程语言

在Qt中实现C++与QML的交互

qtc++交互

Qml 中实现任意角为圆角的矩形

QtQml控件UIC/C++后端开发yyds干货盘点
0 条评论
加载失败