mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 11:17:15 +08:00
update
This commit is contained in:
parent
7ba60ee570
commit
29c57bcdc3
@ -130,7 +130,9 @@ FluExpander{
|
||||
"FluPagination",
|
||||
"FluRadioButtons",
|
||||
"FluImage",
|
||||
"FluSpinBox"
|
||||
"FluSpinBox",
|
||||
"FluHttp",
|
||||
"FluWatermark"
|
||||
];
|
||||
code = code.replace(/\n/g, "<br>");
|
||||
code = code.replace(/ /g, " ");
|
||||
|
@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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{
|
||||
|
@ -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
|
||||
|
132
example/qml/page/T_Watermark.qml
Normal file
132
example/qml/page/T_Watermark.qml
Normal 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
45
src/FluWatermark.cpp
Normal 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
25
src/FluWatermark.h
Normal 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
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -10,7 +10,6 @@ FluTextBox{
|
||||
signal itemClicked(var data)
|
||||
signal handleClicked
|
||||
id:control
|
||||
width: 300
|
||||
Component.onCompleted: {
|
||||
loadData()
|
||||
}
|
||||
|
@ -76,4 +76,7 @@ Button{
|
||||
popup.open()
|
||||
}
|
||||
}
|
||||
function setColor(color){
|
||||
container.setColor(color)
|
||||
}
|
||||
}
|
||||
|
@ -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{
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user