main
朱子楚\zhuzi 2023-06-10 11:01:36 +08:00
parent 221361369e
commit 18205851f6
2 changed files with 112 additions and 25 deletions

View File

@ -80,25 +80,25 @@ CustomWindow {
id:flipable id:flipable
anchors.fill: parent anchors.fill: parent
property bool flipped: false property bool flipped: false
property real flipAngle: 0
transform: Rotation { transform: Rotation {
id: rotation id: rotation
origin.x: flipable.width/2 origin.x: flipable.width/2
origin.y: flipable.height/2 origin.y: flipable.height/2
axis { x: 0; y: 1; z: 0 } axis { x: 0; y: 1; z: 0 }
angle: 0 angle: flipable.flipAngle
} }
states: State { states: State {
name: "back" PropertyChanges { target: flipable; flipAngle: 180 }
PropertyChanges { target: rotation; angle: 180 }
when: flipable.flipped when: flipable.flipped
} }
transitions: Transition { 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{ back: Item{
anchors.fill: flipable anchors.fill: flipable
visible: rotation.angle !== 0 visible: flipable.flipAngle !== 0
FluAppBar { FluAppBar {
anchors { anchors {
top: parent.top top: parent.top
@ -108,6 +108,7 @@ CustomWindow {
darkText: lang.dark_mode darkText: lang.dark_mode
showDark: true showDark: true
z:7 z:7
darkClickListener:(button)=>handleDarkChanged(button)
} }
FluIconButton{ FluIconButton{
iconSource: FluentIcons.ChromeBack iconSource: FluentIcons.ChromeBack
@ -126,7 +127,8 @@ CustomWindow {
} }
} }
front: Item{ front: Item{
visible: rotation.angle !== 180 id:page_front
visible: flipable.flipAngle !== 180
anchors.fill: flipable anchors.fill: flipable
FluAppBar { FluAppBar {
anchors { anchors {
@ -136,6 +138,7 @@ CustomWindow {
} }
darkText: lang.dark_mode darkText: lang.dark_mode
showDark: true showDark: true
darkClickListener:(button)=>handleDarkChanged(button)
z:7 z:7
} }
FluNavigationView{ 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
})
}
} }

View File

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