julian/my-clock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

change color

Browse Source
This commit is contained in:
Julian Freeman
2026-03-01 14:34:33 -04:00
parent c06504bdb1
commit 8550420711
3 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Cargo.lock generated
View File

@@ -2752,7 +2752,7 @@ dependencies = [
[[package]]
name = "my-clock"
version = "0.1.0"
version = "0.1.1"
dependencies = [
"chrono",
"embed-resource",

2
Cargo.toml
View File

@@ -1,6 +1,6 @@
[package]
name = "my-clock"
version = "0.1.0"
version = "0.1.1"
edition = "2021"
[dependencies]

67
src/main.rs
View File

@@ -15,7 +15,7 @@ slint::slint! {
in-out property <float> minute: 0.0;
in-out property <float> second: 0.0;
in-out property <bool> is_on_top: true;
in-out property <float> dial_opacity: 0.85;
in-out property <float> dial_opacity: 0.92;
in-out property <length> clock_size: 300px;
property <length> mouse_start_x;
@@ -98,15 +98,41 @@ slint::slint! {
Rectangle {
width: 100%; height: 100%;
background: rgba(25, 25, 25, root.dial_opacity);
// 背景渐变层
Rectangle {
width: 100%; height: 100%;
background: @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
opacity: root.dial_opacity;
border-radius: self.width / 2;
border-width: 1.5px;
border-color: rgba(255, 255, 255, 0.15);
}
// 装饰性内环和外边框
Rectangle {
width: 100%; height: 100%;
border-radius: self.width / 2;
border-width: 2.5px;
border-color: rgba(255, 255, 255, 0.4);
Rectangle {
width: 97%; height: 97%;
border-radius: self.width / 2;
border-width: 1.2px;
border-color: rgba(255, 255, 255, 0.2);
}
}
// 强化全局高光层
Rectangle {
width: 100%; height: 100%;
border-radius: self.width / 2;
background: @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
}
for i in 12 : Path {
viewbox-width: 100; viewbox-height: 100;
width: 100%; height: 100%;
stroke: rgba(255, 255, 255, 0.4);
stroke: rgba(0, 0, 0, 0.5);
stroke-width: 2px;
property <float> angle: i * 30;
MoveTo {
@@ -119,21 +145,26 @@ slint::slint! {
}
}
for entry in [ {t: "12", a: 0}, {t: "3", a: 90}, {t: "6", a: 180}, {t: "9", a: 270} ] : Text {
for entry in [
{t: "12", a: 0}, {t: "1", a: 30}, {t: "2", a: 60}, {t: "3", a: 90},
{t: "4", a: 120}, {t: "5", a: 150}, {t: "6", a: 180}, {t: "7", a: 210},
{t: "8", a: 240}, {t: "9", a: 270}, {t: "10", a: 300}, {t: "11", a: 330}
] : Text {
property <float> rad: entry.a * 3.14159 / 180;
property <length> r: parent.width / 2 - 35px;
x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
text: entry.t;
color: rgba(255, 255, 255, 0.25);
color: rgba(0, 0, 0, 0.7);
font-size: 16px;
font-weight: 500;
}
Path {
viewbox-width: 100; viewbox-height: 100;
width: 100%; height: 100%;
stroke: #ffffff;
stroke-width: 4px;
stroke: #1a1a1a;
stroke-width: 5px;
MoveTo { x: 50; y: 50; }
LineTo {
x: 50 + Math.sin(root.hour * 1deg) * 25;
@@ -144,12 +175,12 @@ slint::slint! {
Path {
viewbox-width: 100; viewbox-height: 100;
width: 100%; height: 100%;
stroke: #bbbbbb;
stroke-width: 3px;
stroke: #333333;
stroke-width: 3.5px;
MoveTo { x: 50; y: 50; }
LineTo {
x: 50 + Math.sin(root.minute * 1deg) * 35;
y: 50 - Math.cos(root.minute * 1deg) * 35;
x: 50 + Math.sin(root.minute * 1deg) * 38;
y: 50 - Math.cos(root.minute * 1deg) * 38;
}
}
@@ -160,8 +191,8 @@ slint::slint! {
stroke-width: 1.5px;
MoveTo { x: 50; y: 50; }
LineTo {
x: 50 + Math.sin(root.second * 1deg) * 42;
y: 50 - Math.cos(root.second * 1deg) * 42;
x: 50 + Math.sin(root.second * 1deg) * 44;
y: 50 - Math.cos(root.second * 1deg) * 44;
}
}
@@ -169,10 +200,10 @@ slint::slint! {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: 8px; height: 8px;
background: #222;
background: #1a1a1a;
border-radius: 4px;
border-width: 2px;
border-color: white;
border-width: 1.5px;
border-color: #ffcc33;
}
}
}