This commit is contained in:
zhuzichu 2023-07-28 16:08:58 +08:00
parent 7ba60ee570
commit 29c57bcdc3
13 changed files with 222 additions and 20 deletions

View File

@ -130,7 +130,9 @@ FluExpander{
"FluPagination", "FluPagination",
"FluRadioButtons", "FluRadioButtons",
"FluImage", "FluImage",
"FluSpinBox" "FluSpinBox",
"FluHttp",
"FluWatermark"
]; ];
code = code.replace(/\n/g, "<br>"); code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;"); code = code.replace(/ /g, "&nbsp;");

View File

@ -4,14 +4,11 @@ import FluentUI
import org.wangwenx190.FramelessHelper import org.wangwenx190.FramelessHelper
FluWindow { FluWindow {
id:window id:window
property bool fixSize property bool fixSize
property alias titleVisible: title_bar.titleVisible property alias titleVisible: title_bar.titleVisible
property bool appBarVisible: true property bool appBarVisible: true
default property alias content: container.data default property alias content: container.data
FluAppBar { FluAppBar {
id: title_bar id: title_bar
title: window.title title: window.title
@ -23,7 +20,6 @@ FluWindow {
} }
darkText: lang.dark_mode darkText: lang.dark_mode
} }
Item{ Item{
id:container id:container
anchors{ anchors{
@ -34,7 +30,6 @@ FluWindow {
} }
clip: true clip: true
} }
FramelessHelper{ FramelessHelper{
id:framless_helper id:framless_helper
onReady: { onReady: {
@ -59,13 +54,10 @@ FluWindow {
FramelessUtils.systemTheme = FramelessHelperConstants.Light FramelessUtils.systemTheme = FramelessHelperConstants.Light
} }
} }
function setHitTestVisible(com){ function setHitTestVisible(com){
framless_helper.setHitTestVisible(com) framless_helper.setHitTestVisible(com)
} }
function setTitleBarItem(com){ function setTitleBarItem(com){
framless_helper.setTitleBarItem(com) framless_helper.setTitleBarItem(com)
} }
} }

View File

@ -181,6 +181,12 @@ FluObject{
navigationView.push("qrc:/example/qml/page/T_Expander.qml") navigationView.push("qrc:/example/qml/page/T_Expander.qml")
} }
} }
FluPaneItem{
title:"Watermark"
onTap:{
navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
}
}
} }
FluPaneItemExpander{ FluPaneItemExpander{

View File

@ -76,6 +76,8 @@ FluScrollablePage{
FluAcrylic{ FluAcrylic{
anchors.fill: parent anchors.fill: parent
tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) 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{ Rectangle{
anchors.fill: parent anchors.fill: parent

View File

@ -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)
}
}
}

45
src/FluWatermark.cpp Normal file
View File

@ -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();
}
}
}

25
src/FluWatermark.h Normal file
View File

@ -0,0 +1,25 @@
#ifndef FLUWATERMARK_H
#define FLUWATERMARK_H
#include <QQuickItem>
#include <QQuickPaintedItem>
#include <QPainter>
#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

View File

@ -11,36 +11,30 @@ FluItem {
property alias target : effect_source.sourceItem property alias target : effect_source.sourceItem
property int blurRadius: 32 property int blurRadius: 32
property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height) property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
ShaderEffectSource { ShaderEffectSource {
id: effect_source id: effect_source
anchors.fill: parent anchors.fill: parent
visible: false visible: false
sourceRect: control.targetRect sourceRect: control.targetRect
} }
FastBlur { FastBlur {
id:fast_blur id:fast_blur
anchors.fill: parent anchors.fill: parent
source: effect_source source: effect_source
radius: control.blurRadius radius: control.blurRadius
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(255, 255, 255, luminosity) color: Qt.rgba(255, 255, 255, luminosity)
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity) color: Qt.rgba(tintColor.r, tintColor.g, tintColor.b, tintOpacity)
} }
Image{ Image{
anchors.fill: parent anchors.fill: parent
source: "../Image/noise.png" source: "../Image/noise.png"
fillMode: Image.Tile fillMode: Image.Tile
opacity: control.noiseOpacity opacity: control.noiseOpacity
} }
} }

View File

@ -10,7 +10,6 @@ FluTextBox{
signal itemClicked(var data) signal itemClicked(var data)
signal handleClicked signal handleClicked
id:control id:control
width: 300
Component.onCompleted: { Component.onCompleted: {
loadData() loadData()
} }

View File

@ -76,4 +76,7 @@ Button{
popup.open() popup.open()
} }
} }
function setColor(color){
container.setColor(color)
}
} }

View File

@ -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 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) 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 id:control
width: 300
enabled: !disabled enabled: !disabled
color: { color: {
if(!enabled){ if(!enabled){
@ -37,7 +36,10 @@ TextArea{
return placeholderNormalColor return placeholderNormalColor
} }
selectByMouse: true selectByMouse: true
background: FluTextBoxBackground{ inputItem: control } background: FluTextBoxBackground{
inputItem: control
implicitWidth: 240
}
Keys.onEnterPressed: (event)=> d.handleCommit(event) Keys.onEnterPressed: (event)=> d.handleCommit(event)
Keys.onReturnPressed:(event)=> d.handleCommit(event) Keys.onReturnPressed:(event)=> d.handleCommit(event)
QtObject{ QtObject{

View File

@ -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 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) 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 id:control
width: 300
enabled: !disabled enabled: !disabled
color: { color: {
if(!enabled){ if(!enabled){
@ -41,6 +40,7 @@ TextField{
rightPadding: icon_end.visible ? 50 : 30 rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240
FluIcon{ FluIcon{
id:icon_end id:icon_end
iconSource: control.iconSource iconSource: control.iconSource

View File

@ -15,7 +15,6 @@ TextField{
property int iconRightMargin: icon_end.visible ? 25 : 5 property int iconRightMargin: icon_end.visible ? 25 : 5
property bool cleanEnabled: true property bool cleanEnabled: true
id:control id:control
width: 300
padding: 8 padding: 8
leftPadding: padding+2 leftPadding: padding+2
enabled: !disabled enabled: !disabled
@ -42,6 +41,7 @@ TextField{
rightPadding: icon_end.visible ? 50 : 30 rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{ background: FluTextBoxBackground{
inputItem: control inputItem: control
implicitWidth: 240
FluIcon{ FluIcon{
id:icon_end id:icon_end
iconSource: control.iconSource iconSource: control.iconSource