amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-26 21:37:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-06-10 11:01:36 +08:00
parent 221361369e
commit 18205851f6
2 changed files with 112 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
example/qml/window/MainWindow.qml
View File

@ -80,25 +80,25 @@ CustomWindow {
id:flipable
anchors.fill: parent
property bool flipped: false
property real flipAngle: 0
transform: Rotation {
id: rotation
origin.x: flipable.width/2
origin.y: flipable.height/2
axis { x: 0; y: 1; z: 0 }
angle: 0
angle: flipable.flipAngle
}
states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 }
PropertyChanges { target: flipable; flipAngle: 180 }
when: flipable.flipped
}
transitions: Transition {
NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
}
back: Item{
anchors.fill: flipable
visible: rotation.angle !== 0
visible: flipable.flipAngle !== 0
FluAppBar {
anchors {
top: parent.top
@ -108,6 +108,7 @@ CustomWindow {
darkText: lang.dark_mode
showDark: true
z:7
darkClickListener:(button)=>handleDarkChanged(button)
}
FluIconButton{
iconSource: FluentIcons.ChromeBack
@ -126,7 +127,8 @@ CustomWindow {
}
}
front: Item{
visible: rotation.angle !== 180
id:page_front
visible: flipable.flipAngle !== 180
anchors.fill: flipable
FluAppBar {
anchors {
@ -136,6 +138,7 @@ CustomWindow {
}
darkText: lang.dark_mode
showDark: true
darkClickListener:(button)=>handleDarkChanged(button)
z:7
}
FluNavigationView{
@ -182,4 +185,83 @@ CustomWindow {
}
}
}
Image{
id:img_cache
visible: false
anchors.fill: flipable
}
Canvas{
id:canvas
anchors.fill: flipable
property int centerX: canvas.width / 2
property int centerY: canvas.height / 2
property real radius: 0
property int maxRadius: 0
property url imageUrl
Behavior on radius{
id:anim_radius
NumberAnimation {
target: canvas
property: "radius"
duration: 666
easing.type: Easing.BezierSpline
easing.bezierCurve: [0,0,0,1]
}
}
onRadiusChanged: {
canvas.requestPaint()
}
onPaint: {
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save()
if(img_cache.source.toString().length!==0){
try{
ctx.drawImage(img_cache.source, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)
}catch(e){
img_cache.source = ""
}
}
clearArc(ctx, centerX, centerY, radius)
ctx.restore()
}
function clearArc(ctx,x, y, radius, startAngle, endAngle) {
ctx.beginPath()
ctx.globalCompositeOperation = 'destination-out'
ctx.fillStyle = 'black'
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
function distance(x1,y1,x2,y2){
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
}
function handleDarkChanged(button){
var pos = button.mapToItem(flipable,0,0)
var mouseX = pos.x
var mouseY = pos.y
canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,canvas.width,0),distance(mouseX,mouseY,0,canvas.height),distance(mouseX,mouseY,canvas.width,canvas.height))
window.contentItem.grabToImage(function(result) {
img_cache.source = result.url
canvas.requestPaint()
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
canvas.centerX = mouseX
canvas.centerY = mouseY
anim_radius.enabled = false
canvas.radius = 0
anim_radius.enabled = true
canvas.radius = canvas.maxRadius
})
}
}

43
src/imports/FluentUI/Controls/FluAppBar.qml
View File

@ -22,6 +22,25 @@ Rectangle{
property bool titleVisible: true
property bool isMac: FluTools.isMacos()
property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property var maxClickListener : function(){
if (d.win.visibility === Window.Maximized)
d.win.visibility = Window.Windowed
else
d.win.visibility = Window.Maximized
}
property var minClickListener: function(){
d.win.visibility = Window.Minimized
}
property var closeClickListener : function(){
d.win.close()
}
property var darkClickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
id:root
color: Qt.rgba(0,0,0,0)
height: visible ? 30 : 0
@ -67,14 +86,9 @@ Rectangle{
color:root.textColor
}
FluToggleSwitch{
id:btn_dark
checked: FluTheme.dark
clickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
clickListener:()=> darkClickListener(btn_dark)
}
}
FluIconButton{
@ -89,9 +103,7 @@ Rectangle{
visible: !isMac
iconColor: root.textColor
color: hovered ? minimizeHoverColor : minimizeNormalColor
onClicked: {
d.win.visibility = Window.Minimized
}
onClicked: minClickListener()
}
FluIconButton{
id:btn_maximize
@ -105,12 +117,7 @@ Rectangle{
iconColor: root.textColor
text:d.isRestore?restoreText:maximizeText
iconSize: 11
onClicked: {
if (d.win.visibility === Window.Maximized)
d.win.visibility = Window.Windowed
else
d.win.visibility = Window.Maximized
}
onClicked: maxClickListener()
}
FluIconButton{
id:btn_close
@ -124,9 +131,7 @@ Rectangle{
iconSize: 10
iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
color:hovered ? closeHoverColor : closeNormalColor
onClicked: {
d.win.close()
}
onClicked: closeClickListener()
}
}