From 29c57bcdc34c5e25cf95d1caeddf3d4781eede2c Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Fri, 28 Jul 2023 16:08:58 +0800 Subject: [PATCH] update --- example/qml/component/CodeExpander.qml | 4 +- example/qml/component/CustomWindow.qml | 8 -- example/qml/global/ItemsOriginal.qml | 6 + example/qml/page/T_Home.qml | 2 + example/qml/page/T_Watermark.qml | 132 ++++++++++++++++++ src/FluWatermark.cpp | 45 ++++++ src/FluWatermark.h | 25 ++++ src/imports/FluentUI/Controls/FluAcrylic.qml | 6 - .../FluentUI/Controls/FluAutoSuggestBox.qml | 1 - .../FluentUI/Controls/FluColorPicker.qml | 3 + .../FluentUI/Controls/FluMultilineTextBox.qml | 6 +- .../FluentUI/Controls/FluPasswordBox.qml | 2 +- src/imports/FluentUI/Controls/FluTextBox.qml | 2 +- 13 files changed, 222 insertions(+), 20 deletions(-) create mode 100644 example/qml/page/T_Watermark.qml create mode 100644 src/FluWatermark.cpp create mode 100644 src/FluWatermark.h diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml index a198fdfd..72e309bb 100644 --- a/example/qml/component/CodeExpander.qml +++ b/example/qml/component/CodeExpander.qml @@ -130,7 +130,9 @@ FluExpander{ "FluPagination", "FluRadioButtons", "FluImage", - "FluSpinBox" + "FluSpinBox", + "FluHttp", + "FluWatermark" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/example/qml/component/CustomWindow.qml b/example/qml/component/CustomWindow.qml index 884dde22..47565905 100644 --- a/example/qml/component/CustomWindow.qml +++ b/example/qml/component/CustomWindow.qml @@ -4,14 +4,11 @@ import FluentUI import org.wangwenx190.FramelessHelper FluWindow { - id:window - property bool fixSize property alias titleVisible: title_bar.titleVisible property bool appBarVisible: true default property alias content: container.data - FluAppBar { id: title_bar title: window.title @@ -23,7 +20,6 @@ FluWindow { } darkText: lang.dark_mode } - Item{ id:container anchors{ @@ -34,7 +30,6 @@ FluWindow { } clip: true } - FramelessHelper{ id:framless_helper onReady: { @@ -59,13 +54,10 @@ FluWindow { FramelessUtils.systemTheme = FramelessHelperConstants.Light } } - function setHitTestVisible(com){ framless_helper.setHitTestVisible(com) } - function setTitleBarItem(com){ framless_helper.setTitleBarItem(com) } - } diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml index e2c50113..5d8ad003 100644 --- a/example/qml/global/ItemsOriginal.qml +++ b/example/qml/global/ItemsOriginal.qml @@ -181,6 +181,12 @@ FluObject{ navigationView.push("qrc:/example/qml/page/T_Expander.qml") } } + FluPaneItem{ + title:"Watermark" + onTap:{ + navigationView.push("qrc:/example/qml/page/T_Watermark.qml") + } + } } FluPaneItemExpander{ diff --git a/example/qml/page/T_Home.qml b/example/qml/page/T_Home.qml index 28c58cd1..c4dd4b81 100644 --- a/example/qml/page/T_Home.qml +++ b/example/qml/page/T_Home.qml @@ -76,6 +76,8 @@ FluScrollablePage{ FluAcrylic{ anchors.fill: parent tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) + target: bg + targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height) } Rectangle{ anchors.fill: parent diff --git a/example/qml/page/T_Watermark.qml b/example/qml/page/T_Watermark.qml new file mode 100644 index 00000000..3b4aa275 --- /dev/null +++ b/example/qml/page/T_Watermark.qml @@ -0,0 +1,132 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import QtQuick.Window +import FluentUI +import "qrc:///example/qml/component" + +FluContentPage{ + + title:"Watermark" + + FluArea{ + anchors.fill: parent + anchors.topMargin: 20 + + ColumnLayout{ + anchors{ + left: parent.left + leftMargin: 14 + } + + RowLayout{ + spacing: 10 + Layout.topMargin: 14 + FluText{ + text:"text:" + Layout.alignment: Qt.AlignVCenter + } + FluTextBox{ + id:text_box + text:"会磨刀的小猪" + } + } + + RowLayout{ + spacing: 10 + FluText{ + text:"textSize:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_text_size + value: 20 + from: 13 + to:50 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"gapX:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_gap_x + value: 100 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"gapY:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_gap_y + value: 100 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"offsetX:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_offset_x + value: 50 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"offsetY:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_offset_y + value: 50 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"rotate:" + Layout.alignment: Qt.AlignVCenter + } + FluSlider{ + id:slider_rotate + value: 22 + from: 0 + to:360 + } + } + RowLayout{ + spacing: 10 + FluText{ + text:"textColor:" + Layout.alignment: Qt.AlignVCenter + } + FluColorPicker{ + id:color_picker + Component.onCompleted: { + setColor(Qt.rgba(0,0,0,0.1)) + } + } + } + } + + FluWatermark{ + id:water_mark + anchors.fill: parent + text:text_box.text + textColor: color_picker.colorValue + textSize: slider_text_size.value + rotate: slider_rotate.value + gap:Qt.point(slider_gap_x.value,slider_gap_y.value) + offset: Qt.point(slider_offset_x.value,slider_offset_y.value) + } + } + +} diff --git a/src/FluWatermark.cpp b/src/FluWatermark.cpp new file mode 100644 index 00000000..6a50443f --- /dev/null +++ b/src/FluWatermark.cpp @@ -0,0 +1,45 @@ +#include "FluWatermark.h" + +FluWatermark::FluWatermark(QQuickItem* parent) : QQuickPaintedItem(parent) +{ + gap(QPoint(100,100)); + offset(QPoint(_gap.x()/2,_gap.y()/2)); + rotate(22); + setZ(9999); + textColor(QColor(222,222,222,222)); + textSize(16); + connect(this,&FluWatermark::textColorChanged,this,[=]{update();}); + connect(this,&FluWatermark::gapChanged,this,[=]{update();}); + connect(this,&FluWatermark::offsetChanged,this,[=]{update();}); + connect(this,&FluWatermark::textChanged,this,[=]{update();}); + connect(this,&FluWatermark::rotateChanged,this,[=]{update();}); + connect(this,&FluWatermark::textSizeChanged,this,[=]{update();}); +} + +void FluWatermark::paint(QPainter* painter) +{ + QFont font; + font.setPixelSize(_textSize); + painter->setFont(font); + painter->setPen(_textColor); + QFontMetricsF fontMetrics(font); + qreal fontWidth = fontMetrics.horizontalAdvance(_text); + qreal fontHeight = fontMetrics.height(); + int stepX = fontWidth + _gap.x(); + int stepY = fontHeight + _gap.y(); + int rowCount = width() / stepX+1; + int colCount = height() / stepY+1; + for (int r = 0; r < rowCount; r++) + { + for (int c = 0; c < colCount; c++) + { + qreal centerX = stepX * r + _offset.x() + fontWidth / 2.0; + qreal centerY = stepY * c + _offset.y() + fontHeight / 2.0; + painter->save(); + painter->translate(centerX, centerY); + painter->rotate(_rotate); + painter->drawText(QRectF(-fontWidth / 2.0, -fontHeight / 2.0, fontWidth, fontHeight), _text); + painter->restore(); + } + } +} diff --git a/src/FluWatermark.h b/src/FluWatermark.h new file mode 100644 index 00000000..b5ee166d --- /dev/null +++ b/src/FluWatermark.h @@ -0,0 +1,25 @@ +#ifndef FLUWATERMARK_H +#define FLUWATERMARK_H + +#include +#include +#include +#include "stdafx.h" + +class FluWatermark : public QQuickPaintedItem +{ + Q_OBJECT + Q_PROPERTY_AUTO(QString,text) + Q_PROPERTY_AUTO(QPoint,gap) + Q_PROPERTY_AUTO(QPoint,offset); + Q_PROPERTY_AUTO(QColor,textColor); + Q_PROPERTY_AUTO(int,rotate); + Q_PROPERTY_AUTO(int,textSize); + QML_NAMED_ELEMENT(FluWatermark) +public: + explicit FluWatermark(QQuickItem *parent = nullptr); + void paint(QPainter* painter) override; + +}; + +#endif // FLUWATERMARK_H diff --git a/src/imports/FluentUI/Controls/FluAcrylic.qml b/src/imports/FluentUI/Controls/FluAcrylic.qml index 1e9696a4..244f0ea7 100644 --- a/src/imports/FluentUI/Controls/FluAcrylic.qml +++ b/src/imports/FluentUI/Controls/FluAcrylic.qml @@ -11,36 +11,30 @@ FluItem { property alias target : effect_source.sourceItem property int blurRadius: 32 property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height) - ShaderEffectSource { id: effect_source anchors.fill: parent visible: false sourceRect: control.targetRect } - FastBlur { id:fast_blur anchors.fill: parent source: effect_source radius: control.blurRadius } - Rectangle{ anchors.fill: parent color: Qt.rgba(255, 255, 255, luminosity) } - Rectangle{ anchors.fill: parent color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity) } - Image{ anchors.fill: parent source: "../Image/noise.png" fillMode: Image.Tile opacity: control.noiseOpacity } - } diff --git a/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml b/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml index 0b19c469..8f0d9bc4 100644 --- a/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml +++ b/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml @@ -10,7 +10,6 @@ FluTextBox{ signal itemClicked(var data) signal handleClicked id:control - width: 300 Component.onCompleted: { loadData() } diff --git a/src/imports/FluentUI/Controls/FluColorPicker.qml b/src/imports/FluentUI/Controls/FluColorPicker.qml index 685e612a..99477b27 100644 --- a/src/imports/FluentUI/Controls/FluColorPicker.qml +++ b/src/imports/FluentUI/Controls/FluColorPicker.qml @@ -76,4 +76,7 @@ Button{ popup.open() } } + function setColor(color){ + container.setColor(color) + } } diff --git a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml index 1f535af6..bf97b9c2 100644 --- a/src/imports/FluentUI/Controls/FluMultilineTextBox.qml +++ b/src/imports/FluentUI/Controls/FluMultilineTextBox.qml @@ -12,7 +12,6 @@ TextArea{ property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) id:control - width: 300 enabled: !disabled color: { if(!enabled){ @@ -37,7 +36,10 @@ TextArea{ return placeholderNormalColor } selectByMouse: true - background: FluTextBoxBackground{ inputItem: control } + background: FluTextBoxBackground{ + inputItem: control + implicitWidth: 240 + } Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event) QtObject{ diff --git a/src/imports/FluentUI/Controls/FluPasswordBox.qml b/src/imports/FluentUI/Controls/FluPasswordBox.qml index e6d8a93b..cb1af404 100644 --- a/src/imports/FluentUI/Controls/FluPasswordBox.qml +++ b/src/imports/FluentUI/Controls/FluPasswordBox.qml @@ -13,7 +13,6 @@ TextField{ property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) id:control - width: 300 enabled: !disabled color: { if(!enabled){ @@ -41,6 +40,7 @@ TextField{ rightPadding: icon_end.visible ? 50 : 30 background: FluTextBoxBackground{ inputItem: control + implicitWidth: 240 FluIcon{ id:icon_end iconSource: control.iconSource diff --git a/src/imports/FluentUI/Controls/FluTextBox.qml b/src/imports/FluentUI/Controls/FluTextBox.qml index 6ea8d976..0e98ecc7 100644 --- a/src/imports/FluentUI/Controls/FluTextBox.qml +++ b/src/imports/FluentUI/Controls/FluTextBox.qml @@ -15,7 +15,6 @@ TextField{ property int iconRightMargin: icon_end.visible ? 25 : 5 property bool cleanEnabled: true id:control - width: 300 padding: 8 leftPadding: padding+2 enabled: !disabled @@ -42,6 +41,7 @@ TextField{ rightPadding: icon_end.visible ? 50 : 30 background: FluTextBoxBackground{ inputItem: control + implicitWidth: 240 FluIcon{ id:icon_end iconSource: control.iconSource